/* ============================================================
   1. デザイントークン（色・余白・文字サイズはすべてここで管理）
============================================================ */
:root{
  /* 色 */
  --blue:#1668f0;
  --blue-dp:#0b47c4;
  --purple:#7b3cf5;
  --purple-dp:#5a1fd0;
  --ink:#0b1330;          /* 本文の濃い文字 */
  --sub:#59627a;          /* 補足の薄い文字 */
  --line:#e4e9f4;         /* 罫線 */
  --bg-tint:#f6f8ff;      /* 薄い背景 */
  --warn:#e8582d;         /* 課題・リスクの表現にだけ使う */
  --number-font:Arial,'Helvetica Neue',sans-serif;

  /* 余白のリズム（セクションの上下）
     この値を変えると全セクションの間隔が一斉に変わります。
     広げたいときも詰めたいときも、まずここを触ってください。 */
  --sec-y:clamp(52px,5.4vw,88px);
  --gutter:clamp(20px,5vw,64px);
  --maxw:1200px;

  /* 角丸 */
  --r-sm:12px;
  --r-md:20px;
  --r-lg:24px;
  --r-xl:44px;   /* セクションの上端に使う大きな丸み */

  /* 動き */
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   ページ遷移

   同一オリジン内のページ移動では、次のページが描画できるまで現在の
   画面を保持する。新しい画面だけを上から重ねることで、遷移途中に
   ブラウザの白いキャンバスが見えたり、クロスフェードが白く濁ったり
   するのを防ぐ。
============================================================ */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.16s;animation-timing-function:ease-out}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:pageEnter .16s ease-out both;mix-blend-mode:normal}
@keyframes pageEnter{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}

/* ============================================================
   2. リセットと土台
============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  /* 英数字は Poppins（丸みのあるジオメトリック）、日本語は Noto Sans JP。
     Poppins が読み込めない環境では Hiragino / Noto にそのまま落ちます。 */
  font-family:'Poppins','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.8;
}
/* 数字と英字だけを Poppins にしたい箇所に付ける */
.num-en{font-family:var(--number-font);font-feature-settings:'tnum';font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}
.section--tint{background:linear-gradient(180deg,#fff,var(--bg-tint) 30%,var(--bg-tint) 70%,#fff)}

/* ---- セクション見出しの共通形 ---- */
.sec-head{text-align:center;margin-bottom:clamp(30px,3.2vw,50px)}
.sec-head.is-left{text-align:left}
.label{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
}
h2{
  font-size:clamp(25px,3.2vw,44px);line-height:1.35;font-weight:800;
  letter-spacing:-.02em;text-wrap:balance;
}
h2 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-lead{
  margin-top:20px;color:var(--sub);font-size:clamp(14px,1.15vw,17px);
  font-weight:500;line-height:2;
}

/* ============================================================
   3. ボタン（画像パーツ + HTMLテキスト）
============================================================ */
.ibtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;font-weight:700;white-space:nowrap;border-radius:999px;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  transition:transform .24s var(--ease),box-shadow .24s,filter .24s;
}
.ibtn:hover{transform:translateY(-2px)}
.ibtn .arw{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.55em;height:1.55em;border-radius:50%;flex:none;
  transition:transform .28s var(--ease);
}
.ibtn:hover .arw{transform:translateX(3px)}
.ibtn svg{width:.62em;height:.62em}

.ibtn-primary{
  background-image:url('../images/btn_primary.png');color:#fff;
  box-shadow:0 12px 26px -8px rgba(70,60,220,.42),0 26px 50px -16px rgba(110,40,220,.32);
}
.ibtn-primary:hover{
  filter:saturate(1.06) brightness(1.03);
  box-shadow:0 16px 32px -8px rgba(70,60,220,.5),0 34px 62px -16px rgba(110,40,220,.4);
}
.ibtn-primary .arw{background:rgba(255,255,255,.24)}

.ibtn-ghost{
  background-image:url('../images/btn_ghost.png');color:var(--ink);
  box-shadow:0 8px 20px -10px rgba(30,50,120,.28);
}
.ibtn-ghost:hover{box-shadow:0 14px 28px -10px rgba(30,50,120,.34)}
.ibtn-ghost .arw{background:rgba(22,104,240,.1);color:var(--blue)}

.ibtn-sm{height:44px;padding:0 22px;font-size:clamp(12px,.95vw,14px)}
.ibtn-lg{height:clamp(50px,4vw,64px);padding:0 clamp(22px,2.3vw,38px);font-size:clamp(13px,1.05vw,17px)}

/* ============================================================
   4. ヘッダー
============================================================ */
header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;padding:22px clamp(20px,3.2vw,52px);
}
.logo{font-size:23px;font-weight:800;text-decoration:none}
.logo span{
  background:linear-gradient(100deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
nav{display:flex;gap:clamp(14px,1.7vw,28px);margin-left:auto;align-items:center}
nav a{
  position:relative;text-decoration:none;font-size:clamp(12px,.95vw,14px);
  font-weight:600;opacity:.82;padding:4px 0;transition:opacity .2s;
}
nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  transition:right .28s var(--ease);
}
nav a:hover{opacity:1}
nav a:hover::after{right:0}
nav a[aria-current="page"]{opacity:1}
nav a[aria-current="page"]::after{right:0}
.actions{display:flex;gap:10px;margin-left:clamp(16px,2vw,34px)}
@media (min-width:1001px) and (max-width:1320px){
  header > nav{gap:12px}
  header > .actions .ibtn-ghost{display:none}
}

/* ============================================================
   5. ファーストビュー
============================================================ */
.hero{
  position:relative;width:100%;
  aspect-ratio:1672/941;
  min-height:600px;                /* コンテンツが縦横比を超えても潰れない */
  max-height:min(86vh,720px);      /* 画面が広いときに間延びしないよう頭を抑える */
  background-image:url('../images/hero.png');background-size:cover;background-position:center right;
}
.hero-inner{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:84px clamp(24px,5.4vw,96px) 28px;
}
.copy{max-width:min(47%,620px)}
.badge-img{
  display:block;width:clamp(240px,26vw,380px);height:auto;
  filter:drop-shadow(0 8px 16px rgba(40,60,140,.22));
}
h1{
  margin-top:24px;font-size:clamp(28px,3.7vw,62px);line-height:1.24;
  font-weight:800;letter-spacing:-.022em;text-wrap:balance;
}
h1 em{
  position:relative;font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h1 em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.16em;border-radius:99px;
  background:linear-gradient(96deg,rgba(22,104,240,.18),rgba(123,60,245,.18));z-index:-1;
}
.hero-lead{
  margin-top:20px;font-size:clamp(11.5px,1.02vw,17px);line-height:2;
  color:var(--sub);font-weight:500;
}
.hero-lead b{color:var(--ink);font-weight:800}
.cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

.price-strip{
  display:inline-flex;margin-top:34px;border-radius:18px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -16px rgba(30,50,120,.35);overflow:hidden;
}
.price-strip>div{
  padding:clamp(10px,1vw,16px) clamp(14px,1.5vw,26px);
  border-right:1px solid rgba(120,140,220,.18);
}
.price-strip>div:last-child{border-right:0}
.price-strip span{font-size:clamp(9px,.76vw,12px);color:var(--sub);font-weight:700}
.price-strip b{
  display:block;margin-top:3px;font-size:clamp(16px,1.75vw,28px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.price-strip b small{font-size:.5em;font-weight:700;margin-left:3px;color:var(--sub)}
.price-strip .hl b{
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   6. 信頼の帯（セクション2）
============================================================ */
.proof{
  border-block:1px solid var(--line);
  padding-block:clamp(28px,3vw,44px);background:#fff;
}
.proof-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,40px);
  text-align:center;
}
.proof-grid--3{grid-template-columns:repeat(3,1fr)}
.proof-grid div span{
  display:block;font-size:clamp(10px,.8vw,13px);color:var(--sub);font-weight:700;
  letter-spacing:.04em;
}
.proof-grid div b{
  display:block;margin-top:6px;font-size:clamp(22px,2.6vw,40px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.proof-grid div b small{font-size:.45em;color:var(--sub);margin-left:3px;
  -webkit-text-fill-color:var(--sub)}

/* ============================================================
   7. 3つの壁（セクション3）
============================================================ */
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.wall{
  position:relative;padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px);
  border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);
  box-shadow:0 20px 44px -34px rgba(30,50,120,.5);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.wall:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(30,50,120,.55)}
.wall-no{
  font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--warn);opacity:.85;
}
.wall h3{margin-top:12px;font-size:clamp(18px,1.6vw,23px);font-weight:800;letter-spacing:-.01em}
.wall p{margin-top:14px;color:var(--sub);font-size:15px;line-height:1.95}
.wall::after{
  content:'';position:absolute;left:clamp(22px,2.4vw,36px);top:0;width:42px;height:4px;
  border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--warn),#f0a04b);
}

/* ============================================================
   8. 左右に振り分けるセクション（4・5・8で共通利用）
============================================================ */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);
  align-items:center;
}
.split.is-reverse .split-text{order:2}
.split-img img{border-radius:var(--r-lg)}
.bullets{margin-top:28px;display:grid;gap:14px}
.bullets li{
  list-style:none;display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.8;
}
.bullets .ck{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:3px;
  background:linear-gradient(120deg,var(--blue),var(--purple));
  display:grid;place-items:center;
}
.bullets .ck svg{width:11px;height:11px;color:#fff}

/* ============================================================
   9. できること13カテゴリ（セクション6）
============================================================ */
.cats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.cat{
  padding:22px 20px;border-radius:var(--r-md);background:#fff;
  border:1px solid var(--line);
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.cat:hover{
  transform:translateY(-3px);border-color:transparent;
  box-shadow:0 18px 38px -26px rgba(30,50,120,.6);
}
.cat-ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(22,104,240,.12),rgba(123,60,245,.14));
  color:var(--blue);margin-bottom:14px;
}
.cat-ic svg{width:18px;height:18px}
.cat h3{font-size:15px;font-weight:800;letter-spacing:-.01em}
.cat p{margin-top:7px;font-size:12.5px;color:var(--sub);line-height:1.75}

/* ============================================================
   10. 部門別の活用例（セクション7）
============================================================ */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.dept{
  padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);
  background:linear-gradient(165deg,#fff,#fafbff);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -34px rgba(30,50,120,.5);
}
.dept h3{
  font-size:17px;font-weight:800;display:flex;align-items:center;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.dept h3 i{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.dept ul{margin-top:16px;display:grid;gap:9px}
.dept li{
  list-style:none;font-size:13.5px;color:var(--sub);line-height:1.7;
  padding-left:16px;position:relative;
}
.dept li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:rgba(22,104,240,.35);
}

/* ============================================================
   11. 2つのエージェント（セクション8）
============================================================ */
.agents{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px);margin-top:44px}
.agent{
  padding:clamp(28px,3vw,42px);border-radius:var(--r-lg);position:relative;overflow:hidden;
  border:1px solid var(--line);background:#fff;
}
.agent::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
}
.agent--claw::before{background:linear-gradient(90deg,#1668f0,#4b9dff)}
.agent--hermes::before{background:linear-gradient(90deg,#7b3cf5,#b47bff)}
.agent-name{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.02em}
.agent-role{
  display:inline-block;margin-top:10px;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;
}
.agent--claw .agent-role{background:rgba(22,104,240,.1);color:var(--blue-dp)}
.agent--hermes .agent-role{background:rgba(123,60,245,.1);color:var(--purple-dp)}
.agent p.desc{margin-top:18px;color:var(--sub);font-size:14.5px;line-height:1.95}

.combine{
  margin-top:clamp(24px,3vw,40px);padding:clamp(26px,3vw,40px);
  border-radius:var(--r-lg);text-align:center;
  background:#eff2f5;
  border:1px solid rgba(120,140,220,.2);
}
.combine p{margin-top:0;color:var(--sub);font-size:clamp(17px,2vw,24px);font-weight:700;line-height:1.75;letter-spacing:-.02em}
.combine code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff;padding:2px 8px;border-radius:6px;font-size:.9em;
  border:1px solid var(--line);color:var(--purple-dp);font-weight:700;
}

/* ============================================================
   12. 導入の壁（セクション9）
============================================================ */
.risk-note{
  margin-top:28px;padding:22px 24px;border-radius:var(--r-md);
  background:rgba(232,88,45,.06);border:1px solid rgba(232,88,45,.18);
}
.risk-note b{color:var(--warn);font-weight:800;font-size:14.5px}
.risk-note p{margin-top:8px;font-size:14px;color:var(--sub);line-height:1.9}

/* ============================================================
   13. 納品初日から即戦力（セクション10）
============================================================ */
.ready{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);margin-top:44px}
.ready-card{
  padding:clamp(26px,2.8vw,40px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 48px -36px rgba(30,50,120,.5);
}
.ready-card .num{
  font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ready-card .num small{font-size:.4em;color:var(--sub);-webkit-text-fill-color:var(--sub);margin-left:4px}
.ready-card h3{margin-top:10px;font-size:17px;font-weight:800}
.ready-card ul{margin-top:16px;display:grid;gap:8px}
.ready-card li{
  list-style:none;font-size:13.5px;color:var(--sub);padding-left:16px;position:relative;line-height:1.75;
}
.ready-card li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:rgba(123,60,245,.4);
}

/* ============================================================
   14. なぜZETTAiなのか（セクション11）
============================================================ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.why-card{
  padding:clamp(26px,2.8vw,38px);border-radius:var(--r-lg);
  background:linear-gradient(165deg,#fff,#fafbff);
  border:1px solid var(--line);
}
.why-card .ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(22,104,240,.12),rgba(123,60,245,.14));color:var(--blue);
}
.why-card .ic svg{width:21px;height:21px}
.why-card h3{font-size:17px;font-weight:800}
.why-card p{margin-top:12px;font-size:14px;color:var(--sub);line-height:1.9}
.todo-box{
  margin-top:32px;padding:20px 24px;border-radius:var(--r-md);
  background:#fffbe9;border:1px dashed #e0b73a;font-size:13.5px;color:#7a5c10;line-height:1.9;
}
.todo-box b{font-weight:800}

/* ============================================================
   15. 料金プラン（セクション12）
============================================================ */
.plans{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(18px,2.2vw,30px);align-items:start}
.plan{
  position:relative;padding:clamp(30px,3.2vw,46px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
}
.plan--reco{
  border-color:transparent;
  box-shadow:0 0 0 2px transparent,0 30px 70px -40px rgba(70,60,220,.6);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,var(--blue),var(--purple)) border-box;
  border:2px solid transparent;
}
.plan-flag{
  position:absolute;top:-13px;left:clamp(30px,3.2vw,46px);
  padding:6px 16px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#fff;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  box-shadow:0 8px 18px -6px rgba(70,60,220,.5);
}
.plan h3{font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.01em}
.plan .amount{
  margin-top:16px;font-size:clamp(38px,4.6vw,64px);font-weight:800;
  letter-spacing:-.04em;line-height:1;
}
.plan--reco .amount{
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan .amount small{font-size:.32em;font-weight:700;color:var(--sub);
  -webkit-text-fill-color:var(--sub);margin-left:6px;letter-spacing:0}
.plan .sub{margin-top:10px;font-size:13.5px;color:var(--sub)}
.plan ul{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:13px}
.plan li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.75}
.plan li .ck{
  flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;display:grid;place-items:center;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.plan--sub li .ck{background:#c9d2e6}
.plan li .ck svg{width:10px;height:10px;color:#fff}
.plan .btnwrap{margin-top:30px}
.plan .btnwrap .ibtn{width:100%}
.price-note{
  margin-top:26px;padding:18px 22px;border-radius:var(--r-md);
  background:var(--bg-tint);border:1px solid var(--line);
  font-size:13px;color:var(--sub);line-height:1.9;
}
.price-note b{color:var(--ink);font-weight:800}

/* ============================================================
   16. 導入の流れ（セクション13）
============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);position:relative}
.step{
  position:relative;padding:clamp(26px,2.8vw,38px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
}
.step--key{
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,var(--blue),var(--purple)) border-box;
  box-shadow:0 26px 60px -42px rgba(70,60,220,.6);
}
.step-no{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:16px;font-weight:800;color:#fff;margin-bottom:18px;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.step h3{font-size:17px;font-weight:800}
.step p{margin-top:12px;font-size:14px;color:var(--sub);line-height:1.9}
.step ul{margin-top:16px;display:grid;gap:8px}
.step li{list-style:none;font-size:13px;color:var(--sub);padding-left:15px;position:relative}
.step li::before{
  content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;
  background:rgba(22,104,240,.4);
}
.step-tag{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;background:rgba(123,60,245,.1);color:var(--purple-dp);
}

/* ============================================================
   17. 必要な環境（セクション14）
============================================================ */
.env{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.env-card{
  padding:clamp(26px,2.8vw,38px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
}
.env-card h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px}
.env-card h3 .ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(22,104,240,.12),rgba(123,60,245,.14));color:var(--blue);
}
.env-card h3 .ic svg{width:17px;height:17px}
.env-card ul{margin-top:18px;display:grid;gap:10px}
.env-card li{
  list-style:none;font-size:14px;color:var(--sub);padding-left:16px;position:relative;line-height:1.7;
}
.env-card li::before{
  content:'';position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;
  background:rgba(22,104,240,.32);
}
.env-card li b{color:var(--ink);font-weight:700}
.env-foot{
  margin-top:26px;padding:20px 24px;border-radius:var(--r-md);text-align:center;
  background:linear-gradient(120deg,rgba(22,104,240,.06),rgba(123,60,245,.08));
  border:1px solid rgba(120,140,220,.2);font-size:14.5px;
}
.env-foot b{font-weight:800}

/* ============================================================
   18. よくある質問（セクション15）
============================================================ */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}
.faq details{
  border-radius:var(--r-md);background:#fff;border:1px solid var(--line);
  overflow:hidden;transition:box-shadow .26s;
}
.faq details[open]{box-shadow:0 20px 44px -34px rgba(30,50,120,.5)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 56px 20px 24px;position:relative;
  font-size:15.5px;font-weight:700;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--blue);border-bottom:2.4px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .a{padding:0 24px 22px;font-size:14px;color:var(--sub);line-height:2}

/* ============================================================
   19. 最終CTA（セクション16）
============================================================ */
.final{
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(72px,8vw,120px);
  background:linear-gradient(150deg,#f2f6ff 0%,#eef0ff 45%,#f6f0ff 100%);
}
.final::before,.final::after{
  content:'';position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
}
.final::before{width:420px;height:420px;left:-120px;top:-140px;background:rgba(22,104,240,.28)}
.final::after{width:460px;height:460px;right:-140px;bottom:-180px;background:rgba(123,60,245,.26)}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(26px,3.4vw,46px)}
.final .cta{justify-content:center;margin-top:36px}

/* 下層ページ末尾CTA：トップと同じ横長イラストに統一 */
.final.final--illustrated,
.pg-panelwrap.final--illustrated{
  padding:0;
  background:#eff2f5;
  overflow:hidden;
}
.final.final--illustrated::before,
.final.final--illustrated::after{display:none}
.final.final--illustrated > .wrap,
.pg-panelwrap.final--illustrated > .panel{display:none}
.page-final-hero{position:relative;width:100%}
.page-final-hero > picture{display:block;width:100%}
.page-final-hero > picture > img,
.page-final-hero > img{display:block;width:100%;height:auto}
.page-final-hero-actions{position:absolute;inset:0;z-index:1}
.page-final-hero-actions a{position:absolute;display:block;border-radius:999px}
/* contact_hero-wide.png の焼き込みCTAと一致するクリック／ホバー領域。 */
.page-final-hero-actions a:first-child{left:16.15%;top:53.8%;width:16.65%;height:11.4%}
.page-final-hero-actions a:last-child{left:33.5%;top:53.8%;width:12.4%;height:11.4%}
/* モバイルでは縦長の相談バナーへ切り替え、焼き込みCTAのクリック領域も合わせる。 */
@media (max-width:700px){
  .page-final-hero-actions a:first-child{top:72.5%;left:18%;width:64%;height:7.4%}
  .page-final-hero-actions a:last-child{top:80.7%;left:18%;width:64%;height:6.9%}
}

/* ============================================================
   20. フッター
============================================================ */
footer{background:#0b1330;color:#fff;padding-block:clamp(48px,5vw,72px) 32px}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:clamp(24px,3vw,48px)}
.f-brand .logo{color:#fff;font-size:22px}
.f-brand p{margin-top:14px;font-size:13px;color:rgba(255,255,255,.55);line-height:1.9}
.f-col h4{font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.f-col ul{margin-top:16px;display:grid;gap:11px}
.f-col li{list-style:none}
.f-col a{
  font-size:13.5px;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s;
}
.f-col a:hover{color:#fff}
.f-bottom{
  margin-top:clamp(36px,4vw,56px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.45);
}

/* ============================================================
   21. レスポンシブ
============================================================ */
@media (max-width:1280px){ .copy{max-width:56%} }
@media (max-width:1000px){
  header{padding:16px 20px}
  nav{display:none}
  .hero{
    aspect-ratio:auto;min-height:auto;
    padding:104px 0 clamp(260px,42vw,420px);
    background-size:150% auto;background-position:right bottom;background-repeat:no-repeat;
  }
  .hero-inner{position:static;padding:0 20px}
  .copy{max-width:100%}
  .walls,.depts,.agents,.split,.ready,.why,.plans,.steps,.env,.f-grid{grid-template-columns:1fr}
  .split.is-reverse .split-text{order:0}
  .proof-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .fv-proof .proof-grid--3 > div:last-child{grid-column:1 / -1}
  .f-grid{gap:32px}
}

/* ============================================================
   モバイルヘッダー / 全ページ共通
============================================================ */
.menu-toggle{display:none}
@media (max-width:1000px){
  header{
    position:relative;
    min-height:72px;
    padding:12px 20px;
    background:#eff2f5;
    box-shadow:0 1px 0 rgba(32,38,45,.08);
  }
  header > .logo{font-size:22px}
  header > .actions{margin-left:auto;gap:0}
  header > .actions .ibtn-ghost{display:none}
  header > .actions .ibtn-primary{
    height:42px;
    padding-inline:18px;
    font-size:14px;
    box-shadow:none;
  }
  header > .actions .ibtn-primary .arw{display:none}
  .menu-toggle{
    display:grid;
    width:44px;height:44px;
    margin-left:10px;
    padding:10px;
    place-content:center;
    gap:5px;
    border:0;background:transparent;
    color:var(--ink);cursor:pointer;
  }
  .menu-toggle span{
    display:block;width:24px;height:2px;border-radius:99px;
    background:currentColor;transition:transform .22s ease,opacity .18s ease;
  }
  header > nav{display:none}
  header.is-menu-open{
    position:fixed;inset:0;z-index:1000;
    display:flex;align-content:flex-start;align-items:center;
    flex-wrap:wrap;
    padding:12px 20px;
    background:#eff2f5;
  }
  header.is-menu-open > .actions{display:none}
  header.is-menu-open > nav{
    display:flex;
    order:3;
    width:100%;
    margin:30px 0 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  header.is-menu-open > nav a{
    padding:18px 4px;
    font-size:20px;
    font-weight:700;
    opacity:1;
    border-bottom:1px solid rgba(32,38,45,.09);
  }
  header.is-menu-open > nav a::after{display:none}
  header.is-menu-open .menu-toggle{margin-left:auto}
  header.is-menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.is-menu-open .menu-toggle span:nth-child(2){opacity:0}
  header.is-menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.mobile-menu-open{overflow:hidden}
}
@media (max-width:560px){
  .price-strip{flex-direction:column;width:100%}
  .price-strip>div{border-right:0;border-bottom:1px solid rgba(120,140,220,.18)}
  .cta .ibtn{width:100%}
}

/* ============================================================
   22. 下層ページ用の共通パーツ
   （トップページでは使いません。openclaw.html 以降で使用）
============================================================ */

/* ---- 下層ページのヘッダー（トップの巨大FVの代わり） ---- */
.page-head{
  position:relative;
  padding:calc(96px + clamp(40px,5vw,72px)) 0 clamp(40px,5vw,72px);
  background:linear-gradient(160deg,#f4f7ff 0%,#eef0fd 55%,#f7f1ff 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-head::before,.page-head::after{
  content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;
}
.page-head::before{width:380px;height:380px;left:-130px;top:-160px;background:rgba(22,104,240,.3)}
.page-head::after{width:420px;height:420px;right:-160px;bottom:-220px;background:rgba(123,60,245,.28)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{
  margin-top:14px;
  font-size:clamp(26px,3.8vw,48px);line-height:1.3;font-weight:800;letter-spacing:-.025em;
}
.page-head h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* OpenClaw は強調語も本文と同じ濃色に統一する。
   色面パネル内は .ochm-panel 側で白文字に切り替わるため対象外。 */
.page-head--openclaw h1 em,
.page-head--openclaw ~ .section h2 em,
.page-head--price h1 em,
.page-head--price ~ .section h2 em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
/* 料金ページは直下のプラン面へ切れ目なくつなげるため、ヒーローも白地にする。 */
.page-head--price{
  /* 下の料金カードエリアのベース色と同一にして、面を自然につなげる */
  background:#f9fbff;
  border-bottom:0;
  padding-bottom:clamp(24px,3vw,42px);
}
.page-head--price h1{
  /* 共通ページ見出し（26〜48px）の1.3倍。横のイラストも em 指定で追従する。 */
  font-size:clamp(34px,4.94vw,62px);
}
.page-head--price::before,
.page-head--price::after{display:none}
.page-head .lead{
  margin-top:18px;max-width:680px;
  color:var(--sub);font-size:clamp(14px,1.15vw,16.5px);line-height:2;font-weight:500;
}

/* FAQヒーロー：料金ページと同じ、余白を抑えた導入レイアウト。 */
.fq-hero{
  padding:calc(var(--header-h) + clamp(24px,3vw,42px)) 0 clamp(32px,4vw,56px);
  background:#fff;border-bottom:0;
}
.fq-hero::before,.fq-hero::after{display:none}
.fq-hero .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,350px);
  align-items:center;gap:clamp(32px,5vw,80px);
}
.fq-hero h1{font-size:clamp(34px,4.94vw,62px);line-height:1.2}
.fq-hero__art{
  justify-self:end;width:min(100%,350px);height:auto;
  filter:drop-shadow(0 22px 30px rgba(42,72,140,.16));
}
@media (max-width:760px){
  .fq-hero .wrap{grid-template-columns:1fr;gap:18px}
  .fq-hero__art{width:min(40vw,182px);justify-self:center;order:-1}
}

/* 記事一覧は、見出し・説明・装飾を一枚にまとめた専用ビジュアルをそのまま見せる。 */
.blog-hero-image{
  padding-top:var(--header-h);
  background:#fff;
}
.blog-hero-image img{width:100%;height:auto;display:block}
@media (max-width:800px){
  .blog-hero-image img{min-height:0;object-fit:contain;object-position:center}
}

/* OpenClaw の導入ヒーローは、指定の完成イラストをそのまま使用する */
.page-head--illustrated{
  padding:0;
  background:#fff;
  border-bottom:0;
}
.page-head--illustrated::before,
.page-head--illustrated::after,
.page-head--illustrated > .wrap{display:none}
.oc-hero-stage{
  position:relative;
  /* 画面幅いっぱいに表示し、左右の余白をなくす */
  width:100vw;
  max-width:none;
  aspect-ratio:1942 / 809;
  overflow:hidden;
  /* ヘッダー直下から開始する */
  margin:0 auto;
}
.oc-hero-stage > .oc-hero-picture,
.oc-hero-stage > .oc-hero-picture img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
.hm-hero-stage{
  position:relative;
  /* OpenClaw と同一の表示枠：全幅、ヘッダー直下、同じ画像比率 */
  width:100vw;
  max-width:none;
  aspect-ratio:1942 / 809;
  overflow:hidden;
  margin:0 auto;
}
.hm-hero-stage > .hm-hero-picture,
.hm-hero-stage > .hm-hero-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hm-hero-motion{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#eff2f5;
  clip-path:ellipse(20% 40% at 77% 49%);
}
.hm-hero-motion .hm-hero-picture{display:block;width:100%;height:100%}
.hm-hero-motion img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:hmHeroFloat 5.4s ease-in-out infinite;will-change:transform;
}
.hm-hero-character-float{
  position:absolute;z-index:1;left:60.25%;top:21.01%;width:28.58%;height:auto;
  transform-origin:center;pointer-events:none;
  animation:hmCharacterFloat 5.4s ease-in-out infinite;will-change:transform;
}
.hm-hero-character-decor{
  position:absolute;z-index:0;left:62%;top:21.01%;width:28.58%;height:auto;
  transform:scale(1.3);transform-origin:center;pointer-events:none;
}
.hm-space-particles{
  position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;
  pointer-events:none;
}
@keyframes hmHeroFloat{0%,100%{transform:translateY(12px)}50%{transform:translateY(0)}}
@keyframes hmCharacterFloat{0%,100%{transform:translateY(12px) scale(1.1)}50%{transform:translateY(0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .hm-hero-motion img{animation:none;transform:translateY(12px)}
  .hm-hero-character-float{animation:none;transform:scale(1.1)}
  .hm-space-particles{display:none}
}
/* 完成画像に焼き込まれた CTA とぴったり重なる透明なクリック領域。 */
.hm-hero-baked-actions{
  position:absolute;inset:0;z-index:10;display:block;margin:0;
  pointer-events:auto;
}
.hm-hero-baked-actions a{
  position:absolute;top:76.5%;height:10.2%;z-index:1;display:block;
  border-radius:999px;pointer-events:auto;cursor:pointer;touch-action:manipulation;
}
/* 1942×809px基準で、画像内ボタンの外枠（x:230–666 / 688–1091, y:619–702）に一致。 */
.hm-hero-baked-actions a:first-child{left:11.8%;width:22.5%}
.hm-hero-baked-actions a:last-child{left:35.4%;width:20.8%}
/* 透明リンクのフォーカス輪郭が、焼き込み済みCTAの上に線として重ならないようにする。 */
.hm-hero-baked-actions a:focus,
.hm-hero-baked-actions a:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
/* nav 共通のホバー下線を、CTA用の透明リンクには生成しない。 */
.hm-hero-baked-actions a::after{content:none !important}
@media (max-width:768px){
  /* stickyヘッダーの下から、添付の941:1672縦長画像を余白なく始める。 */
  .page-hermes .page-head.page-head--illustrated{padding-top:var(--header-h)}
  .hm-hero-stage{width:100%;aspect-ratio:941 / 1672}
  .hm-hero-stage > .hm-hero-picture img{object-fit:contain}
  /* モバイルは完成済みヒーローを静止表示する。 */
  .hm-hero-motion{
    display:none;
  }
  .hm-hero-character-float,.hm-hero-character-decor{display:none}
  .hm-space-particles{display:block}
  .hm-hero-baked-actions a,
  .hm-hero-baked-actions a:first-child,
  .hm-hero-baked-actions a:last-child{left:6%;width:88%;height:5.8%}
  .hm-hero-baked-actions a:first-child{top:47.5%}
  .hm-hero-baked-actions a:last-child{top:54.4%}
}
.hm-hero-copy{position:absolute;z-index:2;left:10%;top:16%;width:min(55%,1040px);color:var(--ink)}
.hm-hero-copy .label{display:block;color:var(--purple);font-size:clamp(12px,1.1vw,18px);font-weight:800;letter-spacing:.12em}
.hm-hero-copy h1{margin:clamp(18px,1.8vw,30px) 0 0;font-size:clamp(38px,4.15vw,80px);line-height:1.22;font-weight:800;letter-spacing:-.055em;text-wrap:balance}
.hm-hero-copy h1::after{content:'';display:block;width:clamp(112px,12vw,230px);height:clamp(7px,.55vw,11px);margin-top:.05em;border-radius:999px;background:linear-gradient(90deg,#b47bff,#d3bdff)}
.hm-hero-copy p{max-width:58ch;margin:clamp(16px,1.7vw,28px) 0 0;font-size:clamp(13px,1.1vw,20px);font-weight:500;line-height:1.8;color:#4e5f7d}
.hm-hero-facts{display:flex;gap:clamp(8px,1vw,18px);flex-wrap:wrap;margin:clamp(18px,2vw,32px) 0 0;padding:0;list-style:none}
.hm-hero-facts li{display:flex;align-items:center;gap:10px;min-height:clamp(42px,3.1vw,60px);padding:0 clamp(16px,1.5vw,28px);border-radius:999px;background:#fff;box-shadow:var(--sh-rest);font-size:clamp(12px,1.05vw,18px);font-weight:700;white-space:nowrap}
.hm-hero-facts li::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;background:var(--purple)}
.hm-hero-actions{position:absolute;inset:0;z-index:3}
.hm-hero-actions a{
  position:absolute;top:81%;height:10%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:.9em;
  padding:0 1.3em;border:2px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);font-size:clamp(11px,1.1vw,18px);font-weight:800;
  letter-spacing:-.02em;text-decoration:none;white-space:nowrap;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.hm-hero-actions a:first-child{left:10.5%;width:25.5%}
.hm-hero-actions a:last-child{left:36.5%;width:16.5%}
.hm-hero-actions a span{color:var(--purple);font-size:1.25em;line-height:1}
.hm-hero-actions a:hover{transform:translateY(-2px);background:var(--purple);border-color:var(--purple);color:#fff}
.hm-hero-actions a:hover span{color:#fff}
.hm-hero-mobile-actions{display:none}
/* Hermes の上端装飾を、重なり合う sticky ヘッダーの後ろへ隠す。 */
body:has(.hm-hero-stage) header,
body:has(.oc-hero-stage) header{background:#fff}
@media (max-width:700px){
  .hm-hero-stage{margin-top:0}
}
/* 赤い案内キャラクター（杖を含む）だけを、周囲の装飾から切り離して浮遊させる。 */
.oc-hero-motion{
  display:block;
  position:absolute;inset:0;z-index:1;
  overflow:hidden;
  background:transparent;
  /* 実アルファのキャラ単体PNG。周囲の完成イラストは一切含めない。 */
  pointer-events:none;
}
.oc-hero-motion img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:ocHeroFloat 5.4s ease-in-out infinite;
}
.oc-space-particles{
  position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;
  pointer-events:none;
}
@keyframes ocHeroFloat{
  /* 背景の元位置に合わせて右へ60px寄せ、そこから上方向へ穏やかに浮遊する。 */
  0%,100%{transform:translate(60px,15px)}
  50%{transform:translate(60px,0)}
}
.oc-hero-actions{position:absolute;inset:0;z-index:10;pointer-events:auto}
.oc-hero-actions a{
  position:absolute;
  top:85.7%;
  height:8.4%;
  z-index:1;display:block;border-radius:999px;pointer-events:auto;cursor:pointer;touch-action:manipulation;
}
.oc-hero-actions a:first-child{left:12%;width:20.5%}
.oc-hero-actions a:last-child{left:33.5%;width:17.2%}
@media (max-width:1000px){
  .oc-hero-stage{
    width:100%;
    max-width:100%;
    min-width:0;
    height:auto;
    aspect-ratio:941 / 1672;
  }
  .oc-hero-stage > .oc-hero-picture,
  .oc-hero-stage > .oc-hero-picture img{
    width:100%;
    max-width:none;
    height:100%;
    object-fit:fill;
  }
  /* モバイルは完成済みヒーローを静止表示する。 */
  .oc-hero-motion{
    display:none;
  }
  .oc-space-particles{display:block}
  .oc-hero-actions a,
  .oc-hero-actions a:first-child,
  .oc-hero-actions a:last-child{left:10%;width:78%;height:5.8%}
  .oc-hero-actions a:first-child{top:52.2%}
  .oc-hero-actions a:last-child{top:58.55%}
}
@media (prefers-reduced-motion:reduce){
  .oc-hero-motion img{animation:none;transform:translate(60px,15px)}
  .oc-space-particles{display:none}
}

/* ---- 汎用の2カラム表（比較表） ---- */
.tablewrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
table.cmp{width:100%;border-collapse:collapse;min-width:620px}
table.cmp th,table.cmp td{
  padding:16px 20px;text-align:left;font-size:14px;line-height:1.75;
  border-bottom:1px solid var(--line);
}
table.cmp thead th{
  font-size:13px;font-weight:800;letter-spacing:.02em;
  background:var(--bg-tint);white-space:nowrap;
}
table.cmp tbody th{
  font-weight:700;color:var(--sub);font-size:13px;white-space:nowrap;
  background:linear-gradient(90deg,var(--bg-tint),transparent);
}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp .is-claw{color:var(--blue-dp);font-weight:700}
table.cmp .is-hermes{color:var(--purple-dp);font-weight:700}

/* ---- できること一覧（カテゴリ + 項目リスト） ---- */
.catblock{
  padding:clamp(24px,2.8vw,36px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
}
.catblock h3{
  display:flex;align-items:center;gap:12px;
  font-size:17px;font-weight:800;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.catblock h3 .n{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.catblock ol{margin-top:16px;padding:0;list-style:none;columns:2;column-gap:28px}
.catblock li{
  font-size:13.5px;color:var(--sub);line-height:1.85;padding-left:15px;position:relative;
  break-inside:avoid;margin-bottom:5px;
}
.catblock li::before{
  content:'';position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;
  background:rgba(22,104,240,.35);
}
.catstack{display:grid;gap:clamp(14px,1.8vw,22px)}

/* ---- 資料ビューア（スライドを縦に並べる） ---- */
.slides{display:grid;gap:16px}
.slide{
  border-radius:var(--r-md);border:1px solid var(--line);overflow:hidden;background:#fff;
  box-shadow:0 18px 40px -34px rgba(30,50,120,.5);
}
.slide img{width:100%;height:auto;display:block}
.slide .cap{
  padding:12px 18px;border-top:1px solid var(--line);
  font-size:12px;color:var(--sub);
  display:flex;justify-content:space-between;gap:12px;
}
.slide .cap b{font-weight:700;color:var(--ink)}

/* ---- フォーム ---- */
.form{
  max-width:680px;margin-inline:auto;
  padding:clamp(26px,3vw,42px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 26px 60px -44px rgba(30,50,120,.55);
}
.field{display:grid;gap:8px;margin-bottom:22px}
.field label{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.req{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  background:none;color:var(--warn);
}
.opt{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px;
  background:var(--bg-tint);color:var(--sub);
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.8}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(22,104,240,.12);
}
.field .hint{font-size:12px;color:var(--sub);line-height:1.7}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-row label{
  flex:1;min-width:180px;cursor:pointer;
  padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;
  transition:border-color .2s,background .2s;
}
.radio-row label:hover{border-color:rgba(22,104,240,.4)}
.radio-row input{accent-color:var(--blue);width:17px;height:17px;flex:none}
.radio-row input:checked + span{color:var(--blue-dp);font-weight:700}
.form-foot{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.form-foot .ibtn{width:100%}
.form-foot p{margin-top:14px;font-size:12px;color:var(--sub);line-height:1.8}

/* ---- 記事カード（一覧） ---- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2vw,26px)}
.post{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:transform .28s var(--ease),box-shadow .28s;
}
.post:hover{transform:translateY(-4px);box-shadow:0 28px 56px -38px rgba(30,50,120,.55)}
.post .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#eef2ff,#f4eeff);overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.post .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .cat{
  align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;
  background:rgba(22,104,240,.09);color:var(--blue-dp);
}
.post h3{font-size:16px;font-weight:800;line-height:1.6;letter-spacing:-.01em}
.post p{font-size:13px;color:var(--sub);line-height:1.8;flex:1}
.post time{font-size:12px;color:var(--sub);font-family:ui-monospace,Menlo,monospace}

/* ---- 記事本文 ---- */
.article{max-width:760px;margin-inline:auto}
.article .toc{
  padding:22px 26px;border-radius:var(--r-md);background:var(--bg-tint);
  border:1px solid var(--line);margin-bottom:44px;
}
.article .toc b{font-size:13px;font-weight:800}
.article .toc ol{margin:14px 0 0;padding-left:1.3em;display:grid;gap:8px}
.article .toc a{font-size:14px;color:var(--sub);text-decoration:none}
.article .toc a:hover{color:var(--blue)}
.article h2{
  margin:56px 0 20px;font-size:clamp(20px,2.4vw,28px);
  padding-bottom:14px;border-bottom:2px solid var(--line);text-align:left;
}
.article h3{margin:38px 0 14px;font-size:clamp(17px,1.9vw,20px);font-weight:800}
.article p{margin-bottom:22px;font-size:15.5px;line-height:2.1;color:#39405a}
.article ul,.article ol{margin:0 0 24px 1.3em;display:grid;gap:10px}
.article li{font-size:15px;line-height:1.95;color:#39405a}
.article strong{font-weight:800;color:var(--ink)}
.article .callout{
  margin:32px 0;padding:22px 26px;border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(22,104,240,.05),rgba(123,60,245,.07));
  border:1px solid rgba(120,140,220,.22);
}
.article .callout b{display:block;font-size:14px;font-weight:800;margin-bottom:8px}
.article .callout p{margin:0;font-size:14px;line-height:1.95}
.article-cta{
  margin-top:64px;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(150deg,#f2f6ff,#f6f0ff);border:1px solid rgba(120,140,220,.2);
}
.article-cta h3{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.01em}
.article-cta p{margin-top:12px;color:var(--sub);font-size:14px;line-height:1.9}
.article-cta .cta{justify-content:center;margin-top:24px}
.article-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.article-meta .cat{
  font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;
  background:rgba(22,104,240,.09);color:var(--blue-dp);
}
.article-meta time{font-size:13px;color:var(--sub);font-family:ui-monospace,Menlo,monospace}

@media (max-width:760px){
  .catblock ol{columns:1}
  .article .toc{padding:18px 20px}
}

/* ============================================================
   23. プレースホルダ（中身が未確定の箇所）

   記事など、まだ用意できていないコンテンツの「入れ物」を示すための表示です。
   中身が入ったら、これらのクラスは外してください。
   公開前に .is-ph が残っていないか必ず確認すること。
============================================================ */
.is-ph{position:relative}
.ph-note{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;
  background:#fff7e3;color:#8a6a12;border:1px dashed #dfb945;
}
.ph-note::before{content:'';width:6px;height:6px;border-radius:50%;background:#dfb945}
.ph-bar{
  display:block;height:.85em;border-radius:5px;
  background:linear-gradient(90deg,#eceff7,#f5f7fc);
}
.ph-bar + .ph-bar{margin-top:9px}
.ph-bar.w90{width:90%} .ph-bar.w75{width:75%} .ph-bar.w60{width:60%} .ph-bar.w40{width:40%}
.ph-thumb{
  aspect-ratio:16/9;display:grid;place-items:center;
  background:
    repeating-linear-gradient(-45deg,#eef1f8 0 10px,#f6f8fc 10px 20px);
  color:#98a1b8;font-size:12px;font-weight:700;letter-spacing:.04em;
}
.post.is-ph{cursor:default;pointer-events:none}
.post.is-ph:hover{transform:none;box-shadow:none}

.ph-guide{
  margin:0 0 22px;padding:16px 20px;border-radius:var(--r-md);
  background:#fffbe9;border:1px dashed #e0b73a;
  font-size:13px;color:#7a5c10;line-height:1.9;
}
.ph-guide b{font-weight:800}
.ph-slot{
  padding:20px 22px;border-radius:var(--r-md);
  border:1.5px dashed #ccd4e6;background:#fafbff;
  color:#8891ad;font-size:13px;line-height:1.9;
}
.ph-slot b{display:block;font-size:12px;font-weight:800;color:#6a7591;margin-bottom:6px;letter-spacing:.04em}

/* ============================================================
   24. セクションの面（背景の切り替えと、上端の丸み）

   参考にした構造：面ごとに背景を切り替え、次の面が前の面に
   「乗り上げる」ように上端を大きく丸める。これだけで縦に長い
   ページが単調にならなくなります。

   使い方
     <section class="section section--round">        白い面が乗り上げる
     <section class="section section--brand section--round">  ブルーの面が乗り上げる
============================================================ */
.section--round{
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  position:relative;
  margin-top:calc(var(--r-xl) * -1);   /* 前の面に食い込ませる */
  z-index:1;
}
.section--round + .section--round{margin-top:calc(var(--r-xl) * -1)}

/* 白い面 */
.section--paper{background:#fff}

/* ブルーの全面。白ヌキ文字になるので、中の色も切り替える */
.section--brand{
  background:linear-gradient(150deg,var(--blue) 0%,#2f5ff0 46%,var(--purple) 100%);
  color:#fff;
}

/* 2つのエージェントだけは、定番の青紫グラデーションから離して
   人の温度を感じるココア／テラコッタの面にする。カード内の図版は
   そのまま活かし、背景の琥珀色の光でセクション全体をなじませる。 */
#agents.section--brand{
  background:
    radial-gradient(circle at 12% 16%,rgba(255,215,157,.20) 0,rgba(255,215,157,0) 30%),
    radial-gradient(circle at 88% 78%,rgba(226,126,88,.24) 0,rgba(226,126,88,0) 34%),
    linear-gradient(145deg,#332824 0%,#58372f 48%,#7a4938 100%);
}
#agents .deco2-brand-a{--deco2-color:rgba(255,225,183,.10)}
#agents .deco2-brand-b{--deco2-color:rgba(255,199,155,.09)}
.section--brand .label{
  background:none;-webkit-text-fill-color:#fff;color:#fff;opacity:.72;
}
.section--brand h2,
.section--brand h3{color:#fff}
.section--brand h2 em{
  background:none;-webkit-text-fill-color:#fff;color:#fff;
  text-decoration:underline;text-decoration-thickness:.09em;
  text-underline-offset:.14em;text-decoration-color:rgba(255,255,255,.42);
}
/* ココア色の「2つのエージェント」面では、紙面の金箔のような暖色で強調する */
#agents.section--brand h2 em{
  color:var(--blue);-webkit-text-fill-color:var(--blue);
  text-decoration-color:var(--blue);
  text-shadow:0 1px 0 rgba(72,39,24,.28);
}
.section--brand .sec-lead{color:rgba(255,255,255,.82)}
.section--brand .wall,
.section--brand .dept,
.section--brand .catblock,
.section--brand .env-card,
.section--brand .ready-card{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:blur(8px);
  box-shadow:none;
}
.section--brand .wall p,
.section--brand .dept li,
.section--brand .catblock li,
.section--brand .env-card li,
.section--brand .ready-card li{color:rgba(255,255,255,.78)}
.section--brand .dept h3,
.section--brand .catblock h3{border-color:rgba(255,255,255,.16)}
.section--brand .ibtn-ghost{
  background-image:none;background:rgba(255,255,255,.14);
  color:#fff;box-shadow:none;backdrop-filter:blur(8px);
}
.section--brand .ibtn-ghost:hover{background:rgba(255,255,255,.22)}
.section--brand .ibtn-ghost .arw{background:rgba(255,255,255,.2);color:#fff}

/* ============================================================
   25. スクロールに合わせて浮かび上がる

   JavaScript（assets/reveal.js）が .is-in を付けます。
   JSが動かない環境では、最初から表示された状態になります。
============================================================ */
/* 出現アニメーション

   詳細度の競合で要素が消えたままになる事故を避けるため、
   「隠す」も「見せる」も同じ強さのセレクタで書いています。
   子要素の遅延は JavaScript 側で付けます（nth-child は使わない）。 */
.js-on .reveal,
.js-on .reveal-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.js-on .reveal.is-in,
.js-on .reveal-stagger > .is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .js-on .reveal,
  .js-on .reveal-stagger > *{opacity:1;transform:none;transition:none}
}
.hero2-inner{position:relative;z-index:2;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  margin:0 auto;padding:10px 22px;
  border:1px solid #cbd5e1;border-radius:999px;
  background:#fff;color:#334155;
  box-shadow:0 3px 10px rgba(30,41,59,.08);
  font-size:clamp(13px,1.3vw,17px);font-weight:700;
  letter-spacing:.01em;line-height:1.35;
}
.hero-badge span{color:var(--blue)}
.hero-badge b{font-weight:700;color:var(--ink)}

/* ヘッダーの資料ボタンは装飾を抑え、普通のナビゲーションボタンとして見せる。 */
header .actions .ibtn-ghost{
  background-image:none;
  background:#fff;
  border:1px solid #cbd5e1;
  box-shadow:0 3px 10px rgba(30,41,59,.08);
}
header .actions .ibtn-ghost:hover{
  box-shadow:0 5px 14px rgba(30,41,59,.12);
}
.hero2 .ibtn-ghost{
  background-image:none;
  background:#fff;
  border:1px solid #cbd5e1;
  box-shadow:0 3px 10px rgba(30,41,59,.08);
}
.hero2 .ibtn-ghost:hover{
  box-shadow:0 5px 14px rgba(30,41,59,.12);
}
.hero2 h1{
  margin-top:22px;
  font-size:clamp(30px,5vw,68px);line-height:1.22;font-weight:800;
  letter-spacing:-.028em;text-wrap:balance;
}
.hero2 h1 em{
  position:relative;font-style:normal;
  background:linear-gradient(96deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero2-lead{
  margin:20px auto 0;max-width:640px;
  font-size:clamp(13.5px,1.15vw,17px);line-height:2;color:var(--sub);font-weight:500;
}
.hero2-lead b{color:var(--ink);font-weight:800}

.cta--stack{flex-direction:column;align-items:center;gap:12px;margin-top:32px}
.cta--stack .ibtn{width:min(340px,84vw)}

/* ---- 下部のマスコット ---- */
.hero2-mascot{
  display:block;margin:clamp(18px,2.4vw,34px) auto 0;
  width:clamp(180px,23vw,310px);height:auto;
  filter:drop-shadow(0 26px 34px rgba(30,44,120,.2));
}

/* ---- 左右に浮かぶ要素 ---- */
.hero2-float{position:absolute;z-index:1;pointer-events:none}
.hero2-float--l{left:clamp(8px,3vw,60px);top:30%}
.hero2-float--r{right:clamp(8px,3vw,60px);top:26%}

.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:216px}
.chip{
  width:60px;height:60px;border-radius:50%;
  background:#fff;display:grid;place-items:center;color:var(--blue);
  box-shadow:0 12px 26px -14px rgba(30,50,120,.5), 0 2px 6px rgba(30,50,120,.06);
}
.chip svg{width:24px;height:24px}
.chips > :nth-child(2){transform:translateY(-16px)}
.chips > :nth-child(4){transform:translateY(10px)}
.chips > :nth-child(6){transform:translateY(-12px)}
.chips > :nth-child(8){transform:translateY(14px)}

.steps-float{display:grid;gap:12px;width:min(272px,26vw)}
.stepcard{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:13px 16px;border-radius:15px;background:#fff;
  font-size:12.5px;font-weight:600;line-height:1.6;
  box-shadow:0 14px 30px -18px rgba(30,50,120,.5), 0 2px 6px rgba(30,50,120,.05);
}
.stepcard i{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(130deg,rgba(22,104,240,.13),rgba(123,60,245,.15));
  color:var(--blue);
}
.stepcard i svg{width:14px;height:14px}
.stepcard:nth-child(2){margin-left:22px}
.stepcard:nth-child(3){margin-left:8px}

/* ---- ゆっくり上下に漂わせる ---- */
@media (prefers-reduced-motion: no-preference){
  .chip,.stepcard{animation:floaty 6s ease-in-out infinite}
  .chips > :nth-child(2n){animation-delay:-1.6s}
  .chips > :nth-child(3n){animation-delay:-3.1s}
  .stepcard:nth-child(2){animation-delay:-2.2s}
  .stepcard:nth-child(3){animation-delay:-4.1s}
}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
/* 位置をずらしている要素は、ずれを保ったまま漂わせる */
@media (prefers-reduced-motion: no-preference){
  .chips > :nth-child(2){animation-name:floaty2}
  .chips > :nth-child(4){animation-name:floaty4}
  .chips > :nth-child(6){animation-name:floaty6}
}
@keyframes floaty2{0%,100%{transform:translateY(-16px)}50%{transform:translateY(-25px)}}
@keyframes floaty4{0%,100%{transform:translateY(10px)}50%{transform:translateY(1px)}}
@keyframes floaty6{0%,100%{transform:translateY(-12px)}50%{transform:translateY(-21px)}}

@media (max-width:1180px){
  .hero2-float{display:none}   /* 中央の情報を優先する */
}

/* ブルー面に置いたときの、残りのカード類 */
.section--brand .agent{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
  color:#fff;backdrop-filter:blur(8px);
}
.section--brand .agent p.desc{color:rgba(255,255,255,.8)}
.section--brand .agent-role{background:rgba(255,255,255,.16);color:#fff}
.section--brand .combine{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;
}
.section--brand .combine p{color:rgba(255,255,255,.82)}
.section--brand .combine code{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#fff;
}
.section--brand .sec-lead b{color:#fff}
/* ブルー面では、最終CTAのぼかし円は不要 */
.final.section--brand::before,.final.section--brand::after{display:none}

/* ---- FV微調整 ---- */
/* 白い面に白いカードだと沈むので、輪郭をはっきりさせる */
.stepcard{border:1px solid rgba(120,140,220,.16)}
.chip{border:1px solid rgba(120,140,220,.14)}

/* マスコットは縦長の切り抜きなので、幅ではなく高さで大きさを決める */
.hero2-mascot{
  width:auto;height:clamp(210px,25vw,330px);
  max-width:min(88vw,420px);object-fit:contain;
}

/* FVが縦に伸びすぎないよう、上の余白を詰める */
.hero2{padding-top:clamp(104px,10vw,140px)}
.hero2-lead{max-width:min(720px,92%)}

/* フローティングは画面の端を基準にする（本文と重ならないように） */
.hero2-float--l{left:clamp(10px,4vw,86px);top:34%}
.hero2-float--r{right:clamp(10px,4vw,86px);top:29%}
/* 白い面で沈まないよう、影と枠をもう一段はっきりさせる */
.stepcard{
  background:#fff;border:1px solid rgba(120,140,220,.22);
  box-shadow:0 18px 34px -20px rgba(30,50,120,.55), 0 3px 10px rgba(30,50,120,.07);
}
.chip{box-shadow:0 14px 28px -16px rgba(30,50,120,.55), 0 3px 8px rgba(30,50,120,.07)}

/* ============================================================
   27. カードのグラフィック化

   線のアイコンをやめ、1枚ずつ作った立体グラフィックに差し替えます。
   絵を主役にして、文字は下に置く構成です。

   画像は images/cards/ に1カテゴリ1枚。差し替えるときは同じ名前で上書きしてください。
============================================================ */
.cat{
  padding:0;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
}
/* 絵を置く面。カード上部を占有する */
.cat-art{
  position:relative;
  aspect-ratio:16/11;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#f4f7ff 0%,#eef1fd 55%,#f6f0ff 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.cat-art::after{
  /* 斜めの光。単調な面にしないための一手 */
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.65) 0 38%,transparent 62%);
  pointer-events:none;
}
.cat-art img{
  width:clamp(78px,42%,116px);height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 12px 18px rgba(40,60,140,.18));
  transition:transform .45s var(--ease);
}
.cat:hover .cat-art img{transform:translateY(-5px) scale(1.05)}

.cat-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-body h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.5}
.cat-body p{font-size:12.5px;color:var(--sub);line-height:1.8}

/* 対応チャネルの小さなバッジ（絵の左下に重ねる） */
.cat-tags{
  position:absolute;left:14px;bottom:12px;z-index:2;
  display:flex;gap:5px;
}
.cat-tags span{
  padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;
  background:rgba(255,255,255,.9);color:var(--blue-dp);
  border:1px solid rgba(120,140,220,.2);
  backdrop-filter:blur(6px);
}

/* グリッドを少し大きめのカードに */
.cats{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}

/* ---- 部門別・実績・環境のカードにもグラフィックを置く ---- */
.dept,.why-card,.env-card{position:relative}
.dept-art,.why-art,.env-art{
  width:64px;height:64px;flex:none;
  filter:drop-shadow(0 10px 16px rgba(40,60,140,.18));
  transition:transform .45s var(--ease);
}
.dept:hover .dept-art,
.why-card:hover .why-art,
.env-card:hover .env-art{transform:translateY(-4px) scale(1.06)}

.dept h3{gap:14px;align-items:center}
.dept h3 i{display:none}          /* 丸ポチをやめてグラフィックに置き換える */
.why-card .ic{display:none}       /* 線アイコンをやめる */
.why-art{width:76px;height:76px;margin-bottom:16px;display:block}
.env-card h3 .ic{display:none}
.env-art{width:56px;height:56px}
.env-card h3{gap:14px}


/* ============================================================
   28. 参考サイトの実測値に合わせた全面調整

   参考サイトのCSSを解析して得た数値をそのまま採用しています。
   ここから下は、上で定義した値を意図的に上書きします。
============================================================ */
:root{
  /* カラーパネル（面ごとに色を変えるための5色） */
  --panel-blue:#0176f0;
  --panel-yellow:#f5c749;
  --panel-green:#00c291;
  --panel-pink:#ff92d5;
  --panel-purple:#7d3bff;

  /* 文字色 */
  --ink:#24292f;         /* 主要テキスト */
  --sub:#57606a;         /* 副次テキスト */
  --sub2:#424a53;        /* 三次テキスト */
  --line:#eaeef2;        /* 罫線 */
  --surface:#f6f8fa;     /* 淡いサーフェス */

  /* 角丸：3段階に固定する */
  --r-panel:60px;        /* 大型カラーパネル */
  --r-card:40px;         /* 中カード */
  --r-item:24px;         /* 通常カード */

  /* 影：2種類だけを使い回す。色相は混ぜない */
  --sh-rest:0 8px 16px rgba(24,24,27,.1), 0 0 1px rgba(24,24,27,.3);
  --sh-hover:0 0 2px rgba(24,24,27,.12), 0 12px 24px rgba(24,24,27,.1);

  --sec-y:clamp(64px,7vw,120px);
}

/* ---- タイポグラフィ ----
   見出しは 1.3 / -0.04em、本文は 1.6 / -0.01em の2セットに固定する */
h1,h2,h3,.h-like{letter-spacing:-.04em;line-height:1.3}
h2{font-size:clamp(28px,4vw,56px);font-weight:700}
h3{letter-spacing:-.025em}
p,li,.sec-lead,.lead{line-height:1.6;letter-spacing:-.01em}
.sec-lead,.lead{font-size:clamp(14px,1.2vw,18px);font-weight:500}
.hero2 h1{font-size:clamp(34px,5.6vw,80px);letter-spacing:-.04em;line-height:1.3}

/* 英数字だけ Poppins に切り替え、和文より少し大きく、字間をプラスに振る */
.en{font-family:var(--number-font);letter-spacing:-.02em;font-weight:800}

/* 見出しの横に置くグラフィック。文字サイズの1.25〜1.3倍にする */
.head-ic{
  display:inline-block;vertical-align:-.22em;
  width:clamp(44px,5.2vw,72px);height:auto;margin-left:.2em;
}

/* ---- 影とホバー：全サイトで2種類だけ ---- */
.cat,.dept,.wall,.why-card,.env-card,.post,.plan,.step,.catblock,.ready-card{
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat:hover,.dept:hover,.wall:hover,.why-card:hover,.env-card:hover,
.post:hover,.step:hover,.catblock:hover,.ready-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-hover);
}
.ibtn:hover{transform:translateY(-2px)}

/* 角丸を3段階に揃える */
.cat,.dept,.wall,.why-card,.env-card,.post,.catblock,.ready-card,.step{border-radius:var(--r-item)}
.plan,.tablewrap,.form,.combine{border-radius:var(--r-card)}

/* ============================================================
   29. カラーパネルの積層（JavaScript不要）

   参考サイトの中核はこれです。色の違うパネルを position:sticky で
   重ね、top を 0/15/30 とずらして、前のパネルの端が見えるようにする。
   スクロールすると、カードを積み重ねるように次の面が上がってきます。
============================================================ */
.stack{
  position:relative;
  isolation:isolate;
  /* パネル間のサブピクセルに白地が透けないようにする */
  background:#24292f;
}
.stack > .panel{
  position:sticky;
  border-radius:var(--r-panel) var(--r-panel) 0 0;
  padding:clamp(48px,5.6vw,80px) 0 clamp(64px,7vw,110px);
  overflow:hidden;
  color:#fff;
}
.stack > .panel:nth-child(1){top:0}
.stack > .panel:nth-child(3){top:30px;margin-top:-60px}
.stack > .panel:nth-child(4){top:45px;margin-top:-60px}
.stack > .panel:nth-child(5){top:0;margin-top:-60px}

/* 1枚目の黒カードは独立カード、青は以降のパネルと同じ積層サイズ。 */
.stack > .b3-employee{
  position:relative;
  width:100%;max-width:1440px;
  margin:0 auto;
  border-radius:40px;
  padding:clamp(48px,5.6vw,80px) 0 clamp(64px,7vw,120px);
}
.stack > .deco-card-panel{
  position:sticky;
  width:100%;max-width:none;
  margin:0;
  border-radius:var(--r-panel) var(--r-panel) 0 0;
  padding:clamp(48px,5.6vw,80px) 0 clamp(64px,7vw,110px);
}

/*
  青カード追加後も、色カード4枚のスクロール量をほぼ同じに保つ。
  height で固定せず min-height にし、拡大表示では内容に合わせて伸びるようにする。
*/
@media (min-width:1001px){
  .stack > .deco-card-panel:nth-child(2),
  .stack > .panel:nth-child(n + 3){
    box-sizing:border-box;
    min-height:clamp(880px,calc(100svh - var(--header-h)),920px);
  }
  .stack > .b3-ready{padding-top:60px;padding-bottom:70px}
  .b3-ready__top .b3-head{margin-bottom:0}
  .b3-ready__art img{max-width:240px}
  .b3-ready .b3-figs{margin-top:24px}
  .b3-ready .b3-fig{padding:22px}
  .b3-ready .b3-fig__num .en{font-size:clamp(64px,8vw,112px)}
  .b3-ready .b3-fig ul{gap:6px}
  .b3-ready .b3-ready__foot{margin-top:20px;padding-block:16px}
}

.panel--blue{background:var(--panel-blue)}
.panel--ink{background:#24292f}
.panel--yellow{background:var(--panel-yellow);color:var(--ink)}
.panel--green{background:var(--panel-green)}
.panel--pink{background:var(--panel-pink);color:var(--ink)}

/* パネルの中の要素は白ヌキ／濃色に切り替える */
.panel .label{background:none;-webkit-text-fill-color:currentColor;color:currentColor;opacity:.7}
.panel h2,.panel h3{color:currentColor}
.panel h2 em{
  background:none;-webkit-text-fill-color:currentColor;color:currentColor;
  text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.16em;
  text-decoration-color:rgba(255,255,255,.45);
}
.panel--yellow h2 em,.panel--pink h2 em{text-decoration-color:rgba(0,0,0,.25)}
/* お問い合わせの緑パネルでは、白い下線では埋もれるため暖色で強調する */
.panel--green.pg-panel h2 em{
  text-decoration-color:#ffd16f;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.panel .sec-lead{color:currentColor;opacity:.86}
.panel .wall,.panel .ready-card,.panel .dept{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);
  color:currentColor;backdrop-filter:blur(8px);box-shadow:none;
}
.panel--yellow .wall,.panel--yellow .ready-card,
.panel--pink .wall,.panel--pink .ready-card{background:rgba(255,255,255,.55)}
.panel .wall p,.panel .ready-card li,.panel .bullets li{color:currentColor;opacity:.88}
.panel .split-img img{border-radius:var(--r-card)}
.panel .ck{background:rgba(255,255,255,.3)}
.panel--yellow .ck,.panel--pink .ck{background:rgba(0,0,0,.14)}

/* パネルの中に置く装飾。大きくはみ出させて overflow で切る */
.panel__deco{
  position:absolute;pointer-events:none;z-index:1;
  opacity:.16;
}
.panel .wrap{position:relative;z-index:10}

/* ============================================================
   30. 無限に流れる帯（マーキー）

   リストを2周分並べて -50% 動かすだけ。JavaScript不要。
   件数を変えたら、--speed も合わせて変えてください。
============================================================ */
.marquee{width:100%;overflow:hidden;padding-block:14px}
.marquee__track{
  display:flex;flex-flow:row;flex-shrink:0;width:max-content;gap:20px;
  animation:marquee var(--speed,40s) linear infinite;
}
@keyframes marquee{from{transform:translate(0)}to{transform:translate(-50%)}}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__item{
  flex-shrink:0;display:flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-rest);
  font-size:14px;font-weight:700;white-space:nowrap;
}
.marquee__item img{width:26px;height:26px}
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none}
}

/* ============================================================
   31. 登場演出（ロード時に1回だけ）

   参考サイトはスクロール連動の監視を一切していません。
   ヒーローだけロード時に1回動かし、あとは無限ループの動きに任せる方針に合わせます。
============================================================ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatBounce{0%,100%{transform:translateY(0) scale(.96)}50%{transform:translateY(-12px) scale(1)}}

.rise{opacity:0;animation:fadeInUp .9s cubic-bezier(.68,0,.265,1.2) forwards}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.15s}
.rise-3{animation-delay:.25s}
.rise-4{animation-delay:.35s}
.float-slow{animation:floatBounce 3.2s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;animation:none}
  .float-slow{animation:none}
}


/* ============================================================
   32. 2つのエージェントの図解（ラベル付き）
============================================================ */
/* ============================================================
   26. 2つのエージェント（図＋ラベル）

   図そのものには文字が入っていません。
   意味を伝えるラベルは、すべてこの CSS で図の周囲に置いています。
   ラベルの位置を動かしたいときは .ta-pin--xx の top / left を触ってください。
============================================================ */

/* ---- 2カラム。左が OpenClaw、右が Hermes ---- */
.two-agents{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(30px,3.4vw,48px);
}

.ta-card{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,34px);
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
/* カード上端の色帯で2体を色分けする */
.ta-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
}
.ta-card--claw::before  {background:linear-gradient(90deg,#4b9dff,#a9d0ff)}
.ta-card--hermes::before{background:linear-gradient(90deg,#b47bff,#e3ccff)}

.ta-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ta-name{font-size:clamp(20px,2vw,27px);font-weight:800;letter-spacing:-.02em;color:#fff}
.ta-role{
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;white-space:nowrap;
}

/* ---- 図の枠。正方形にして、中の画像を少し内側へ寄せる。
       空いた外周がラベルの置き場所になる ---- */
.ta-fig{
  position:relative;aspect-ratio:1/1;
  /* 上端のラベルが見出しに近づきすぎないよう、上の余白を厚めに取る */
  margin:clamp(22px,2.6vw,34px) 0 clamp(10px,1.2vw,16px);
}
/* 図を浮かせるための、後ろのやわらかい光 */
.ta-fig::before{
  content:'';position:absolute;left:12%;top:12%;width:76%;height:76%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%);
  filter:blur(14px);
}
.ta-fig img{
  position:absolute;left:11%;top:11%;width:78%;height:78%;
  object-fit:contain;
}

.ta-pins{position:absolute;inset:0}

/* ---- ラベルの共通形 ---- */
.ta-pin{
  position:absolute;z-index:2;
  display:inline-block;max-width:44%;
  font-size:clamp(10.5px,.92vw,13px);font-weight:700;line-height:1.45;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  color:#fff;border:1px solid rgba(255,255,255,.3);
  background:rgba(11,19,48,.42);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -10px rgba(5,10,40,.8);
}
.ta-pin small{
  display:block;font-size:.8em;font-weight:600;
  color:rgba(255,255,255,.72);white-space:normal;margin-top:3px;
}

/* 入口（チャットツール）は明るく、操作は沈ませる */
.ta-pin--ch {background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.46)}
.ta-pin--act{background:rgba(11,19,48,.46);border-color:rgba(255,255,255,.22)}
.ta-pin--mem{background:rgba(11,19,48,.46);border-color:rgba(255,255,255,.22)}

/* ---- OpenClaw：外周8方位に配置する ---- */
.ta-pin--n {top:0;   left:50%;transform:translateX(-50%)}
.ta-pin--s {bottom:0;left:50%;transform:translateX(-50%)}
.ta-pin--e {top:47%; right:0}
.ta-pin--w {top:47%; left:0}
.ta-pin--nw{top:12%; left:0}
.ta-pin--ne{top:12%; right:0}
.ta-pin--sw{bottom:12%;left:0}
.ta-pin--se{bottom:12%;right:0}

/* 中央のハブが何なのかを図の上に直接置く */
.ta-core{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(10px,.86vw,12px);font-weight:800;letter-spacing:.08em;
  color:var(--blue-dp);background:rgba(255,255,255,.94);
  padding:5px 13px;border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(5,10,40,.7);
}

/* ---- Hermes：上に「生まれるもの」、左に層の名前、右に層の中身 ---- */
.ta-pin--skill{
  top:0;left:50%;transform:translateX(-50%);
  max-width:76%;white-space:normal;text-align:center;
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.46);
  border-radius:16px;
}
.ta-pin--memo{
  left:0;top:52%;max-width:46%;white-space:normal;border-radius:16px;
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.46);
}
/* 右側の3つは、図の各層の高さに合わせている */
.ta-pin--l1{right:0;top:41%}
.ta-pin--l2{right:0;top:53%}
.ta-pin--l3{right:0;top:65%}

/* ---- 凡例（どの色が何を指すか） ---- */
.ta-legend{
  display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;
  margin:0 0 16px;padding:0;
}
.ta-legend li{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:rgba(255,255,255,.8);font-weight:600;
}
.ta-legend .sw{width:11px;height:11px;border-radius:4px;flex:none;
  border:1px solid rgba(255,255,255,.4)}
.sw--ch,.sw--skill{background:rgba(255,255,255,.72)}
.sw--act,.sw--mem {background:rgba(11,19,48,.6)}

/* ---- 図の下の1文要約 ---- */
.ta-sum{
  font-size:clamp(14px,1.25vw,16.5px);line-height:1.85;font-weight:600;
  color:rgba(255,255,255,.92);
  padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
}
.ta-sum b{font-weight:800;color:#fff}

/* ---- 事実の箇条書き ---- */
.ta-facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.ta-facts li{
  font-size:13px;line-height:1.75;color:rgba(255,255,255,.76);
  padding-left:15px;position:relative;
}
.ta-facts li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);
}

/* ---- 注意書き（OpenClaw の安全性、Hermes の位置づけ） ---- */
.ta-caution{
  margin-top:auto;padding:14px 16px;border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.82);
  background:rgba(11,19,48,.3);
  border-left:3px solid rgba(255,255,255,.5);
}
.ta-caution b{font-weight:800;color:#fff}
.ta-caution--note{border-left-color:rgba(227,204,255,.75)}

/* ---- 下部：2体をつなぐ .agent/ ---- */
.ta-bridge{
  margin-top:clamp(24px,3vw,40px);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);text-align:center;
  backdrop-filter:blur(8px);
}
.ta-bridge > b{
  font-size:clamp(17px,1.8vw,24px);font-weight:800;letter-spacing:-.01em;color:#fff;
}
.ta-bridge p{margin-top:16px;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.95}
.ta-bridge code{
  font-family:ui-monospace,Menlo,monospace;font-size:.92em;
  background:rgba(255,255,255,.18);color:#fff;
  padding:3px 9px;border-radius:7px;
}
.ta-flow{margin-top:22px;display:grid;gap:10px;justify-items:center}
.ta-flow-row{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.86);
  background:rgba(11,19,48,.26);border:1px solid rgba(255,255,255,.16);
  padding:10px 18px;border-radius:999px;
}
.ta-flow-row em{font-style:normal;font-weight:800;color:#fff}
/* 右向きの小さな矢印 */
.ta-flow-row .ar{
  width:14px;height:8px;flex:none;position:relative;opacity:.7;
}
.ta-flow-row .ar::before{
  content:'';position:absolute;left:0;top:3px;width:14px;height:1.5px;background:#fff;
}
.ta-flow-row .ar::after{
  content:'';position:absolute;right:0;top:1px;width:6px;height:6px;
  border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:rotate(45deg);
}

/* ---- レスポンシブ ---- */
@media (max-width:1000px){
  .two-agents{grid-template-columns:1fr}
  /* 1カラムだと図が大きくなりすぎるので上限をつける */
  .ta-fig{max-width:520px;margin-inline:auto}
}
/* 狭い画面では、放射状の配置をやめてラベルを図の下へ流す。
   重なって読めなくなるのを防ぐための切り替え */
@media (max-width:620px){
  /* 図・ハブ名・ラベル群を縦に積む。order で並び順を作っている
     （HTML の順序は変えずに「図 → Gateway → ラベル」に見せる） */
  .ta-fig{
    aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;
  }
  .ta-fig::before{display:none}
  .ta-fig img{position:static;width:100%;height:auto;order:1}
  .ta-core{
    position:static;transform:none;order:2;
    align-self:center;margin:12px 0 0;
  }
  .ta-pins{
    position:static;order:3;
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px;margin-top:16px;
  }
  .ta-pin{
    position:static;transform:none;max-width:100%;white-space:normal;
    text-align:left;
  }
  .ta-pin--skill,.ta-pin--memo{max-width:100%;text-align:center}
}


/* ============================================================
   33. ブロック2：課題提起（3つの壁）
============================================================ */
/* ============================================================
   セクション3「3つの壁」専用スタイル
   接頭辞は .b2- で統一しています（既存クラスと衝突しません）。
   既存の .section / .wrap / .sec-head / .label / h2 はそのまま流用します。

   参考サイトの実測仕様に合わせた点：
   ・影は2種類だけ（--b2-sh-rest / --b2-sh-hover）。色相は混ぜない
   ・ホバーはカード translateY(-4px) ＋ 影を深くするだけ。色は変えない
   ・見出し 行間1.3 / 字間-0.04em、本文 行間1.6 / 字間-0.01em
   ・角丸は 通常カード24px / 画像プレート40px / チップ999px
   ・スクロール監視は使わない。動きは「読み込み時1回」と「無限ループ」だけ
============================================================ */

.b2{
  /* 影（この2つ以外を使わない。#18181B のアルファのみで、色を付けない） */
  --b2-sh-rest:  0 8px 16px rgba(24,24,27,.1), 0 0 1px rgba(24,24,27,.3);
  --b2-sh-hover: 0 0 2px rgba(24,24,27,.12), 0 12px 24px rgba(24,24,27,.1);

  /* 本文の副次テキスト色（実測値） */
  --b2-sub:#57606A;
  --b2-line:#EAEEF2;

  /* 読み込み時アニメーションの既定値。各要素は style 属性で上書きする */
  --b2-delay:0s;
  --b2-dur:1s;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
}

/* Yoomのヒーローのような、画面を大きく横切る紫の波形。
   見出しは白地に残し、カードの背面から色が立ち上がる位置に限定する。 */
.b2::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:20% -7% 18%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.8'%3E%3Cstop stop-color='%235827f1'/%3E%3Cstop offset='.55' stop-color='%23753cff'/%3E%3Cstop offset='1' stop-color='%23502ae8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-190 605C85 318 380 252 660 382c275 128 455 243 730 82 166-97 254-225 387-340' fill='none' stroke='url(%23g)' stroke-width='260' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-120 835C120 650 305 610 490 656' fill='none' stroke='%239b72ff' stroke-width='92' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.b2 > .wrap{position:relative;z-index:2}
.b2 > .deco2{display:none}

/* ------------------------------------------------------------
   見出し（グラフィックを横に置く）
------------------------------------------------------------ */
.b2-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,1.6vw,24px);
  /* 見出しのタイポグラフィは実測値に合わせる */
  line-height:1.3;
  letter-spacing:-.04em;
}
.b2-title__text{ display:block }
.b2-title em{
  color:var(--ink);background:none;
  -webkit-text-fill-color:currentColor;
}

/* 見出しグラフィック。h2 の font-size は clamp(25px,3.2vw,44px) なので、
   その約1.3倍にあたる clamp(33px,4.2vw,58px) を「高さ」で与えている。
   （レンガの壁は横長のため、幅で指定すると文字より小さく見えてしまう）
   ここを小さくするとセクション全体のポップさが一気に落ちるので注意。 */
.b2-title__gfx{
  height:clamp(33px,4.2vw,58px);
  width:auto;
  flex:none;
  /* 画像そのものの影は焼き込まずに、CSS側で落とす */
  filter:drop-shadow(0 6px 10px rgba(24,24,27,.14));
}

/* ------------------------------------------------------------
   カード3枚
------------------------------------------------------------ */
.b2-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  /* カード上部の画像プレートがカードの外へせり出す分を、ここで確保する */
  margin-top:44px;
}

.b2-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0 24px 24px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--b2-line);
  box-shadow:var(--b2-sh-rest);
  transition:all .2s ease;
  /* 各カードの主役色。カード種別ごとに下で差し替える */
  --b2-c:#E8582D;
  --b2-c-tint:rgba(232,88,45,.12);
}
.b2-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--b2-sh-hover);
}

/* カード種別ごとの主役色（画像の主役色と揃えている） */
.b2-card--resource{ --b2-c:#E8582D; --b2-c-tint:rgba(232,88,45,.12) }  /* コーラルレッド */
.b2-card--person  { --b2-c:#D99A05; --b2-c-tint:rgba(245,199,73,.20) }  /* アンバー（文字は視認性のため濃いめ） */
.b2-card--cost    { --b2-c:#7B3CF5; --b2-c-tint:rgba(123,60,245,.12) }  /* バイオレット */

/* 画像プレート。カードの上端から28pxはみ出させて重なりを作る（奥行きの演出） */
.b2-card__art{
  margin:-28px 0 0;
  height:172px;
  border-radius:40px;
  background:
    radial-gradient(72% 62% at 50% 42%, var(--b2-c-tint), rgba(255,255,255,0) 72%),
    #F6F8FA;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.b2-card__art img{
  width:clamp(116px,12.5vw,152px);
  height:auto;
  transition:transform .2s ease;
}
/* ホバーで画像だけわずかに持ち上げる。色相は一切変えない */
.b2-card:hover .b2-card__art img{ transform:translateY(-4px) }

/* 「どこで痛むか」のチップ。旧デザインの 01/02/03 を置き換えたもの。
   現場 → 引き継ぎ → 経営 と視点が上がる並びになっている。 */
.b2-chip{
  align-self:flex-start;
  margin-top:20px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--b2-c-tint);
  color:var(--b2-c);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.6;
}

.b2-card__title{
  margin-top:12px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.04em;
}
.b2-card__text{
  margin-top:12px;
  color:var(--b2-sub);
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.01em;
}

/* 各カードの締めに置く「解き方の方向」。
   ここがあることで、課題を並べて終わりにならず、次のセクションへ意識が向く。 */
.b2-card__turn{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--b2-line);
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--b2-c);
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
}
.b2-card__turn-arw{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:none;
  border-radius:999px;
  background:var(--b2-c-tint);
  transition:transform .2s ease;
}
.b2-card__turn-arw svg{ width:13px;height:13px }
.b2-card:hover .b2-card__turn-arw{ transform:translateX(3px) }

/* ------------------------------------------------------------
   次のセクションへのブリッジ
------------------------------------------------------------ */
.b2-bridge{
  /* 紫の波形から離し、白地に着地させる */
  margin-top:clamp(112px,10vw,156px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  position:relative;
  z-index:3;
  text-decoration:none;
}
.b2-bridge__lead{
  font-size:clamp(15px,1.4vw,18px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--ink);
}
.b2-bridge__lead em{
  font-style:normal;
  color:var(--ink);
}
.b2-bridge__arw{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:999px;
  background:#F6F8FA;
  color:var(--blue);
  box-shadow:var(--b2-sh-rest);
  /* 無限ループの浮遊。スクロール監視ではないので、消えたまま戻らない事故が起きない */
  animation:b2Float 2.4s ease-in-out infinite;
}
.b2-bridge__arw svg{ width:20px;height:20px }

/* ------------------------------------------------------------
   動き（読み込み時に1回だけ ＋ 無限ループ）
   IntersectionObserver は使っていない
------------------------------------------------------------ */
@keyframes b2RiseIn{
  from{ opacity:0; transform:translateY(60px) }
  to  { opacity:1; transform:translateY(0) }
}
@keyframes b2Float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-8px) }
}

/* delay と duration をあえてバラすと、機械的に見えずポップになる。
   終端がわずかに行き過ぎるイージングを使う。 */
.b2-rise{
  opacity:0;
  animation:b2RiseIn var(--b2-dur) cubic-bezier(.68,0,.265,1.2) var(--b2-delay) forwards;
}

/* ------------------------------------------------------------
   レスポンシブ（既存サイトのブレークポイントに合わせる）
------------------------------------------------------------ */
@media (max-width:1000px){
  .b2-grid{ grid-template-columns:1fr; gap:36px; margin-top:52px }
  .b2-card__art{ height:150px }
  .b2-title{ flex-direction:column; gap:12px }
  .b2-title__gfx{ height:clamp(40px,5.6vw,56px) }
}
@media (max-width:560px){
  /* 狭い画面では見出しの改行位置を固定しない。
     <br> を残すと1行が画面幅を超え、ページ全体に横スクロールが出る。 */
  .b2-title__text br{ display:none }
  .b2-card{ padding:0 20px 20px }
  .b2-card__art{ height:132px }
  .b2-card__art img{ width:112px }
  .b2::before{
    inset:18% -75% 22%;
    background-size:auto 100%;
  }
}

/* ------------------------------------------------------------
   動きを減らす設定の端末では、すべて止めて最初から見えている状態にする
------------------------------------------------------------ */
/* 印刷時はアニメーションが走らない環境があるため、必ず見えている状態にする
   （opacity:0 のまま印刷される事故を防ぐ） */
@media print{
  .b2-rise{ opacity:1; animation:none }
  .b2-bridge__arw{ animation:none }
}

@media (prefers-reduced-motion: reduce){
  .b2-rise{ opacity:1; animation:none; transform:none }
  .b2-bridge__arw{ animation:none }
  .b2-card,
  .b2-card__art img,
  .b2-card__turn-arw{ transition:none }
  .b2-card:hover{ transform:none }
  .b2-card:hover .b2-card__art img{ transform:none }
  .b2-card:hover .b2-card__turn-arw{ transform:none }
}

/* ============================================================
   34. スマートフォンでの横スクロール対策

   見出しの <br> は、PCで改行位置を整えるために入れています。
   ただし画面が狭いと、改行後の行が画面幅を超えて横スクロールが出ます。
   狭い画面では <br> を無効化し、自動改行に任せます。
   （<br> をHTMLから消す必要はありません）
============================================================ */
@media (max-width:560px){
  h1 br, h2 br, .sec-lead br, .lead br, .hero2-lead br{display:none}
  h1, h2{word-break:auto-phrase; overflow-wrap:anywhere}
}

/* 日本語見出しは文節の境界でだけ折り返す。
   短いひとまとまりに限定し、狭い画面でも横にはみ出さない。 */
h2.jp-balanced{text-wrap:balance}
h2 .jp-phrase{display:inline-block;max-width:100%;white-space:nowrap}
/* 念のため、ページ全体で横方向のはみ出しを止める */
html,body{overflow-x:hidden}

/* Hermes「SKILL DOCS」は、スマホ時だけ指定された2行で見せる。 */
@media (max-width:560px){
  .hm-skilldocs-title{font-size:clamp(21px,7vw,39px)}
  .hm-skilldocs-title br{display:block}
  .hm-skilldocs-title .hm-skilldocs-line{
    display:inline-block;max-width:100%;white-space:nowrap;
  }
  .hm-skilldocs-title .ochm-hd-ic{width:clamp(30px,1.35em,44px)}
}


/* ============================================================
   35. ブロック4：できること・部門別
============================================================ */
/* ============================================================
   ブロック4：できること13カテゴリ ＋ 部門別の活用例

   ここは「一覧を並べる」のではなく「流して見せる」構成です。
   13件を静止したグリッドに並べると単調になるため、
   横に流れる帯にして、止まっている情報を動きに変えています。

   JavaScript は使いません。2周分ならべて -50% ずらすだけです。
============================================================ */

/* ---- 見出しの横に置くグラフィック ----
   仕様：文字サイズの 1.25〜1.3倍。ここがポップさを作ります */
.b4-head-ic{
  display:inline-block;vertical-align:-.28em;
  width:auto;height:1.28em;         /* 見出しの文字高に対する比率で決める */
  margin-left:.24em;
}
@media (max-width:560px){
  .b4-usecase .sec-head h2 .jp-phrase:first-child{display:block}
}

/* ============================================================
   巨大数字カード
============================================================ */
.b4-count{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(28px,3.4vw,48px);
  padding:clamp(28px,3.6vw,56px) clamp(24px,3.6vw,64px);
  border-radius:var(--r-card);
  background:linear-gradient(140deg,#fff 0%,#fbfcff 52%,#f7f2ff 100%);
  border:1px solid var(--line);
  box-shadow:var(--sh-rest);
}
/* 装飾。大きくはみ出させて overflow で切る */
.b4-count__deco{
  position:absolute;right:-90px;bottom:-120px;
  width:min(340px,42vw);height:auto;
  opacity:.14;pointer-events:none;z-index:1;
}
.b4-count > *{position:relative;z-index:10}
/* 上の一括指定で relative に戻らないよう、飾り画像だけ絶対配置を明示（戻るとスマホで1列目に高さを取り、カード上部が空く） */
.b4-count > .b4-count__deco{position:absolute;z-index:1}

.b4-count__figure{display:flex;align-items:baseline;gap:.14em}
.b4-count__num{
  font-size:clamp(64px,11vw,144px);   /* 仕様：巨大数字は144px */
  font-weight:700;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.b4-count__unit{
  font-size:clamp(15px,1.6vw,22px);font-weight:800;color:var(--sub);
  letter-spacing:-.02em;
}

.b4-count__body{display:grid;gap:18px}
.b4-count__lead{font-size:clamp(14px,1.2vw,18px);line-height:1.6;color:var(--sub)}
.b4-count__lead b{color:var(--ink);font-weight:800}

.b4-count__sub{
  display:flex;align-items:center;gap:14px;
  padding-top:18px;border-top:1px solid var(--line);
}
.b4-count__num2{
  font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--ink);
}
.b4-count__sub-text{font-size:13px;line-height:1.6;color:var(--sub);font-weight:600}

/* ============================================================
   横に流れる帯

   .b4-strip__track を2周分の中身で満たし、-50% まで動かします。
   件数を変えたら duration も変えてください（1件あたり 1.5秒が目安）。
============================================================ */
.b4-strips{
  margin-top:clamp(28px,3.4vw,48px);
  display:grid;gap:14px;
}
.b4-strip{overflow:hidden;width:100%}

.b4-strip__track{
  display:flex;flex-flow:row nowrap;flex-shrink:0;
  width:max-content;gap:14px;margin:0;padding:0;list-style:none;
  animation:b4-slide linear infinite;
}
@keyframes b4-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 13件×2周 = 26枚。1件1.5秒 → 39秒 */
.b4-strip__track--a{animation-duration:39s}
.b4-strip__track--b{animation-duration:46s}   /* 下段は少し遅らせて、鏡写しに見せない */
.b4-strip--rev .b4-strip__track{animation-direction:reverse}

.b4-chip{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:12px 20px 12px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b4-chip:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.b4-chip img{width:44px;height:44px;flex:none;object-fit:contain}
.b4-chip__name{font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.b4-chip__tag{
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(22,104,240,.08);color:var(--blue-dp);
}

.b4-strips__note{
  margin-top:18px;text-align:center;
  font-size:13px;color:var(--sub);font-weight:600;
}
.b4-strips__note a{
  color:var(--blue);font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--blue);
  background:linear-gradient(transparent 48%,rgba(22,104,240,.14) 48%);
  padding:0 2px;
}
.b4-strips__note a:hover{
  color:var(--blue-dp);
  background:linear-gradient(transparent 34%,rgba(22,104,240,.22) 34%);
}

/* ============================================================
   部門別の活用例

   6枚それぞれに色を割り当てます。同じ見た目の繰り返しにしないためです。
============================================================ */
.b4-depts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.b4-dept{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--r-item);background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b4-dept:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

/* 絵を置く面。カードごとに地色を変える */
.b4-dept__art{
  position:relative;overflow:hidden;
  aspect-ratio:16/7;display:grid;place-items:center;
  border-bottom:1px solid var(--line);
}
.b4-dept__icon{
  width:clamp(56px,26%,78px);height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 10px 16px rgba(40,60,140,.2));
  transition:transform .35s var(--ease);
}
.b4-dept:hover .b4-dept__icon{transform:translateY(-5px) scale(1.06)}

/* 同じ絵を薄く大きく敷いて、面に奥行きを出す */
.b4-dept__ghost{
  position:absolute;right:-40px;bottom:-56px;
  width:190px;height:auto;opacity:.13;z-index:1;pointer-events:none;
}

.b4-dept--blue   .b4-dept__art{background:linear-gradient(150deg,#eaf2ff,#f4f8ff)}
.b4-dept--yellow .b4-dept__art{background:linear-gradient(150deg,#fff6e0,#fffbf2)}
.b4-dept--pink   .b4-dept__art{background:linear-gradient(150deg,#ffeaf6,#fff5fa)}
.b4-dept--sky    .b4-dept__art{background:linear-gradient(150deg,#e6f5ff,#f3fbff)}
.b4-dept--green  .b4-dept__art{background:linear-gradient(150deg,#e4f8f1,#f2fdf9)}
.b4-dept--purple .b4-dept__art{background:linear-gradient(150deg,#f0eaff,#f8f4ff)}

.b4-dept__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.b4-dept__body h3{font-size:16.5px;font-weight:800;letter-spacing:-.025em}
.b4-dept__list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.b4-dept__list li{
  font-size:13px;line-height:1.6;color:var(--sub);
  padding-left:16px;position:relative;
}
.b4-dept__list li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;
}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:900px){
  .b4-depts{grid-template-columns:repeat(2,1fr)}
  .b4-count{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  .b4-depts{grid-template-columns:1fr}
  .b4-chip img{width:38px;height:38px}
  .b4-chip__name{font-size:13px}
  .b4-chip__tag{display:none}       /* 狭い画面では帯を短く保つ */
}

/* 動きを減らす設定の端末では、流れを止めて全部見せる */
@media (prefers-reduced-motion: reduce){
  .b4-strip__track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .b4-strip{overflow:visible}
  .b4-dept__icon{transition:none}
}


/* ============================================================
   36. ブロック3：カラーパネル積層
============================================================ */
/* ============================================================================
   block3 — カラーパネル積層4枚

   assets/style.css の「末尾」に追記してください。
   28章・29章の値を意図的に上書きする箇所があるため、必ず後ろに置くこと。

   接頭辞はすべて .b3- です。既存クラスに触れているのは
   .panel--yellow / .panel--pink の文字色まわりだけで、そこも上書きのみです。

   JavaScript は使いません。動きは
     (a) 無限ループ（回転・浮遊・入力中の点）
     (b) 読み込み時に1回だけ
   の2種類だけで、スクロール監視は一切ありません。
============================================================================ */

/* ---- パネル共通 --------------------------------------------------------- */
.b3-panel{
  position:relative;
  /* 積層で下のパネルが持ち上がってくるので、下側の余白を厚めに取る */
  padding:clamp(52px,6vw,80px) 0 clamp(76px,8vw,120px);
}

/* 黄とピンクは濃色文字。白ヌキは読みにくいため必ず #24292F にする */
.panel--yellow.b3-panel,
.panel--pink.b3-panel{color:#24292f}
.panel--yellow.b3-panel .sec-lead,
.panel--pink.b3-panel .sec-lead{color:#24292f;opacity:.78}

/* ---- 見出し ------------------------------------------------------------- */
.b3-head{margin-bottom:clamp(30px,3.4vw,48px)}
.b3-head--center{text-align:center}
.b3-head .label{opacity:.72;font-size:12px;letter-spacing:.14em}
.b3-employee h2 em{
  text-decoration-color:#ffd16f;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.b3-flow h2 em{
  text-decoration-color:#8f4938;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.b3-wall h2 em{
  text-decoration-color:#8f4938;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.b3-ready h2 em{
  text-decoration-color:#ffd16f;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}

/* 見出しの横に置くグラフィック。文字サイズの 1.25〜1.3倍 */
.b3-head-ic{
  display:inline-block;vertical-align:-.26em;
  width:clamp(46px,5.4vw,72px);height:auto;
  margin-left:.24em;
  filter:drop-shadow(0 8px 16px rgba(24,24,27,.18));
}

/* ---- はみ出す装飾（各パネルに1つ。すべてCSSで作っています） -------------
   数百px はみ出させて、パネル側の overflow:hidden で切ります。
   z-index は 装飾=1、コンテンツ=10（29章の .panel .wrap で指定済み）。 */
.b3-deco{position:absolute;z-index:1;pointer-events:none;display:block}

/* 1枚目・青：二重のリングを右上から */
.b3-deco--ring{
  top:-260px;right:-220px;width:760px;height:760px;border-radius:50%;
  border:2px solid rgba(255,255,255,.34);
  opacity:.5;
  animation:b3Float 7s ease-in-out infinite;
}
.b3-deco--ring::after{
  content:'';position:absolute;inset:118px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
}

/* 2枚目・黄：ドットの面を左下から */
.b3-deco--dots{
  bottom:-200px;left:-180px;width:720px;height:720px;
  background-image:radial-gradient(rgba(36,41,47,.5) 2.4px, transparent 2.6px);
  background-size:26px 26px;
  opacity:.22;
  transform:rotate(-8deg);
}

/* 3枚目・ピンク：角丸の枠を傾けて右下から */
.b3-deco--frame{
  right:-190px;bottom:-230px;width:600px;height:600px;
  border:3px solid rgba(36,41,47,.34);
  border-radius:80px;
  opacity:.3;
  transform:rotate(16deg);
}
.b3-deco--frame::after{
  content:'';position:absolute;inset:64px;
  border:3px solid rgba(36,41,47,.3);border-radius:56px;
}

/* 4枚目・緑：放射を左上から。ゆっくり回り続ける */
.b3-deco--rays{
  top:-320px;left:-280px;width:880px;height:880px;border-radius:50%;
  background:repeating-conic-gradient(
    rgba(255,255,255,.5) 0deg 6deg, transparent 6deg 18deg);
  opacity:.16;
  animation:b3Spin 90s linear infinite;
}

@keyframes b3Spin{to{transform:rotate(360deg)}}
@keyframes b3Float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}


/* ============================================================================
   1枚目・青 — 社員証カード ＋ 3つの性格
   （左に「社員証」、右に本文。左右で役割をはっきり分ける）
============================================================================ */
.b3-emp{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

/* ---- 社員証。少し傾け、後ろにもう1枚板を重ねて厚みを出す ---- */
.b3-idcard{position:relative;padding-top:26px}
.b3-idcard::before{
  content:'';position:absolute;left:14px;right:-14px;top:40px;bottom:-14px;
  border-radius:var(--r-card);
  background:rgba(255,255,255,.12);
  transform:rotate(4deg);
}
.b3-idcard__strap{
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:74px;height:34px;border-radius:0 0 12px 12px;
  background:rgba(255,255,255,.28);
  z-index:2;
}
.b3-idcard__strap::after{
  content:'';position:absolute;left:50%;translate:-50% 0;bottom:6px;
  width:34px;height:8px;border-radius:999px;background:rgba(11,19,48,.35);
}
.b3-idcard__body{
  position:relative;z-index:1;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-card);
  backdrop-filter:blur(10px);
  padding:clamp(22px,2.4vw,30px);
  text-align:center;
  transform:rotate(-2.5deg);
  box-shadow:0 18px 40px -22px rgba(11,19,48,.7);
}
.b3-idcard__co{
  display:block;font-size:13px;letter-spacing:.16em;opacity:.72;
}
.b3-idcard__photo{
  width:clamp(140px,15vw,186px);aspect-ratio:1/1;margin:14px auto 16px;
  border-radius:28px;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;overflow:hidden;
}
.b3-idcard__photo img{width:88%;height:88%;object-fit:contain}
.b3-idcard__name{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.b3-idcard__role{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;opacity:.7;margin-top:4px;
}
.b3-idcard__meta{
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.26);
  display:grid;gap:9px;text-align:left;
}
.b3-idcard__meta > div{display:flex;justify-content:space-between;gap:12px}
.b3-idcard__meta dt{font-size:12px;opacity:.66;font-weight:700}
.b3-idcard__meta dd{font-size:13px;font-weight:700}

/* ---- 右：3つの性格。番号は大きく、罫線で区切る ---- */
.b3-traits{list-style:none;display:grid;gap:0}
.b3-traits li{
  display:flex;gap:clamp(14px,1.6vw,24px);align-items:flex-start;
  padding:clamp(18px,2vw,26px) 0;
  border-top:1px solid rgba(255,255,255,.26);
}
.b3-traits li:first-child{border-top:0;padding-top:0}
.b3-traits__no{
  flex:none;font-size:clamp(26px,3vw,40px);line-height:1;opacity:.5;
}
.b3-traits h3{font-size:clamp(17px,1.6vw,21px);font-weight:700}
.b3-traits p{margin-top:7px;font-size:clamp(13px,1.1vw,15px);opacity:.86}

.b3-emp__note{
  margin-top:clamp(18px,2vw,26px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:clamp(13px,1.1vw,15px);
}


/* ============================================================================
   2枚目・黄 — スマホのチャット ＋ 図 ＋ 3ステップの横レール
   （1枚目が「左右」だったので、こちらは「上下」で組む）
============================================================================ */
.b3-flow__top{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,56px);
  align-items:center;
}

/* ---- スマホ。画像ではなくHTMLとCSSで作っています ---- */
.b3-phone{
  position:relative;margin-inline:auto;width:min(100%,300px);
  background:#24292f;border-radius:38px;padding:12px;
  box-shadow:0 24px 48px -24px rgba(24,24,27,.6);
}
.b3-phone__bar{height:20px;display:grid;place-items:center}
.b3-phone__bar span{display:block;width:74px;height:6px;border-radius:999px;background:rgba(255,255,255,.32)}
.b3-phone__screen{
  background:#f6f8fa;border-radius:28px;
  padding:16px 14px 20px;display:grid;gap:10px;
}
.b3-phone__day{
  justify-self:center;font-size:11px;font-weight:700;color:#57606a;
  background:#eaeef2;border-radius:999px;padding:3px 12px;
}
.b3-bubble{
  max-width:88%;font-size:12.5px;line-height:1.6;font-weight:500;
  padding:10px 13px;border-radius:16px;
}
.b3-bubble--me{
  justify-self:end;background:#0176f0;color:#fff;border-bottom-right-radius:5px;
}
.b3-bubble--ai{
  justify-self:start;background:#fff;color:#24292f;
  border:1px solid #eaeef2;border-bottom-left-radius:5px;
}
.b3-bubble--done{border-color:#00c291;box-shadow:0 0 0 2px rgba(0,194,145,.16)}
.b3-bubble__who{
  display:block;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:#57606a;margin-bottom:3px;
}
/* 入力中の点。無限ループのアニメーションだけで表現する */
.b3-typing{justify-self:start;display:flex;gap:5px;padding:4px 2px}
.b3-typing span{
  width:7px;height:7px;border-radius:50%;background:#57606a;opacity:.35;
  animation:b3Dot 1.3s ease-in-out infinite;
}
.b3-typing span:nth-child(2){animation-delay:.18s}
.b3-typing span:nth-child(3){animation-delay:.36s}
@keyframes b3Dot{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-5px);opacity:.85}}

/* ---- 右：図とツールのチップ ---- */
.b3-flow__art{position:relative;text-align:center}
.b3-flow__art img{
  width:100%;max-width:560px;margin-inline:auto;
  filter:drop-shadow(0 22px 40px rgba(24,24,27,.2));
}
.b3-chips{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin-top:18px;
}
.b3-chips li{
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:8px 18px;border-radius:999px;
  background:#fff;color:#24292f;box-shadow:var(--sh-rest);
}

/* ---- 下段：3ステップの横レール。番号どうしを線でつなぐ ---- */
.b3-rail{
  list-style:none;margin-top:clamp(34px,4vw,56px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.b3-rail li{
  position:relative;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(36,41,47,.1);
  border-radius:var(--r-item);
  padding:clamp(20px,2.2vw,30px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b3-rail li:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
/* カードとカードをつなぐ線。最後の1枚には出さない */
.b3-rail li::after{
  content:'';position:absolute;top:calc(clamp(20px,2.2vw,30px) + 21px);
  right:calc(clamp(16px,2vw,24px) * -1);width:clamp(16px,2vw,24px);height:2px;
  background:rgba(36,41,47,.24);
}
.b3-rail li:last-child::after{display:none}
.b3-rail__no{
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:#24292f;color:#f5c749;font-size:15px;line-height:1;
}
.b3-rail h3{margin-top:14px;font-size:clamp(16px,1.5vw,20px);font-weight:700}
.b3-rail p{margin-top:8px;font-size:clamp(13px,1.05vw,14px);color:#424a53}


/* ============================================================================
   3枚目・ピンク — 崩れる列 と 守られる列 の対比
   （上で見出しと図を左右に置き、下で2列を突き合わせる）
============================================================================ */
/* 見出しが3行に折れないよう、左の列を厚めに取っています。
   文言を長くするときは、この比率も一緒に見直してください。 */
.b3-wall__top{
  display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
}
.b3-wall__top .b3-head{margin-bottom:0}
.b3-wall__art img{
  width:100%;max-width:420px;margin-inline:auto;
  filter:drop-shadow(0 22px 40px rgba(24,24,27,.22));
}

.b3-vs{
  margin-top:clamp(34px,4vw,56px);
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2vw,26px);align-items:center;
}
.b3-col{
  border-radius:var(--r-card);
  padding:clamp(22px,2.6vw,34px);
  background:rgba(255,255,255,.6);
  border:1px solid rgba(36,41,47,.1);
}
.b3-col__cap{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;
  padding:5px 14px;border-radius:999px;margin-bottom:16px;
}
.b3-col ul{list-style:none;display:grid;gap:11px}
.b3-col li{
  position:relative;padding-left:26px;
  font-size:clamp(13px,1.15vw,15.5px);font-weight:500;line-height:1.6;
}
.b3-col li::before{
  position:absolute;left:0;top:0;font-weight:800;
}
.b3-col__foot{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(36,41,47,.12);
  font-size:12.5px;color:#424a53;
}

/* 左：自力。わずかに傾け、崩れかけて見せる */
.b3-col--risk{
  transform:rotate(-1.4deg);
  background:rgba(255,255,255,.44);
}
.b3-col--risk .b3-col__cap{background:rgba(36,41,47,.12);color:#24292f}
.b3-col--risk li::before{content:'×';color:#e8582d}

/* 右：おまかせ。まっすぐ立たせ、影で持ち上げる */
.b3-col--safe{
  background:#fff;box-shadow:var(--sh-rest);
}
.b3-col--safe .b3-col__cap{background:#24292f;color:#fff}
.b3-col--safe li::before{content:'✓';color:#00a578}

.b3-vs__mark{
  display:grid;place-items:center;
  width:clamp(46px,5vw,64px);aspect-ratio:1/1;border-radius:50%;
  background:#24292f;color:#fff;
  font-size:clamp(13px,1.3vw,17px);letter-spacing:.06em;
  box-shadow:0 10px 24px -12px rgba(24,24,27,.8);
}


/* ============================================================================
   4枚目・緑 — 巨大数字（50 / 120万）を主役にする
   （3枚目までと違い、数字そのものを絵として扱う構成）
============================================================================ */
.b3-ready__top{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
}
.b3-ready__top .b3-head{margin-bottom:0}
.b3-ready__art img{
  width:100%;max-width:460px;margin-inline:auto;
  filter:drop-shadow(0 22px 40px rgba(11,19,48,.26));
  animation:b3Float 6s ease-in-out infinite;
}

.b3-figs{
  margin-top:clamp(34px,4vw,56px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.b3-fig{
  position:relative;overflow:hidden;
  border-radius:var(--r-card);
  padding:clamp(26px,3vw,44px);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b3-fig:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
/* 2枚目だけ白地にして、同じ形の繰り返しに見せない */
.b3-fig--alt{background:#fff;color:#24292f;border-color:rgba(36,41,47,.08)}

.b3-fig__num{
  display:flex;align-items:baseline;gap:.1em;
  line-height:.9;letter-spacing:-.04em;
}
.b3-fig__num .en{font-size:clamp(64px,11vw,144px);font-weight:700;letter-spacing:.01em}
.b3-fig__num small{font-size:clamp(18px,2vw,28px);font-weight:700;letter-spacing:-.02em}
.b3-fig h3{
  margin-top:12px;font-size:clamp(17px,1.7vw,22px);font-weight:700;
  padding-bottom:16px;border-bottom:1px solid currentColor;
  border-bottom-color:rgba(255,255,255,.3);
}
.b3-fig--alt h3{border-bottom-color:rgba(36,41,47,.12)}
.b3-fig ul{list-style:none;margin-top:16px;display:grid;gap:9px}
.b3-fig li{
  position:relative;padding-left:20px;
  font-size:clamp(13px,1.1vw,15px);font-weight:500;line-height:1.6;opacity:.9;
}
.b3-fig li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5;
}

.b3-ready__foot{
  margin-top:clamp(20px,2.4vw,30px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:clamp(13px,1.1vw,15px);text-align:center;
}


/* ============================================================================
   レスポンシブ
============================================================================ */
@media (max-width:1000px){
  /*
    モバイルでもカードの積層感を保つ。画像と背景エフェクトは軽量化済みなので、
    JavaScript や transform は追加せず sticky だけでスクロールに同期させる。
  */
  .stack > .deco-card-panel:nth-child(2),
  .stack > .panel:nth-child(n + 3){
    position:sticky;
    min-height:0;
  }
  .stack > .panel:nth-child(n + 3){margin-top:-24px}
  .stack > .deco-card-panel:nth-child(2){z-index:2}
  .stack > .panel:nth-child(3){z-index:3}
  .stack > .panel:nth-child(4){z-index:4}
  .stack > .panel:nth-child(5){z-index:5}

  /* 猫画像を行ボックスから外し、見出しの行間を押し広げない。
     画像ぶんの右余白を h2 に確保し、狭い画面で画像が wrap の外（panel の
     overflow:hidden）にはみ出して見切れないようにする。 */
  .b3-head h2{padding-right:calc(clamp(46px,5.4vw,72px) + .3em)}
  .b3-head h2 > .jp-phrase:last-child{position:relative}
  .b3-head-ic{
    position:absolute;left:calc(100% + .18em);top:50%;
    margin-left:0;transform:translateY(-35%);
  }

  .b3-emp,
  .b3-flow__top,
  .b3-wall__top,
  .b3-ready__top{grid-template-columns:minmax(0,1fr)}

  .b3-idcard{max-width:340px;margin-inline:auto}
  .b3-wall__art,
  .b3-ready__art{order:-1}
  .b3-rail{grid-template-columns:minmax(0,1fr)}
  .b3-rail li::after{display:none}
}

/* sticky パネル上の常時アニメーションと背景ぼかしを止め、スクロール描画を安定させる。 */
.stack .b3-deco--ring,
.stack .b3-deco--rays,
.stack .b3-ready__art img,
.stack .b3-typing span,
.stack .deco-wave--drift{animation:none}
.stack .deco-pills--glass .deco-pill,
.stack .b3-fig{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

@media (max-width:760px){
  .b3-panel{border-radius:36px 36px 0 0}
  .b3-vs{grid-template-columns:minmax(0,1fr)}
  .b3-vs__mark{justify-self:center}
  .b3-col--risk{transform:none}
  .b3-figs{grid-template-columns:minmax(0,1fr)}
  .b3-deco--ring{width:460px;height:460px;top:-160px;right:-160px}
  .b3-deco--ring::after{inset:74px}
  .b3-deco--dots{width:460px;height:460px;bottom:-140px;left:-130px}
  .b3-deco--frame{width:380px;height:380px;right:-130px;bottom:-150px}
  .b3-deco--rays{width:520px;height:520px;top:-190px;left:-170px}
}

/* ---- 動きを減らす設定のときは、すべて止める ---- */
@media (prefers-reduced-motion: reduce){
  .b3-deco--ring,
  .b3-deco--rays,
  .b3-ready__art img,
  .b3-typing span{animation:none}
}

/* ============================================================
   37. ブロック6：料金〜CTA
============================================================ */

/* ============================================================
   WHY ZETTAi：3つの理由を強調する背景シーン
============================================================ */
.why-zettai{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(780px,70vw,980px);
  margin:clamp(12px,2vw,30px);
  border-radius:clamp(36px,4vw,64px);
  background:#ff8973;
}
.why-zettai::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-10% -5%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffad9e' stroke-width='115' opacity='.66'%3E%3Cellipse cx='1150' cy='520' rx='440' ry='610' transform='rotate(-28 1150 520)'/%3E%3Cellipse cx='1240' cy='530' rx='265' ry='470' transform='rotate(-28 1240 530)'/%3E%3Cpath d='M640 1050C560 770 620 515 825 342C1002 193 1253 187 1460 310'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.why-zettai > .wrap{position:relative;z-index:3}
.why-zettai .label{
  display:inline-block;
  padding:0 2px 5px;
  border:0;border-radius:0;
  background:linear-gradient(transparent 62%,#ffd454 62%);
  color:#3f2f2b;
  box-shadow:none;
}
.why-zettai .label::before{
  content:none;
}
.why-zettai h2,
.why-zettai h2 em{
  background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;
}
.why-zettai .why-zettai__title{
  font-size:clamp(18px,5.4vw,56px);
  white-space:nowrap;
}

/* 参考の丸い筆跡が連続する紫色面。文字や数字は乗せず背景として扱う。 */
.why-zettai__accent{
  display:none;
}
.why-zettai__accent::after{
  content:'';position:absolute;right:5%;bottom:5%;
  width:14px;height:14px;border-radius:50%;background:#ffc33d;
}

.why-zettai__mascot{
  position:absolute;z-index:2;pointer-events:none;
  right:clamp(18px,3.6vw,74px);bottom:clamp(30px,5vw,72px);
  width:clamp(132px,13vw,205px);height:auto;
  transform:translateY(clamp(36px,4vw,56px));
  filter:drop-shadow(0 26px 30px rgba(24,24,27,.16));
}

/* 装飾は色面の周囲に限定し、カードの本文上には置かない。 */
.why-zettai__spark{
  display:none;
  position:absolute;z-index:2;pointer-events:none;width:34px;height:34px;
  background:#ffca28;
  clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);
}
.why-zettai__spark--a{right:25%;top:38%;transform:rotate(13deg)}
.why-zettai__spark--b{
  left:31%;bottom:12%;width:30px;height:30px;background:#ff8053;transform:rotate(18deg);
  clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);
}
.why-zettai__dot{display:none;position:absolute;z-index:2;pointer-events:none;border-radius:50%}
.why-zettai__dot--a{right:20%;top:58%;width:20px;height:20px;background:#ff72c8}
.why-zettai__dot--b{right:21%;top:36%;width:14px;height:14px;background:#f22655}

@media (max-width:1280px){
  .why-zettai__accent{width:min(820px,76vw)}
  .why-zettai__mascot{right:12px;width:145px}
}
@media (max-width:900px){
  .why-zettai{padding-bottom:190px;margin-inline:10px}
  .why-zettai__accent{top:auto;bottom:5%;width:760px;height:310px}
  .why-zettai__mascot{right:22px;bottom:24px;width:128px}
  .why-zettai__spark--a{right:20%;top:auto;bottom:190px}
  .why-zettai__spark--b{left:48%;bottom:50px}
}
@media (max-width:560px){
  .why-zettai{border-radius:32px}
  .why-zettai__accent{left:50%;bottom:4%;width:680px;height:270px;transform:translateX(-50%)}
  .why-zettai__mascot{right:12px;width:112px}
  .why-zettai__dot--b{display:none}
}

/* ============================================================================
   block6.css — 「料金 / 導入の流れ / 必要な環境 / FAQ / 最終CTA」

   assets/style.css の「末尾」に追記してください。
   既存の .plan / .step / .env-card / .faq / .final には一切触れていません。
   すべて .b6- 接頭辞なので、既存の章を書き換える必要はありません。

   守っている数値（YOOM_SPEC.md より）
     角丸  … 大型パネル 60px / 中カード 40px / 通常カード 24px / ピル 999px
     影    … --sh-rest と --sh-hover の2種類だけ。色相は混ぜない
     ホバー … カード translateY(-4px)、ボタン translateY(-2px)。色相は変えない
     文字  … 見出し 1.3 / -.04em、本文 1.6 / -.01em
     巨大数字 … 英数フォント(.en)・700
     装飾  … 数百pxはみ出させて overflow:hidden で切る。装飾 z-index 1〜5 / 中身 10

   JavaScript は使いません。スクロール監視もありません。
============================================================================ */


/* ============================================================
   B6-1. 料金プラン（セクション12）

   「月額25万円」を主役にするための3つの仕掛け
     (1) 大きさ … 25 は最大168px、15 は最大68px。約2.5倍の差を付ける
     (2) 面    … 25 側だけブルーの色面カード。15 側は白＋罫線で後退させる
     (3) 差分  … 15 側の「含まないもの」をダッシュ記号にして、
                  チェックが並ぶ 25 側との違いを一目で分かるようにする
============================================================ */
.b6-price{
  position:relative;isolation:isolate;overflow:hidden;
  background:#f8faff;
}
/* トップページ内の料金表に、Yoom風の太い流線形を敷く。 */
.b6-price::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:8% -10% 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1100' preserveAspectRatio='none'%3E%3Cpath d='M-180 350C85 337 244 135 500 178c250 42 240 249 63 370-151 103-300 105-375 238-70 125 60 251 270 222 250-34 392-292 675-292 260 0 310 195 575 188' fill='none' stroke='%23c4d7ff' stroke-width='245' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-95 988C145 878 270 685 457 650' fill='none' stroke='%23dce6ff' stroke-width='118' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.b6-price > .wrap{position:relative;z-index:2}
.b6-price > .deco2{display:none}

.b6-plans{
  display:grid;
  grid-template-columns:1.32fr 1fr;
  gap:clamp(18px,2.2vw,28px);
  align-items:start;
}

.b6-plan{
  position:relative;
  overflow:hidden;                       /* 装飾をはみ出させて切る */
  border-radius:var(--r-card);           /* 中カード = 40px */
  transition:transform .2s ease, box-shadow .2s ease;
}
.b6-plan__inner{position:relative;z-index:10}

/* ---- 主役：フル伴走プラン ---- */
.b6-plan--main{
  padding:clamp(32px,3.6vw,52px);
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-rest);
}
.b6-plan--main:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-hover);
}
/* 装飾：カードから大きくはみ出す円。overflow:hidden で切られる */
.b6-plan__deco{
  display:none;
}

/* ---- 比較対象：初期構築のみプラン ---- */
.b6-plan--sub{
  padding:clamp(30px,3.2vw,44px);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-rest);
}
.b6-plan--sub:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

/* ---- カード上部 ---- */
.b6-plan__head{margin-bottom:clamp(18px,2vw,26px)}
.b6-plan__flag{
  display:inline-block;margin-bottom:14px;
  padding:1px 2px 4px;border-radius:0;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;
  background:transparent;color:#704536;
  border-bottom:3px solid #cf745d;
  box-shadow:none;
}
.b6-plan__for{
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--sub);margin-bottom:8px;
}
.b6-plan--main .b6-plan__for{color:var(--sub)}
.b6-plan__name{
  font-size:clamp(19px,2vw,26px);font-weight:700;
  letter-spacing:-.03em;line-height:1.3;
}

/* ---- 金額。ここが主役 ---- */
.b6-plan__price{
  display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:.16em;
  margin-bottom:clamp(14px,1.6vw,20px);
}
.b6-plan__cur{
  flex:0 0 100%;
  font-size:12.5px;font-weight:800;letter-spacing:.12em;
  opacity:.8;margin-bottom:4px;
}
.b6-plan__num{
  font-size:clamp(90px,11.6vw,168px);   /* 巨大数字 */
  font-family:'Poppins',sans-serif;
  display:inline-block;
  line-height:.9;font-weight:800;letter-spacing:0;
  padding:.06em .02em .04em 0;
  font-feature-settings:'tnum';font-variant-numeric:tabular-nums;
}
.b6-plan--main .b6-plan__num{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.b6-plan__unit{
  font-size:clamp(18px,1.9vw,26px);font-weight:700;
  letter-spacing:-.02em;padding-bottom:.42em;
}
.b6-plan__per{opacity:.72;font-size:.82em;margin-left:.12em}

/* 比較対象の金額は、主役の約4割の大きさに落とす */
.b6-plan--sub .b6-plan__num{
  font-size:clamp(46px,4.9vw,68px);
  line-height:1;padding:.08em .04em .06em 0;
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.b6-plan--sub .b6-plan__unit{
  font-size:clamp(14px,1.3vw,18px);padding-bottom:.3em;color:var(--sub);
}

.b6-plan__sub{font-size:13.5px;line-height:1.6;letter-spacing:-.01em;color:var(--sub)}
.b6-plan--main .b6-plan__sub{color:var(--sub)}

/* ---- 内容の一覧 ---- */
.b6-plan__list{
  list-style:none;display:grid;gap:13px;
  margin-top:clamp(22px,2.4vw,30px);
  padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line);
}
.b6-plan--main .b6-plan__list{border-top-color:var(--line)}
.b6-plan__list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;line-height:1.6;letter-spacing:-.01em;
}
.b6-plan--sub .b6-plan__list li{color:var(--sub)}
.b6-plan--sub .b6-plan__list li b{color:var(--ink);font-weight:700}
.b6-plan--main .b6-plan__list li b{color:var(--ink);font-weight:700}
/* 含まれないものは、はっきり弱く見せる */
.b6-plan__list li.is-off{color:var(--sub);opacity:.9}

.b6-ck{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;
}
.b6-ck svg{width:11px;height:11px}
.b6-plan--sub .b6-ck--on{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.b6-plan--main .b6-ck--on{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.b6-ck--off{background:var(--surface);border:1px solid var(--line);color:var(--sub)}

/* ---- ボタン ---- */
.b6-plan__btn{margin-top:clamp(26px,2.8vw,34px)}
.b6-plan__btn .ibtn{width:100%}
.b6-plan--main .ibtn-ghost{
  background:#fff;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:var(--sh-rest);
}
.b6-plan--main .ibtn-ghost:hover{box-shadow:var(--sh-hover)}
.b6-plan--main .ibtn-ghost .arw{background:rgba(22,104,240,.12);color:var(--blue)}
.b6-plan--sub .ibtn-ghost{border:1.5px solid var(--line)}

/* ---- 注記（API利用料） ---- */
.b6-note{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:clamp(22px,2.4vw,30px);
  padding:20px clamp(20px,2.2vw,26px);
  border-radius:var(--r-item);
  background:var(--surface);border:1px solid var(--line);
}
.b6-note__mark{
  flex:none;display:grid;place-items:center;
  min-width:42px;height:24px;margin-top:1px;padding:0 9px;
  border-radius:999px;background:#f4ddd3;color:#8f4938;
  font-size:11px;font-weight:800;line-height:1;letter-spacing:.06em;
}
.b6-note p{font-size:13px;color:var(--sub);line-height:1.85;letter-spacing:-.01em}
.b6-note b{color:var(--ink);font-weight:800}


/* ============================================================
   B6-2. 導入の流れ（セクション13）

   3ステップを1本の線でつなぐ。カードの箱は使わない。
   線は .b6-steps::before の1本だけ。丸いアイコンが線の上に乗る。
   線の左右端は「最初と最後の丸の中心」に正確に合わせている
   （--b6-ring と --b6-gap から算出しているので、値を変えてもズレない）
============================================================ */
.b6-flow{
  position:relative;
  isolation:isolate;overflow:hidden;
  background:#f8faff;
  padding-inline:clamp(18px,4vw,64px);
}
.b6-flow::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-8% -4%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 1000' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23dce6ff' stroke-width='78' opacity='.72'%3E%3Cellipse cx='-70' cy='610' rx='250' ry='680' transform='rotate(18 -70 610)'/%3E%3Cellipse cx='1870' cy='500' rx='270' ry='700' transform='rotate(20 1870 500)'/%3E%3Cpath d='M-160 940C-40 610 40 360 190 160'/%3E%3Cpath d='M1640 1020C1680 690 1760 390 1930 145'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.b6-flow > .wrap{
  position:relative;z-index:2;
  padding:clamp(48px,6vw,86px) clamp(24px,5vw,72px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:clamp(22px,2.2vw,34px);
  background:rgba(255,255,255,.96);
  box-shadow:0 30px 70px -32px rgba(4,35,105,.45);
  backdrop-filter:blur(4px);
}
/* 見出しの強調色を外し、文章を黒で一続きに読ませる。 */
.b6-flow .sec-head h2 em{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.b6-flow__mascot{
  position:absolute;z-index:4;pointer-events:none;
  height:auto;
  filter:drop-shadow(0 20px 28px rgba(4,35,105,.28));
}
.b6-flow__mascot--left{
  left:clamp(8px,1.5vw,30px);bottom:clamp(18px,3vw,48px);
  width:clamp(153px,10.4vw,205px);
}
.b6-flow__mascot--right{
  right:clamp(-10px,.2vw,4px);top:clamp(24px,3.4vw,52px);
  width:clamp(230px,15.6vw,308px);
}

/* 白い面の外側にキャラが収まらない幅では、文章を優先する。 */
@media (max-width:1500px){
  .b6-flow__mascot{display:none}
}

.b6-steps{
  --b6-gap:clamp(18px,2.4vw,32px);
  --b6-ring:88px;
  list-style:none;margin:0;padding:0;
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--b6-gap);
}
.b6-steps::before{
  content:'';position:absolute;z-index:0;
  /* 線の両端を1列目・3列目の丸の中心に合わせ、左右を同じ長さにする */
  left:calc((100% - 2 * var(--b6-gap)) / 6);
  right:calc((100% - 2 * var(--b6-gap)) / 6);
  top:calc(var(--b6-ring) / 2 - 1.5px);
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,
    rgba(22,104,240,.22) 0%,
    var(--blue) 22%,
    var(--purple) 80%,
    rgba(123,60,245,.22) 100%);
}

.b6-step{list-style:none;position:relative}

/* ---- 線の上に乗る丸 ---- */
.b6-step__marker{
  position:relative;z-index:1;
  display:block;
  height:var(--b6-ring);
  margin-bottom:clamp(20px,2.2vw,28px);
}
.b6-step__ring{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  flex:none;width:var(--b6-ring);height:var(--b6-ring);border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);color:var(--blue);
  box-shadow:var(--sh-rest);
}
.b6-step__icon{display:grid;place-items:center}
.b6-step__icon svg{width:calc(var(--b6-ring) * .4);height:calc(var(--b6-ring) * .4)}
.b6-step__no{
  position:absolute;top:50%;left:calc(50% + var(--b6-ring) / 2 + 16px);
  transform:translateY(-50%);
  /* 数字の下だけ線をマスクする。前後の線は残してステップの連続性を保つ。 */
  z-index:2;padding-inline:10px;
  background:#fff;
  font-size:clamp(28px,2.8vw,40px);line-height:1;font-weight:700;
  color:rgba(11,19,48,.16);
}

/* 2番目だけ、色面の丸にして最重要であることを見せる */
.b6-step--key .b6-step__ring{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  border-color:transparent;color:#fff;
  box-shadow:0 8px 16px rgba(24,24,27,.1), 0 22px 42px -22px rgba(70,60,220,.85);
}
.b6-step--key .b6-step__no{
  /* 1層目は文字のグラデーション、2層目は線を隠す白い下地。 */
  background:linear-gradient(120deg,var(--blue),var(--purple)) text,#fff padding-box;
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;
  color:transparent;
}

/* タグは丸の行に置く。本文側に置くと3列の見出しの高さがズレる。
   背景は不透明にし、外側に白いリングを付けて線を切る
   （半透明だと線が透けて読めなくなる） */
.b6-step__tag{
  position:absolute;top:50%;left:calc(50% + var(--b6-ring) / 2 + 72px);
  transform:translateY(-50%);
  /* ラベルの文字の背面だけ横線を隠す。 */
  z-index:2;padding-inline:10px;
  font-size:11.5px;font-weight:800;letter-spacing:0;white-space:nowrap;line-height:1.3;
  background:#fff;color:var(--purple-dp);
  box-shadow:none;
}

/* ---- 線の下の本文。箱で囲わない ---- */
.b6-step__body h3{
  font-size:clamp(19px,1.9vw,24px);font-weight:700;
  letter-spacing:-.04em;line-height:1.3;
}
.b6-step__body p{
  margin-top:12px;font-size:14px;color:var(--sub);
  line-height:1.85;letter-spacing:-.01em;
}
.b6-step__body ul{
  margin-top:18px;padding-top:16px;display:grid;gap:9px;
  border-top:1px solid var(--line);
}
.b6-step__body li{
  list-style:none;position:relative;padding-left:17px;
  font-size:13px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.b6-step__body li::before{
  content:'';position:absolute;left:0;top:.58em;
  width:6px;height:6px;border-radius:50%;
  background:#b7654c;opacity:.7;
}
.b6-step--key .b6-step__body li::before{opacity:1}

/* FLOWは各ステップの図と本文を同じ列の中心軸に揃える */
@media (min-width:901px){
  .b6-flow .b6-step__body{
    width:min(100%,260px);
    margin-inline:auto;
    text-align:center;
  }
  .b6-flow .b6-step__body ul{text-align:left}
}
.b6-flow .b6-steps::before{
  background:linear-gradient(90deg,var(--blue) 0%,var(--purple) 100%);
}


/* ============================================================
   B6-3. 必要な環境（セクション14）

   画像は既存の env_hardware.png / env_software.png の2枚だけ。
   同じ画像をもう1枚、大きく薄くしてカードの外へはみ出させ、
   overflow:hidden で切っている（このサイトの装飾の流儀）
============================================================ */
.b6-envs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.2vw,28px);
}
.b6-envcard{
  position:relative;overflow:hidden;
  display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  padding:clamp(28px,3.2vw,44px);
  border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b6-envcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

/* .b6-envcard__art は position を持たせない。
   そうすることで __ghost の基準がカード自身になる */
.b6-envcard__art{flex:none}
.b6-envcard__ghost{
  position:absolute;z-index:1;pointer-events:none;
  width:400px;height:auto;
  top:-170px;right:-190px;
  opacity:.07;filter:blur(1px);   /* 本文の読みやすさを優先して、かなり薄くする */
}
.b6-envcard__icon{
  position:relative;z-index:10;
  width:clamp(78px,8.4vw,116px);height:auto;
}
.b6-envcard__body{position:relative;z-index:10;min-width:0}
.b6-envcard__cap{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--blue);opacity:.8;margin-bottom:6px;
}
.b6-envcard__body h3{
  font-size:clamp(17px,1.7vw,21px);font-weight:700;
  letter-spacing:-.04em;line-height:1.3;
}
.b6-envcard__body ul{
  margin-top:16px;padding-top:16px;display:grid;gap:10px;
  border-top:1px solid var(--line);
}
.b6-envcard__body li{
  list-style:none;position:relative;padding-left:17px;
  font-size:14px;color:var(--sub);line-height:1.7;letter-spacing:-.01em;
}
.b6-envcard__body li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;
  background:#b7654c;opacity:.7;
}
.b6-envcard__body li b{color:var(--ink);font-weight:700}

/* ---- 「当日2〜3時間で完了」の帯 ---- */
.b6-envfoot{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,38px);
  margin-top:clamp(18px,2.2vw,28px);
  padding:clamp(24px,2.8vw,38px) clamp(26px,3vw,46px);
  border-radius:var(--r-card);
  background:#f8eee9;
  border:1px solid rgba(91,57,45,.16);
}
.b6-envfoot__num{
  flex:none;display:flex;align-items:baseline;
  line-height:1;letter-spacing:-.02em;
  color:#a34835;
}
.b6-envfoot__num .en{font-size:clamp(46px,5.6vw,80px);font-weight:700;letter-spacing:.01em}
.b6-envfoot__wave{font-size:clamp(30px,3.4vw,48px);font-weight:700;padding-inline:.04em}
.b6-envfoot__unit{font-size:clamp(17px,1.7vw,24px);font-weight:700;margin-left:.14em}
.b6-envfoot__text{
  font-size:clamp(14px,1.2vw,15.5px);line-height:1.8;letter-spacing:-.01em;color:var(--sub);
}
.b6-envfoot__text b{color:var(--ink);font-weight:800}


/* ============================================================
   B6-4. よくある質問（セクション15）

   details 要素のまま。JavaScript は使っていません。
   開閉マークは擬似要素で描いた「＋ → −」です。
============================================================ */
.b6-faq{max-width:920px;margin-inline:auto;display:grid;gap:13px}

.b6-faq__item{
  border-radius:var(--r-item);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.b6-faq__item:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.b6-faq__item[open]{box-shadow:var(--sh-hover)}

.b6-faq__item summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:clamp(12px,1.4vw,17px);
  padding:20px clamp(18px,2.2vw,26px);
}
.b6-faq__item summary::-webkit-details-marker{display:none}
.b6-faq__item summary:focus-visible{
  outline:2px solid var(--blue);outline-offset:-3px;border-radius:var(--r-item);
}

.b6-faq__q{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  font-size:15px;font-weight:700;color:#9a4e32;
  background:#f7e7d7;border:1px solid #e8c8b3;
}
.b6-faq__title{
  flex:1 1 auto;min-width:0;
  font-size:clamp(14.5px,1.35vw,17px);font-weight:700;
  line-height:1.55;letter-spacing:-.025em;
}
.b6-faq__mark{
  flex:none;position:relative;width:26px;height:26px;border-radius:50%;
  background:var(--surface);
  transition:background .2s ease, transform .28s var(--ease);
}
.b6-faq__mark::before,
.b6-faq__mark::after{
  content:'';position:absolute;left:50%;top:50%;
  width:12px;height:2.4px;border-radius:2px;background:var(--blue);
  transform:translate(-50%,-50%);
}
.b6-faq__mark::after{
  transform:translate(-50%,-50%) rotate(90deg);
  transition:transform .28s var(--ease);
}
/* 開いたら縦棒を寝かせて「−」にする */
.b6-faq__item[open] .b6-faq__mark::after{transform:translate(-50%,-50%) rotate(0deg)}
.b6-faq__item[open] .b6-faq__mark{background:rgba(22,104,240,.12)}

.b6-faq__a{
  display:flex;gap:clamp(12px,1.4vw,17px);align-items:flex-start;
  padding:2px clamp(18px,2.2vw,26px) 24px;
}
.b6-faq__abadge{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--blue);
  background:var(--surface);border:1px solid var(--line);
}
.b6-faq__a p{
  padding-top:5px;
  font-size:14px;color:var(--sub);line-height:1.95;letter-spacing:-.01em;
}

.b6-faq__more{
  margin-top:clamp(20px,2.2vw,28px);text-align:center;
  font-size:13.5px;color:var(--sub);letter-spacing:-.01em;
}
.b6-faq__more a{
  font-weight:700;color:var(--blue);
  text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:rgba(22,104,240,.35);
  transition:text-decoration-color .2s ease;
}
.b6-faq__more a:hover{text-decoration-color:var(--blue)}


/* ============================================================
   B6-5. 最終CTA（セクション16）

   上端だけ大きく丸めて、白い面から色面が生えてくる形にする。
   （ベタ塗りの矩形にはしない）
   マスコットは既存画像。動きは無限ループの浮遊だけ。
============================================================ */
.b6-final{
  position:relative;overflow:hidden;
  border-radius:var(--r-panel) var(--r-panel) 0 0;   /* 大型パネル = 60px */
  margin-top:calc(var(--r-panel) * -1);              /* 前の白い面に食い込ませる */
  padding-block:clamp(64px,7.4vw,110px) clamp(52px,6vw,88px);
}

/* 装飾：数百pxはみ出させて overflow:hidden で切る */
.b6-final__deco{position:absolute;z-index:1;pointer-events:none;border-radius:50%}
.b6-final__deco--a{
  width:700px;height:700px;left:-260px;top:-300px;
  background:radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,0) 68%);
}
.b6-final__deco--b{
  width:560px;height:560px;right:-190px;bottom:-250px;
  border:2px solid rgba(255,255,255,.16);
}

.b6-final__wrap{
  position:relative;z-index:10;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3.4vw,56px);align-items:center;
}
.b6-final h2{font-size:clamp(28px,4.2vw,58px);margin-top:2px}
.b6-final h1{
  color:#fff;font-size:clamp(28px,4.2vw,58px);
  line-height:1.35;font-weight:800;letter-spacing:-.04em;margin-top:2px;
}
.b6-final h1 em{
  font-style:normal;color:#fff;
  text-decoration:underline;text-decoration-thickness:.09em;
  text-underline-offset:.14em;text-decoration-color:rgba(255,255,255,.42);
}
.b6-final--page{
  margin-top:0;
  background:#e9b7a3;
  color:#3f2f2b;
}
.b6-final--page .label{
  color:#704536;-webkit-text-fill-color:#704536;opacity:1;
}
.b6-final--page h1,
.b6-final--page h1 em{
  color:#342824;
}
.b6-final--page h1{font-size:clamp(28px,3.9vw,53px)}
.b6-final--page h1 em{
  text-decoration-color:#b9553d;
}
.b6-final--page .sec-lead{color:#624b42;opacity:1}
.b6-final--page .ibtn-primary,
.b6-final--page .ibtn-ghost{
  background:#fffaf6;color:#3f2f2b;
  border:1px solid rgba(91,57,45,.18);
  box-shadow:0 12px 26px -16px rgba(91,57,45,.38);
  backdrop-filter:none;
}
.b6-final--page .ibtn-primary .arw,
.b6-final--page .ibtn-ghost .arw{
  background:#f4ddd3;color:#a34835;
}
.b6-final--page .b6-final__pills li{
  background:rgba(255,250,246,.55);color:#49372f;
  border-color:rgba(91,57,45,.14);
}
.b6-final--page .b6-final__pills li::before{background:#b9553d}
.b6-final--page .b6-final__mascot{
  filter:drop-shadow(0 24px 34px rgba(91,57,45,.24));
}
.b6-final .sec-lead{max-width:34em}

.b6-final__cta{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:clamp(26px,3vw,38px);
}
/* 色面の上なので、主ボタンは白にする */
.b6-final .ibtn-primary{
  background-image:none;background:#fff;color:var(--blue-dp);
  box-shadow:0 14px 30px -14px rgba(4,10,40,.6);
}
.b6-final .ibtn-primary:hover{
  filter:none;box-shadow:0 20px 38px -14px rgba(4,10,40,.66);
}
.b6-final .ibtn-primary .arw{background:rgba(22,104,240,.12);color:var(--blue)}

.b6-final__pills{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(20px,2.2vw,28px);
}
.b6-final__pills li{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.b6-final__pills li::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.85);
}

/* 影は「外側の入れ物」に、動きは「中の画像」に付ける。
   同じ要素に filter と animation を重ねると、環境によっては
   合成レイヤーが描画されず絵が消えることがあるため分けている */
.b6-final__mascot{
  justify-self:end;
  filter:drop-shadow(0 26px 40px rgba(4,10,40,.34));
}
.b6-final__mascot img{width:clamp(170px,20vw,290px);height:auto}

/* トップページ最終CTAは、指定イラストをそのまま主役にする */
.b6-final--illustrated{
  padding:0;
  background:#fff;
  border-radius:0;
  width:100vw;
  max-width:none;
  margin-inline:calc(50% - 50vw);
}
.b6-final--illustrated > .b6-final__deco,
.b6-final--illustrated > .deco2,
.b6-final--illustrated > .b6-final__wrap{display:none}
.ct-hero-stage{
  position:relative;
  width:100vw;
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}
.ct-hero-stage > picture{display:block;width:100%}
.ct-hero-replacement{
  display:block;
  width:100%;
  height:auto;
}
.ct-hero-actions{position:absolute;inset:0;z-index:2}
.ct-hero-actions a,
.page-final-hero-actions a{
  position:absolute;
  top:63%;
  height:11%;
  display:block;
  border-radius:999px;
  /* 焼き込みCTAのホバー面は、各リンクのクリック領域で必ず切り取る。
     親ステージ全体を基準にしないことで、隣のボタンへ色面が広がらない。 */
  isolation:isolate;
  overflow:hidden;
  --hero-cta:#3d259d;
}
/* PC画像では焼き込みボタンの見た目がリンク基準より右下にあるため、
   当たり判定とホバー面を同じ量だけ補正する。モバイルには適用しない。 */
@media (min-width:701px){
  .ct-hero-actions a,
  .page-final-hero-actions a{transform:translate(8%,35%)}
  /* 1つ目は画像の右端まで、2つ目は右側の白いボタンへ合わせる。 */
  .ct-hero-actions a:last-child,
  .page-final-hero-actions a:last-child{transform:translate(27%,35%)}
}
/* contact_hero-wide.png 内のボタンの実座標（2199 × 916）に合わせる。 */
.ct-hero-actions a:first-child{left:16.15%;top:53.8%;width:16.65%;height:11.4%}
.ct-hero-actions a:last-child{left:33.5%;top:53.8%;width:12.4%;height:11.4%}
@media (min-width:701px){
  .ct-hero-actions a:first-child,
  .page-final-hero-actions a:first-child{
    width:calc(17.65% + 4px);
    height:calc(11.4% + 4px);
    transform:translate(calc(8% - 3px),calc(35% - 1px));
  }
  .ct-hero-actions a:last-child,
  .page-final-hero-actions a:last-child{
    width:14.35%;
    height:11.8%;
    transform:translate(14%,35%);
  }
}
/* 完成画像上のCTAは、共通JSを介さずリンク自身でホバーを描く。
   そのため初期化の有無に関係なく発火し、塗りと文言はこの枠内だけに収まる。 */
.ct-hero-actions a::before,
.ct-hero-actions a::after,
.page-final-hero-actions a::before,
.page-final-hero-actions a::after{position:absolute;inset:0;pointer-events:none}
.ct-hero-actions a::before,
.page-final-hero-actions a::before{
  content:'';z-index:1;border-radius:inherit;background:var(--hero-cta);
  clip-path:circle(0 at 20% 40%);
  transition:clip-path .42s cubic-bezier(.2,.8,.2,1);
}
.ct-hero-actions a::after,
.page-final-hero-actions a::after{
  content:attr(aria-label) '  →';z-index:2;
  display:grid;place-items:center;padding-inline:8%;box-sizing:border-box;
  color:#fff;font-size:clamp(13px,1.1vw,18px);font-weight:800;letter-spacing:-.02em;
  line-height:1.3;text-align:center;opacity:0;transform:translateX(3rem);
  transition:transform .3s ease,opacity .3s ease;
}
.ct-hero-actions a:is(:hover,:focus-visible)::before,
.page-final-hero-actions a:is(:hover,:focus-visible)::before{clip-path:circle(150% at 20% 40%)}
.ct-hero-actions a:is(:hover,:focus-visible)::after,
.page-final-hero-actions a:is(:hover,:focus-visible)::after{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .ct-hero-actions a::before,.ct-hero-actions a::after,
  .page-final-hero-actions a::before,.page-final-hero-actions a::after{transition:none}
}
@media (max-width:700px){
  .ct-hero-stage{width:100%}
  .ct-hero-actions a:first-child{top:72.5%;left:18%;width:64%;height:7.4%}
  .ct-hero-actions a:last-child{top:80.7%;left:18%;width:64%;height:6.9%}
}



/* ============================================================
   B6-6. レスポンシブ
============================================================ */
@media (max-width:1000px){
  .b6-plans{grid-template-columns:1fr}
  .b6-plan--main .b6-plan__num{font-size:clamp(84px,15vw,130px)}
}

@media (max-width:700px){
  .b6-price::before{
    inset:12% -65% 0;
    background-size:auto 100%;
  }
}

@media (max-width:900px){
  /* ---- 流れ：横1本の線から、縦の線に切り替える ---- */
  .b6-steps{--b6-ring:72px;grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .b6-steps::before{display:none}
  .b6-step:not(:last-child)::before{
    content:'';position:absolute;z-index:0;
    left:calc(var(--b6-ring) / 2 - 1.5px);
    top:var(--b6-ring);
    bottom:calc(var(--b6-gap) * -1);
    width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--blue),var(--purple));
    opacity:.55;
  }
  .b6-step__marker{display:flex;align-items:center;gap:16px;margin-bottom:16px}
  .b6-step__ring,.b6-step__no,.b6-step__tag{position:static;transform:none}
  .b6-step__body{padding-left:calc(var(--b6-ring) + 18px)}

  /* ---- 必要な環境 ---- */
  .b6-envs{grid-template-columns:1fr}
  .b6-envfoot{flex-direction:column;align-items:flex-start;gap:14px}

  /* ---- 最終CTA：マスコットを上に置いて中央寄せ ---- */
  .b6-final__wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .b6-final__mascot{justify-self:center;order:-1}
  .b6-final__mascot img{width:clamp(150px,34vw,220px)}
  .b6-final .sec-lead{margin-inline:auto}
  .b6-final__cta,
  .b6-final__pills{justify-content:center}
}

@media (max-width:640px){
  .b6-plan__num{font-size:clamp(76px,21vw,110px)}
  .b6-envcard{flex-direction:column}
  .b6-note{flex-direction:column;gap:10px}
}

@media (max-width:560px){
  .b6-steps{--b6-ring:56px}
  .b6-step__marker{gap:12px}
  .b6-step__body{padding-left:calc(var(--b6-ring) + 14px)}
  .b6-step__no{font-size:24px}
  .b6-final__pills li{font-size:11.5px;padding:7px 13px}
}


/* ============================================================
   B6-7. 動きを減らす設定への配慮

   このブロックが使う動きは、既存の .float-slow（無限ループの浮遊）だけです。
   スクロール監視は使っていないため、止めても要素が消えることはありません。
============================================================ */
@media (prefers-reduced-motion: reduce){
  .b6-final__mascot img{animation:none}
  .b6-plan,
  .b6-envcard,
  .b6-faq__item,
  .b6-faq__mark,
  .b6-faq__mark::after{transition:none}
}


/* ============================================================
   38. パネルの装飾（うねる白線・全周角丸パネル・ピル型チップ）
============================================================ */
/* ============================================================================
   deco — カラーパネルの装飾を参考サイトへ寄せる追加CSS

   ■ 置き場所
     assets/style.css の「末尾」に、この内容をまるごと追記してください。
     （36章の .b3- より後ろに置くこと。ただし .b3- を上書きする記述は
       ひとつもありません。すべて .deco- 接頭辞の新規クラスだけです。）

   ■ 中身
     1. .deco-wave      … うねる白線のオーバーレイ（4パネル共通の装飾）
     2. .deco-card-panel … 全周角丸40px・max-width1440px の浮くカードパネル
     3. .deco-pills     … ピル型の機能チップ（200×72px）

   ■ 既存への影響
     .b3- / .panel / .stack のいずれも書き換えていません。追加のみです。
     z-index は 装飾=2（既存の .b3-deco=1 の上）／コンテンツ=10（既存のまま）。

   ■ JavaScript
     使いません。IntersectionObserver・スクロール監視は一切ありません。
============================================================================ */


/* ============================================================================
   1. うねる白線のオーバーレイ  .deco-wave

   参考サイトは 1284×1223 のSVGを left:39% / top:-63px に置き、
   数百pxはみ出させて overflow:hidden で切っています。同じ流儀で作ります。

   ■ 色は CSS 側で決めます
     SVGは「線の形」だけを持ち、色は mask で流し込みます。
     そのため 1本のSVGを 白線にも 濃色線にも使い回せます。
       --deco-wave-color … 線の色     （既定 #fff）
       --deco-wave-alpha … 線の不透明度（既定 .2 ＝参考サイトの実測値）

   ■ mask 非対応ブラウザでは「何も描かれない」だけで、
     白い矩形が残る事故は起きません（@supports で囲っています）。

   ■ 絵は4種類あります（--deco-art-a 〜 -d）。
     同じ絵の繰り返しに見えないよう、パネルごとに
     絵・位置・角度・大きさをすべて変えてあります。
============================================================================ */

:root{
  /* --- 絵A：内へ巻き込む渦。1枚目（青）用 --- */
  --deco-art-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1284' height='1223' viewBox='0 0 1284 1223' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M66 1178C270 1050 330 852 286 664C240 468 352 296 552 262C760 226 930 372 916 560C902 736 742 846 606 776C476 710 470 528 616 470C762 412 906 512 972 636C1078 838 1140 1012 1170 1198' stroke-width='30'/%3E%3Cpath d='M232 1196C346 1064 372 918 344 786' stroke-width='14'/%3E%3Cpath d='M1046 232C1114 176 1180 150 1258 140' stroke-width='14'/%3E%3C/svg%3E");

  /* --- 絵B：三連のうねり。2枚目（黄）用 --- */
  --deco-art-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1284' height='1223' viewBox='0 0 1284 1223' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 306C232 128 424 474 664 334S1092 154 1270 344' stroke-width='30'/%3E%3Cpath d='M14 648C232 470 424 816 664 676S1092 496 1270 686' stroke-width='22'/%3E%3Cpath d='M14 990C232 812 424 1158 664 1018S1092 838 1270 1028' stroke-width='30'/%3E%3C/svg%3E");

  /* --- 絵C：大きなループ結び。3枚目（ピンク）用 --- */
  --deco-art-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1284' height='1223' viewBox='0 0 1284 1223' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 1160C300 1060 340 700 540 560C740 420 1020 500 1050 700C1076 876 900 976 786 892C660 800 690 570 830 430C970 292 1160 250 1250 60' stroke-width='34'/%3E%3Cpath d='M150 1206C300 1120 372 980 404 852' stroke-width='14'/%3E%3C/svg%3E");

  /* --- 絵D：入れ子の弧。4枚目（緑）用 --- */
  --deco-art-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1284' height='1223' viewBox='0 0 1284 1223' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 1210C120 706 400 322 862 190' stroke-width='30'/%3E%3Cpath d='M304 1214C304 782 542 462 942 352' stroke-width='22'/%3E%3Cpath d='M486 1216C486 852 662 610 1012 522' stroke-width='30'/%3E%3Cpath d='M664 1220C664 922 792 762 1082 692' stroke-width='16'/%3E%3C/svg%3E");
}

.deco-wave{
  /* --dw で大きさを決め、高さは元SVGの比率(1223/1284)から自動で出す。
     1284px は参考サイトの実測値。狭い画面では素直に縮めます。 */
  --dw:clamp(760px, 62vw + 400px, 1284px);
  --deco-wave-color:#fff;
  --deco-wave-alpha:.2;
  --deco-art:var(--deco-art-a);

  position:absolute;
  z-index:2;              /* 既存の .b3-deco(=1) の上、コンテンツ(=10) の下 */
  pointer-events:none;
  display:block;
  width:var(--dw);
  height:calc(var(--dw) * 0.9525);
  transform-origin:50% 50%;
}

/* mask に対応している環境でだけ着色する。
   非対応なら background が付かないので、何も表示されず崩れません。 */
@supports ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .deco-wave{
    background:var(--deco-wave-color);
    opacity:var(--deco-wave-alpha);

    -webkit-mask-image:var(--deco-art);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:100% 100%;
    mask-image:var(--deco-art);
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:100% 100%;
  }
}

/* ---- 濃色の線（黄・ピンクなど明るい面の上ではこちら） ---- */
.deco-wave--ink{
  --deco-wave-color:#24292f;
  --deco-wave-alpha:.14;
}

/* ---- パネルごとの置き方 ------------------------------------------------
   絵・位置・角度・大きさをすべて変えてあります。
   数百pxはみ出す前提の数値なので、はみ出し量を減らしたいときも
   left / top ではなく --dw（大きさ）から先に触ってください。 */

/* 1枚目・青：渦を右寄りに、少し左へ倒す */
.deco-wave--p1{
  --deco-art:var(--deco-art-a);
  left:44%; top:-150px;
  transform:rotate(-8deg);
}

/* 2枚目・黄：うねりを左へ大きく逃がす。線は濃色 */
.deco-wave--p2{
  --deco-art:var(--deco-art-b);
  --deco-wave-color:#24292f;
  --deco-wave-alpha:.13;
  left:-26%; top:-210px;
  transform:rotate(6deg) scale(1.12);
}

/* 3枚目・ピンク：ループを右下から。ほぼ上下反転させて別の絵に見せる */
.deco-wave--p3{
  --deco-art:var(--deco-art-c);
  --deco-wave-color:#24292f;
  --deco-wave-alpha:.12;
  right:-24%; top:-70px;
  transform:rotate(172deg) scale(1.04);
}

/* 4枚目・緑：入れ子の弧を大きめに、上へ深く抜く */
.deco-wave--p4{
  --deco-art:var(--deco-art-d);
  left:28%; top:-360px;
  transform:rotate(-16deg) scale(1.26);
}

/* 全周角丸パネル用（好みで p1〜p4 の代わりに使う） */
.deco-wave--card{
  --deco-art:var(--deco-art-b);
  left:38%; top:-63px;          /* 参考サイトの実測値そのまま */
  transform:rotate(-4deg);
}

/* ---- 任意：ごくゆっくり漂わせる（無限ループのみ。スクロール監視なし） ---- */
@keyframes decoDrift{
  0%,100%{translate:0 0}
  50%    {translate:0 -22px}
}
.deco-wave--drift{animation:decoDrift 14s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .deco-wave--drift{animation:none}
}

/* 狭い画面では線が太く見えすぎるので、うっすらまで落とす */
@media (max-width:760px){
  .deco-wave{--dw:clamp(620px, 150vw, 900px)}
  .deco-wave--p2,.deco-wave--p3{--deco-wave-alpha:.1}
}


/* ============================================================================
   2. 全周角丸のカラーパネル  .deco-card-panel

   参考サイトの色面は2種類あり、上端だけ角丸60px（＝いまの積層4枚）と、
   全周角丸40px・max-width1440px・margin:0 auto 20px で白の上に浮くカード。
   ここでは後者を追加します。積層には手を入れていません。

   ■ 使い方
     <section class="deco-card-panel deco-card-panel--purple">
       <span class="deco-wave deco-wave--card" aria-hidden="true"></span>
       <div class="wrap"> … </div>
     </section>

   ■ 積層の直後に置くときは --after-stack を足してください。
     上に20pxの白い帯が入り、積層の最後の面と地続きに見えなくなります。
============================================================================ */
.deco-card-panel{
  position:relative;
  overflow:hidden;                 /* はみ出す装飾をここで切る */
  max-width:1440px;
  margin:0 auto 20px;
  border-radius:40px;              /* 中カードと同じ40px。60pxではない */
  padding:clamp(48px,5.6vw,80px) 0 clamp(64px,7vw,120px);
  color:#fff;
}
.deco-card-panel > .wrap{position:relative;z-index:10}

/* 積層の直後／直前に置くとき用。白の帯を作って地続きに見せない */
.deco-card-panel--after-stack{margin-top:20px}
.deco-card-panel--before-stack{margin-bottom:20px}

/* 色。既存の :root トークンをそのまま使います */
.deco-card-panel--blue  {background:var(--panel-blue)}
.deco-card-panel--green {background:var(--panel-green)}
.deco-card-panel--yellow{background:var(--panel-yellow);color:#24292f}
.deco-card-panel--pink  {background:var(--panel-pink);color:#24292f}
.deco-card-panel--ink   {background:#24292f}
.deco-card-panel--tint  {background:#f6f8fa;color:#24292f}

/* パネル内の文字は面の色に追従させる（.panel と同じ考え方・別クラス） */
.deco-card-panel .label{
  background:none;-webkit-text-fill-color:currentColor;color:currentColor;opacity:.72;
}
.deco-card-panel h2,
.deco-card-panel h3{color:currentColor}
.deco-card-panel h2 em{
  background:none;-webkit-text-fill-color:currentColor;color:currentColor;
  text-decoration:underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.16em;
  text-decoration-color:rgba(255,255,255,.45);
}
.deco-card-panel--yellow h2 em,
.deco-card-panel--pink h2 em,
.deco-card-panel--tint h2 em{text-decoration-color:rgba(36,41,47,.25)}
#how-it-runs h2 em{
  text-decoration-color:#ffd16f;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.deco-card-panel .sec-lead{color:currentColor;opacity:.86}

@media (max-width:760px){
  .deco-card-panel{border-radius:28px;margin-inline:12px}
}


/* ============================================================================
   3. ピル型の機能チップ  .deco-pills

   参考サイトの実測値：
     width:200px / height:72px / border-radius:999px
     padding:0 23.53px / box-shadow:0 2px 8px rgba(0,0,0,.08)
     gap: row 10px / col 8px / アイコン 36×36px

   ■ 使い方（アイコンは既存の images/cards/cat_*.png）
     <ul class="deco-pills">
       <li class="deco-pill">
         <img class="deco-pill__ic" src="images/cards/cat_01_sales.png" alt="" aria-hidden="true" loading="lazy" decoding="async">
         <span class="deco-pill__t">営業リスト</span>
       </li>
       …
     </ul>

   ■ 文字数の目安
     200px幅では日本語7文字までが安全です。8文字以上を入れるときは
     <ul class="deco-pills deco-pills--wide"> を使ってください（240px）。
============================================================================ */
.deco-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px 8px;                    /* 行10px / 列8px（実測値） */
  justify-content:center;
  align-items:stretch;
  list-style:none;
  margin:0;
  padding:0;
}
.deco-pills--left{justify-content:flex-start}

.deco-pill{
  --pill-w:200px;
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  width:var(--pill-w);
  height:72px;
  padding:0 23.53px;               /* 実測値。丸めない */
  border-radius:999px;
  background:#fff;
  color:#24292f;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  transition:all .2s ease;
}
.deco-pills--wide .deco-pill{--pill-w:240px}

.deco-pill__ic{
  width:36px;height:36px;          /* 実測値 */
  flex:0 0 36px;
  object-fit:contain;
  display:block;
}
.deco-pill__t{min-width:0}

/* 数字や英字を添えるとき（例：01 / 24h）。英数だけ Poppins に切り替える */
.deco-pill__n{
  font-family:'Poppins',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  opacity:.5;
}

/* ホバーは「浮かせる＋影を深く」だけ。色相は変えない */
.deco-pill:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-hover, 0 0 2px rgba(24,24,27,.12), 0 12px 24px rgba(24,24,27,.1));
}

/* 濃い面の上に置くときの半透明版（青・緑・#24292F の面で使う） */
.deco-pills--glass .deco-pill{
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
}
.deco-pills--glass .deco-pill:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.24);
}

@media (prefers-reduced-motion: reduce){
  .deco-pill{transition:none}
  .deco-pill:hover{transform:none}
}

/* 狭い画面：2列に落として高さを詰める */
@media (max-width:560px){
  .deco-pills{gap:8px}
  .deco-pill{
    --pill-w:calc(50% - 4px);
    height:64px;
    padding:0 14px;
    gap:9px;
    font-size:12px;
  }
  .deco-pill__ic{width:30px;height:30px;flex-basis:30px}
}


/* ============================================================
   39. ファーストビュー（参考サイトに寄せた版）
============================================================ */
/* ============================================================
   ファーストビュー（+ 信頼の帯）専用スタイル

   接頭辞は .fv- で統一しています。
   既存の .hero2 / .proof / .chips / .stepcard の形はそのまま活かし、
   参考サイトに寄せるための差分だけをここで上書きします。
   このファイルは assets/style.css より後に読み込んでください。

   参考サイトの実測仕様に合わせた点：
   ・ヒーローは薄グレー #EAEEF2 のベタ。直下の白い面が上端40pxの角丸で乗り上げる
   ・円環は右へ 418px はみ出させ、overflow:hidden で切る（数百px はみ出させて切る流儀）
   ・影は2種類だけ。色相は混ぜない（#18181B のアルファのみ）
   ・見出し 行間1.3 / 字間-0.04em、本文 行間1.6 / 字間-0.01em
   ・スクロール監視は使わない。動きは「読み込み時1回」と「無限ループ」だけ
   ・英数字は和文より1.2倍大きく、字間を +0.02em に振る
============================================================ */

.fv{
  /* 影（この2つ以外を使わない） */
  --fv-sh-rest:  0 8px 16px rgba(24,24,27,.1), 0 0 1px rgba(24,24,27,.3);
  --fv-sh-hover: 0 0 2px rgba(24,24,27,.12), 0 12px 24px rgba(24,24,27,.1);

  /* 面の色 */
  --fv-grey:#EAEEF2;

  /* マスコットの基準の高さ。4体の大小はこの値からの比率で決める。
     参考サイトはFVの高さの3分の1ほどを4体で占めています。小さくすると
     一気に寂しくなるので、詰めるより先にここを疑ってください。 */
  --fv-mh:clamp(112px,22vw,300px);
}

/* ------------------------------------------------------------
   (1) 面：ヒーローは薄グレー、直下の白が乗り上げる
------------------------------------------------------------ */
.hero2.fv{
  position:relative;
  overflow:hidden;                 /* はみ出した円環をここで切る */
  background:var(--fv-grey);
  padding-top:clamp(104px,10vw,140px);
  /* 下は、乗り上げてくる白い面のぶん（40px）を見越して余裕を持たせる */
  padding-bottom:clamp(56px,6vw,92px);
}

/* 角のカーブから下地のグレーが覗く。これがページのリズムの起点 */
.proof.fv-proof{
  position:relative;
  z-index:2;
  margin-top:-40px;
  border-radius:40px 40px 0 0;
  background:#fff;
  border-top:0;                    /* 角丸の上に罫線が乗ると濁るので消す */
  border-bottom:1px solid var(--line,#EAEEF2);
  padding-block:clamp(40px,4vw,58px) clamp(28px,3vw,44px);
}

/* ------------------------------------------------------------
   (2) 回転する円環

   参考サイトは右へ 418px、上へ 30px ずらして overflow:hidden で切っています。
   円環そのものを回し、中の絵を同じ時間で逆回転させて正立を保ちます。
   内周は direction:reverse で逆向きに回すので、中の絵も同じく reverse。
------------------------------------------------------------ */
.fv-ring{
  position:absolute;
  top:-30px;
  /* 参考サイトは right:-418px。あちらは本文が左寄せですが、こちらは中央寄せなので、
     本文の右端（中央 +360px）を基準にして、そのすぐ外側から円環を始めています。
     結果として画面の右端に弧だけが覗きます（見え方は参考サイトと同じ）。 */
  left:calc(50% + 560px);
  width:1170px;
  height:1170px;
  z-index:1;
  pointer-events:none;
}

/* 横幅に余裕のあるPCでは、左の余白にも2つのエージェントを表示する。
   それぞれ別方向から寄ってくるので、オープニングとのつながりが生まれる。 */
.fv-agent-pair{
  position:absolute;z-index:6;
  left:clamp(120px,9vw,210px);top:clamp(350px,23vw,450px);
  display:flex;align-items:center;gap:clamp(8px,1vw,16px);
  pointer-events:none;transform:scale(2.1);transform-origin:top left;
}
.fv-agent-pair__openclaw,.fv-agent-pair__hermes{
  display:grid;place-items:center;background:#fff;
  box-shadow:0 16px 32px rgba(47,69,145,.15);
}
.fv-agent-pair__openclaw{
  width:clamp(142px,10.2vw,196px);height:clamp(82px,6.3vw,116px);
  border-radius:22px;transform:rotate(-6deg);
  animation:fvAgentPairInLeft .98s .52s var(--ease) both;
}
.fv-agent-pair__openclaw img{width:87%;height:auto;mix-blend-mode:multiply}
.fv-agent-pair__times{
  color:#f04487;font-size:clamp(22px,2vw,32px);font-weight:800;
  animation:fvAgentPairPop .60s .91s var(--ease) both;
}
.fv-agent-pair__hermes{
  width:clamp(74px,5.8vw,108px);aspect-ratio:1;
  border:4px solid #ffe05a;border-radius:50%;overflow:hidden;
  transform:rotate(6deg);animation:fvAgentPairInRight .98s .63s var(--ease) both;
}
.fv-agent-pair__hermes img{width:100%;max-width:none;height:100%;object-fit:contain;object-position:center;filter:contrast(1.08)}
@keyframes fvAgentPairInLeft{from{opacity:0;transform:translateX(-90px) rotate(-16deg)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes fvAgentPairInRight{from{opacity:0;transform:translateX(90px) rotate(16deg)}to{opacity:1;transform:rotate(6deg)}}
@keyframes fvAgentPairPop{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:none}}
/* 左の余白が狭くなる幅では、消さずにコンパクト化して残す。 */
@media (max-width:1760px){
  .fv-agent-pair{left:86px;top:420px;transform:scale(1.512)}
}
@media (max-width:1180px){.fv-agent-pair{display:none}}

.fv-circle{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--d);
  height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  animation:fvSpin var(--spin) linear infinite;
}
.fv-circle--out{ --d:1170px; --r:537px; --s:130px; --spin:80s }
/* 内周は、外周の絵とぶつからない半径にしています。
   外周：半径537 − 絵の半分65 = 472 まで内側に入る
   内周：半径415 + 絵の半分48 = 463 まで外側に出る（差9pxが隙間） */
.fv-circle--in {
  --d:830px; --r:415px; --s:96px; --spin:64s;
  animation-direction:reverse;
}

.fv-circle__item{
  position:absolute;
  top:50%;
  left:50%;
  --angle:calc(360deg / var(--n) * var(--i));
  transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--angle)));
  width:var(--s);
  height:var(--s);
  margin:calc(var(--s) * -.37);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--fv-sh-rest);
  opacity:0;
  animation:fvRingItemIn .58s cubic-bezier(.2,.8,.2,1.18) both;
  animation-delay:calc(.02s + var(--i) * 42ms);
}
.fv-circle--in .fv-circle__item{
  animation-delay:calc(.12s + var(--i) * 48ms);
}
.fv-circle__item img{
  width:64%;
  height:auto;
  animation:fvCounterSpin var(--spin) linear infinite;
}
.fv-circle--in .fv-circle__item{
  /* 内周は少しだけ小さく、白も控えめにして奥行きを出す */
  background:rgba(255,255,255,.92);
}
.fv-circle--in .fv-circle__item img{ animation-direction:reverse }

@keyframes fvSpin{ to{ transform:rotate(360deg) } }
@keyframes fvCounterSpin{ to{ transform:rotate(-360deg) } }
@keyframes fvRingItemIn{
  0%{
    opacity:0;
    transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--angle))) scale(.18);
  }
  72%{
    opacity:1;
    transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--angle))) scale(1.08);
  }
  100%{
    opacity:1;
    transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--angle))) scale(1);
  }
}

/* ------------------------------------------------------------
   (3) マスコット4体：個別に下から湧き上がる

   横ずれ・所要時間・遅れをあえてバラすことで「同時に揃わない」状態を作ります。
   終端のイージングがオーバーシュートするので、着地でひと跳ねします。

   終わりの姿勢は transform:none なので、静止時の位置は
   margin（＝レイアウト）で決めています。transform では動かさないこと。
------------------------------------------------------------ */
.fv-mascots{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  /* 画像自体が余白を持っているので、gap は 0 でちょうど肩が触れる間隔になります */
  gap:0;
  margin-top:clamp(10px,1.6vw,24px);
}
.fv-mascot{
  width:auto;
  height:var(--fv-mh);
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(24,24,27,.18));

  opacity:0;                       /* 出現前。アニメーションで1になる */
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.68,0,.265,1.2);
}
/* 大小と、着地の高さをずらす */
.fv-mascot--a{ height:calc(var(--fv-mh) * .78); margin-bottom:clamp(4px,.8vw,14px) }
.fv-mascot--b{ height:calc(var(--fv-mh) * 1)   }
.fv-mascot--c{ height:calc(var(--fv-mh) * .88) }
.fv-mascot--d{ height:calc(var(--fv-mh) * .70); margin-bottom:clamp(6px,1vw,20px) }

.fv-mascot--a{ animation-name:fvRiseA; animation-duration:.68s; animation-delay:0s }
.fv-mascot--b{ animation-name:fvRiseB; animation-duration:.72s; animation-delay:.08s }
.fv-mascot--c{ animation-name:fvRiseC; animation-duration:.76s; animation-delay:.16s }
.fv-mascot--d{ animation-name:fvRiseD; animation-duration:.80s; animation-delay:.24s }

@keyframes fvRiseA{ 0%{opacity:0; transform:translate( 100px,500px) scale(.95)} to{opacity:1; transform:none} }
@keyframes fvRiseB{ 0%{opacity:0; transform:translate(  50px,500px) scale(.95)} to{opacity:1; transform:none} }
@keyframes fvRiseC{ 0%{opacity:0; transform:translate( -50px,500px) scale(.95)} to{opacity:1; transform:none} }
@keyframes fvRiseD{ 0%{opacity:0; transform:translate(-100px,500px) scale(.95)} to{opacity:1; transform:none} }

/* 既存の1体用スタイルは使わない（4体構成に置き換えたため） */
.fv .hero2-mascot{ display:none }

/* ------------------------------------------------------------
   (4) 英数字：和文より1.2倍大きく、字間はプラスに振る
   和文は -0.04em のまま。ここを混ぜないのが参考サイトの作りです。
------------------------------------------------------------ */
/* タグは <i class="en"> を使っています。<span> だと
   .proof-grid div span{display:block} のような既存指定を拾ってしまい、
   数字と単位が改行されてしまうためです（実際に起きました）。 */
.fv .en,
.fv-proof .en{
  display:inline;
  font-family:'Poppins',sans-serif;
  font-style:normal;
  font-size:1.2em;
  letter-spacing:.02em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:inherit;
}
/* h1 は左右の装飾に重ならない中央幅へ収める。 */
.fv h1{
  max-width:min(1000px,66vw);
  margin:22px auto 0;
  font-size:clamp(38px,3.8vw,60px);
  letter-spacing:-.04em;line-height:1.3;
}
.fv h1 .en{font-size:1.05em;font-weight:800}

/* 信頼の帯の数字。もともと大きいので、ウェイトだけ揃える */
.fv-proof .proof-grid div b .en{ font-weight:800 }

/* ------------------------------------------------------------
   重なりの順番（装飾 1〜5 ／ コンテンツ 10）
------------------------------------------------------------ */
.fv .hero2-inner{ position:relative; z-index:10 }
.fv .hero2-float{ z-index:6 }

/* ------------------------------------------------------------
   左の1列（指示 → 実行）
   右側は円環に譲ったので、chips と stepcard を左にまとめています。
------------------------------------------------------------ */
.fv-side{
  display:grid;
  gap:clamp(14px,1.6vw,22px);
  justify-items:start;
}
.fv .hero2-float--l{ top:clamp(180px,24%,300px) }

/* グレー地の上なので、白いカードの輪郭は弱めでよい */
.fv .stepcard,
.fv .chip{
  border-color:rgba(24,24,27,.06);
  box-shadow:var(--fv-sh-rest);
}

/* 左側の入力先と実行例も、1つずつ順送りで表示する。
   floaty は表示後も続く穏やかな浮遊、fvSideIn は初回の透明度だけを担当する。 */
.fv .chip,
.fv .stepcard{
  animation-name:fvSideIn,floaty;
  animation-duration:.46s,6s;
  animation-timing-function:ease-out,ease-in-out;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
}
.fv .chip:nth-child(1){animation-delay:.10s,.56s}
.fv .chip:nth-child(2){animation-delay:.15s,.61s}
.fv .chip:nth-child(3){animation-delay:.20s,.66s}
.fv .chip:nth-child(4){animation-delay:.25s,.71s}
.fv .chip:nth-child(5){animation-delay:.30s,.76s}
.fv .chip:nth-child(6){animation-delay:.35s,.81s}
.fv .stepcard:nth-child(1){animation-delay:0s,.46s}
.fv .stepcard:nth-child(2){animation-delay:.08s,.54s}
.fv .stepcard:nth-child(3){animation-delay:.16s,.62s}
@keyframes fvSideIn{
  from{opacity:0;filter:blur(5px)}
  to{opacity:1;filter:blur(0)}
}

/* ------------------------------------------------------------
   レスポンシブ
------------------------------------------------------------ */
@media (max-width:1180px){
  /* 中央の情報を優先する。円環と左の列は隠す */
  .fv-ring{ display:none }
  .fv .hero2-float{ display:none }
  .fv h1{max-width:92vw;font-size:clamp(36px,6vw,58px)}
}
@media (max-width:640px){
  .hero2.fv{ padding-bottom:clamp(44px,7vw,64px) }
  .fv-mascots{ gap:0 }
  .proof.fv-proof{ margin-top:-32px; border-radius:32px 32px 0 0 }
}

/* ------------------------------------------------------------
   動きを減らす設定：すべて止める（必須）
   opacity:0 のまま取り残される事故を防ぐため、表示状態を明示する。
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .fv-circle,
  .fv-circle__item,
  .fv-circle__item img,
  .fv-mascot,
  .fv .chip,
  .fv .stepcard{
    animation:none !important;
  }
  .fv-circle__item,
  .fv-mascot,
  .fv .chip,
  .fv .stepcard{ opacity:1 }
}


/* ============================================================
   40. UIパーツ（線アイコンを立体グラフィックに置き換える）

   このセクションは必ず末尾に置くこと。
   既存の .ck / .arw / .faq summary::after を上書きするため、
   前に置くと効きません。
============================================================ */
/* ============================================================
   UI PARTS — 3Dクレイ風グラフィック（線のSVGアイコンの置き換え）
   ------------------------------------------------------------
   素材:  images/ui/*.png   （14枚 / 256x256 / 背景透過 / 文字なし）
   前提:  このCSSは assets/style.css の末尾に貼る想定。
          そのため url() は assets/ からの相対パス `../images/ui/…`。
          別の場所に置く場合はパスだけ直すこと。

   トーン: 左上から光 → 右下に柔らかい影。影は画像に焼き込み済み。
          **CSSで box-shadow / filter:drop-shadow を足さないこと。**
          影が二重になり、cards/*.png との統一が崩れる。
   ============================================================ */

/* ------------------------------------------------------------
   1. 基底クラス
   すべてのパーツは `<i class="ui ui-check" aria-hidden="true"></i>` の形で置く。
   空要素でよい（画像は background なので中身は不要）。
   意味のあるアイコンには親側で aria-label を付けること。
------------------------------------------------------------ */
.ui{
  display:inline-block;
  flex:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;   /* 縦横比の違う矢印もはみ出さない */
  vertical-align:middle;
  /* 画像に影が入っているので、はみ出しを切らない */
  overflow:visible;
}

/* 既存のコンテナに .ui を足して使う場合、
   元の丸背景・枠線・グラデを必ず殺す（画像側が台座を持っているため） */
.ui.is-bare,
.ck.ui, .b6-ck.ui, .pr-ck.ui{
  background-color:transparent;
  background-image:inherit;   /* ↓の個別ルールで上書きされる */
  border:0;
  box-shadow:none;
}
.ck.ui, .b6-ck.ui, .pr-ck.ui{ border-radius:0; }


/* ============================================================
   2. カルーセル・ナビゲーション
   ============================================================ */

/* 左右送りボタン（白い丸ボタン＋青い矢印）
   ボタン自体が画像なので、囲みの<button>は透明にする */
.ui-arrow-left { background-image:url('../images/ui/ui_arrow_left.png');  width:48px; height:48px; }
.ui-arrow-right{ background-image:url('../images/ui/ui_arrow_right.png'); width:48px; height:48px; }

.ui-navbtn{
  display:inline-grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  transition:transform .2s ease;
}
.ui-navbtn:hover{ transform:translateY(-2px); }
.ui-navbtn:active{ transform:translateY(0); }
.ui-navbtn:focus-visible{ outline:2px solid var(--blue,#0176F0); outline-offset:4px; border-radius:50%; }
.ui-navbtn[disabled]{ opacity:.35; cursor:default; transform:none; }

/* 現在位置ドット。
   active / idle は画像の中で既に大きさ差が付いている（idleの方が小さく描かれている）。
   よってCSSの箱は同じにする。ここでサイズを変えないこと。 */
.ui-dot-active{ background-image:url('../images/ui/ui_dot_active.png'); width:16px; height:16px; }
.ui-dot-idle  { background-image:url('../images/ui/ui_dot_idle.png');   width:16px; height:16px; }

.ui-dots{ display:flex; align-items:center; justify-content:center; gap:10px; }
.ui-dots button{ padding:0; border:0; background:none; cursor:pointer; line-height:0; }
.ui-dots button:focus-visible{ outline:2px solid var(--blue,#0176F0); outline-offset:3px; border-radius:50%; }


/* ============================================================
   3. ボタンに添えるアイコン
   既存の `.ibtn .arw`（白い丸チップ）は残したまま、
   中の <svg> だけを差し替える想定。青い矢印が青いボタンに沈まないため。
   ============================================================ */
.ui-arrow-go{ background-image:url('../images/ui/ui_arrow_go.png'); width:.72em; height:.72em; }
.ui-download{ background-image:url('../images/ui/ui_download.png'); width:.78em; height:.78em; }
.ui-chat    { background-image:url('../images/ui/ui_chat.png');     width:.78em; height:.78em; }

/* primary（青紫グラデ）の丸チップは半透明だと青い矢印が読めない。白に寄せる */
.ibtn-primary .arw:has(.ui){ background:rgba(255,255,255,.92); }
.ibtn-ghost   .arw:has(.ui){ background:rgba(22,104,240,.08); }

/* :has() 非対応環境向けの明示クラス（HTML側で .arw--ui を足しても同じ結果） */
.ibtn-primary .arw--ui{ background:rgba(255,255,255,.92); }
.ibtn-ghost   .arw--ui{ background:rgba(22,104,240,.08); }

/* チップを使わず矢印を裸で置く場合 */
.ibtn .arw.is-bare{ background:none; width:1.15em; height:1.15em; }


/* ============================================================
   4. リスト・状態
   ============================================================ */

/* チェック：青緑→青の丸台座＋白いチェック（台座ごと画像） */
.ui-check{ background-image:url('../images/ui/ui_check.png'); width:22px; height:22px; }

/* ダッシュ：非対応。淡いグレーの丸台座＋グレーの棒 */
.ui-dash { background-image:url('../images/ui/ui_dash.png');  width:22px; height:22px; }

/* 既存の .ck / .b6-ck / .pr-ck をそのまま活かす差し替え。
   HTMLは <span class="b6-ck b6-ck--on"><svg…></span>
        → <span class="b6-ck b6-ck--on ui ui-check"></span> */
.ck.ui-check,  .b6-ck.ui-check,  .pr-ck.ui-check,
.ck.ui-dash,   .b6-ck.ui-dash,   .pr-ck.ui-dash{
  background-color:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:inline-block;
  place-items:initial;
}
/* 元の指定より1px大きい箱がちょうど良い（画像に影の余白があるため） */
.b6-ck.ui-check, .b6-ck.ui-dash,
.pr-ck.ui-check, .pr-ck.ui-dash{ width:23px; height:23px; }

/* FAQの開閉マーク。
   <details>/<summary> はHTMLを触らずCSSだけで差し替えられる。 */
.ui-plus { background-image:url('../images/ui/ui_plus.png');  width:18px; height:18px; }
.ui-minus{ background-image:url('../images/ui/ui_minus.png'); width:18px; height:18px; }

.faq summary::after{
  /* 既存のCSS三角（border-right/bottom + rotate45）を打ち消して画像にする */
  content:'';
  position:absolute;
  right:24px;
  top:50%;
  width:18px;
  height:18px;
  border:0;
  transform:translateY(-50%);
  background:center/contain no-repeat url('../images/ui/ui_plus.png');
  transition:opacity .2s ease;
}
.faq details[open] summary::after{
  transform:translateY(-50%);
  background-image:url('../images/ui/ui_minus.png');
}


/* ============================================================
   5. 区切り・装飾
   ============================================================ */

/* 見出しの横に添えるグラフィック。
   仕様書どおり「文字サイズの1.25〜1.3倍」。em指定なので見出し側で自動追従する。 */
.ui-sparkle{ background-image:url('../images/ui/ui_sparkle.png'); width:1.28em; height:1.28em; }
.ui-target { background-image:url('../images/ui/ui_target.png');  width:1.28em; height:1.28em; }

/* 見出しに並べるときの共通レイアウト */
.ui-head{ display:flex; align-items:center; gap:.28em; }
.ui-head .ui{ position:relative; top:-.04em; }

/* 次のセクションへ誘導する下向きの印 */
.ui-pin{ background-image:url('../images/ui/ui_pin.png'); width:44px; height:56px; }

/* ふわっと上下する（仕様書 4-(b) の無限ループ。監視は使わない） */
@keyframes uiPinFloat{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-8px) }
}
.ui-pin--float{ animation:uiPinFloat 2.4s ease-in-out infinite; }


/* ============================================================
   6. 高DPI / 動きの抑制
   ============================================================ */
/* 素材は256pxなので、上記の表示サイズなら2〜5倍の密度があり追加対応は不要 */

@media (prefers-reduced-motion: reduce){
  .ui-navbtn,
  .ui-pin--float,
  .faq summary::after{
    animation:none !important;
    transition:none !important;
  }
  .ui-navbtn:hover{ transform:none; }
}

/* ============================================================
   41. UIパーツを既存のクラスに当てる

   40章で用意した画像を、実際にHTMLで使われているクラス名へ
   結びつけます。HTMLを書き換えずに置き換えるための対応表です。

   新しくパーツを足したときは、ここに1行足してください。
============================================================ */

/* ---- チェックとダッシュ（料金プランの対応・非対応） ---- */
.b6-ck,
.ck,
.pr-ck{
  background-image:url('../images/ui/ui_check.png') !important;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:transparent !important;
  border:0 !important;box-shadow:none !important;
  width:22px;height:22px;flex:none;
}
.b6-ck--off{
  background-image:url('../images/ui/ui_dash.png') !important;
}
/* 元の線アイコンは隠す（画像に置き換わったため） */
.b6-ck svg,.ck svg,.pr-ck svg{display:none}

/* ---- ボタンの中の矢印 ----
   丸いチップは残し、中身の線アイコンだけ画像に差し替えます。
   チップごと画像にすると、ボタンの色に沈んで見えなくなるためです。 */
.arw{background:rgba(255,255,255,.92) !important}
.arw svg{display:none}
.arw::after{
  content:'';display:block;width:.68em;height:.68em;
  background:url('../images/ui/ui_arrow_go.png') center/contain no-repeat;
}
.cta--stack .arw::after{width:.9em;height:.9em}
.ibtn-ghost .arw{background:rgba(22,104,240,.12) !important}

/* ---- FAQ の開閉マーク ---- */
.b6-faq__item summary::after,
.faq summary::after{
  content:'' !important;
  width:20px;height:20px;border:0 !important;transform:none !important;
  background:url('../images/ui/ui_plus.png') center/contain no-repeat;
  transition:opacity .2s;
}
.b6-faq__item summary::after{
  width:34px;height:34px;border:1px solid #e8c8b3 !important;border-radius:11px;
  background:
    linear-gradient(#9a4e32,#9a4e32) center/14px 2.5px no-repeat,
    linear-gradient(#9a4e32,#9a4e32) center/2.5px 14px no-repeat,
    #f7e7d7;
}
.b6-faq__item[open] summary::after,
.faq details[open] summary::after{
  background-image:url('../images/ui/ui_minus.png');
}
.b6-faq__item[open] summary::after{
  background:
    linear-gradient(#9a4e32,#9a4e32) center/14px 2.5px no-repeat,
    #f7e7d7;
}

/* ---- 見出しに添えるきらめき・的 ----
   使いたい見出しに .has-sparkle か .has-target を付けてください */
.has-sparkle::after,
.has-target::after{
  content:'';display:inline-block;vertical-align:-.18em;
  width:1.24em;height:1.24em;margin-left:.24em;
}
.has-sparkle::after{background:url('../images/ui/ui_sparkle.png') center/contain no-repeat}
.has-target::after{background:url('../images/ui/ui_target.png') center/contain no-repeat}


/* ============================================================
   42. 下層ページ：できること・料金・導入の流れ
============================================================ */
/* ============================================================================
   下層3ページ（can-do / price / flow）の作り込み用CSS

   統合先：assets/pages.css の末尾に、このファイルの中身をそのまま貼ってください。
   （style.css の :root トークンを前提にしています。style.css より後ろで読むこと）

   使っているトークン（すべて style.css の28章 :root で定義済み）
     --panel-blue / --panel-yellow / --panel-green / --panel-pink / --panel-purple
     --ink / --sub / --sub2 / --line / --surface
     --r-panel(60px) / --r-card(40px) / --r-item(24px)
     --sh-rest / --sh-hover / --sec-y / --blue / --purple / --blue-dp / --purple-dp

   接頭辞
     .pg-  … 3ページ共通の器（色面パネル・見出しグラフィック・注記）
     .cd-  … can-do.html
     .pr-  … price.html
     .fl-  … flow.html
   既存クラスは一切上書きしていません（.panel--* の背景色だけ借りています）。

   動き：スクロール監視（IntersectionObserver）は使いません。
        無限ループ（浮遊・回転）と、読み込み時1回だけの2種類のみです。
============================================================================ */


/* ============================================================================
   0. 共通の器
============================================================================ */

/* ---- 色面セクション ----
   ベタ塗りの矩形は作らない。全周角丸のカードとして白の上に浮かせる。
   .pg-panelwrap が白の余白、.pg-panel が色面本体。
   使い方：
     <section class="pg-panelwrap">
       <div class="panel panel--green pg-panel"> … <div class="wrap">…</div> </div>
     </section>
   背景色と文字色の切り替えは style.css の .panel--* をそのまま使います。 */
.pg-panelwrap{
  padding-block:clamp(28px,3.4vw,56px);
  padding-inline:clamp(14px,3.2vw,48px);
}
.contact-form-top{
  /* 資料ページ先頭の黄色カードと同じ開始位置に固定する */
  padding:72px 5vw 0;
}
.pg-panel{
  position:relative;overflow:hidden;
  border-radius:var(--r-panel);
  padding:clamp(48px,5.6vw,80px) 0 clamp(56px,6.4vw,104px);
  color:#fff;
}
/* 上端だけ角丸にして、下から生えてくる型（フッター直前などに使う） */
.pg-panel--rise{border-radius:var(--r-panel) var(--r-panel) 0 0}

/* style.css の .panel--* には紫がありません（トークンだけ存在）。ここで足します。
   既存クラスの上書きではなく、新規の追加です。 */
.panel--purple{background:var(--panel-purple)}

/* 黄とピンクの面では白ヌキ文字が読めないため、必ず濃色に落とす */
.panel--yellow.pg-panel,
.panel--pink.pg-panel{color:var(--ink)}
.panel--yellow.pg-panel .sec-lead,
.panel--pink.pg-panel .sec-lead{color:var(--ink);opacity:.78}

/* パネル内の見出しブロック。左寄せ／中央寄せは .sec-head の既存指定に従う */
.pg-panel .sec-head{margin-bottom:clamp(28px,3.4vw,48px)}
.cd-custom-title{text-align:center}

@media (max-width:640px){
  .cd-custom-title{font-size:clamp(23px,7vw,44px)}
}


/* ---- 見出しの横に置くグラフィック ----
   仕様：文字サイズの 1.25〜1.3倍。ここがポップさの主要因なので必ず入れる。
   height を em で持たせているため、見出しが縮んでも比率が崩れません。 */
.pg-hic{
  display:inline-block;vertical-align:-.28em;
  width:auto;height:1.28em;
  margin-left:.24em;
  filter:drop-shadow(0 10px 18px rgba(24,24,27,.18));
}
/* 見出しの左に置きたいとき */
.pg-hic--lead{margin-left:0;margin-right:.24em}


/* ---- はみ出す装飾 ----
   数百px はみ出させて、パネル側の overflow:hidden で切る。
   z-index は 装飾=1 / コンテンツ=10（.panel .wrap で指定済み）。 */
.pg-deco{position:absolute;z-index:1;pointer-events:none;display:block}

.pg-deco--ring{
  top:-240px;right:-200px;width:700px;height:700px;border-radius:50%;
  border:2px solid rgba(255,255,255,.34);opacity:.5;
  animation:pgFloat 7s ease-in-out infinite;
}
.pg-deco--ring::after{
  content:'';position:absolute;inset:110px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
}
.pg-deco--dots{
  bottom:-200px;left:-170px;width:680px;height:680px;
  background-image:radial-gradient(rgba(36,41,47,.5) 2.4px, transparent 2.6px);
  background-size:26px 26px;opacity:.2;transform:rotate(-8deg);
}
.pg-deco--dots-w{
  top:-180px;right:-200px;width:680px;height:680px;
  background-image:radial-gradient(rgba(255,255,255,.85) 2.6px, transparent 2.8px);
  background-size:28px 28px;opacity:.22;transform:rotate(10deg);
}
.pg-deco--frame{
  right:-180px;bottom:-220px;width:560px;height:560px;
  border:3px solid rgba(36,41,47,.34);border-radius:80px;
  opacity:.28;transform:rotate(16deg);
}
.pg-deco--frame::after{
  content:'';position:absolute;inset:60px;
  border:3px solid rgba(36,41,47,.3);border-radius:56px;
}
.pg-deco--rays{
  top:-300px;left:-260px;width:840px;height:840px;border-radius:50%;
  background:repeating-conic-gradient(
    rgba(255,255,255,.5) 0deg 6deg, transparent 6deg 18deg);
  opacity:.15;
  animation:pgSpin 90s linear infinite;
}

@keyframes pgSpin{to{transform:rotate(360deg)}}
@keyframes pgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes pgBob{0%,100%{transform:translateY(0) scale(.98)}50%{transform:translateY(-12px) scale(1)}}


/* ---- 注記の帯（別途費用・補足など） ---- */
.pg-note{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:clamp(20px,2.4vw,30px);
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  border-radius:var(--r-item);
  background:var(--surface);border:1px solid var(--line);
}
.pg-note__mark{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.pg-note__mark svg{width:13px;height:13px}
.pg-note__mark--warm{
  background:#f4ddd3;color:#8f4938;
}
.pg-note__mark--caution{
  display:grid;place-items:center;
  min-width:42px;width:auto;height:24px;padding:0 9px;
  border-radius:999px;background:#f4ddd3;color:#8f4938;
  font-size:11px;font-weight:800;line-height:1;letter-spacing:.06em;
}
.pg-note p{font-size:13.5px;color:var(--sub);line-height:1.85;letter-spacing:-.01em}
.pg-note b{color:var(--ink);font-weight:800}
/* 色面の上に置くとき */
.pg-panel .pg-note{background:rgba(255,255,255,.9);border-color:rgba(24,24,27,.06)}


/* ---- 読み込み時に1回だけ動かす ----
   スクロール監視は使いません。画面外の要素は「動き終わった状態」で待機します。 */
.pg-rise{opacity:0;animation:pgRise .9s cubic-bezier(.68,0,.265,1.2) forwards}
.pg-rise--1{animation-delay:0s;animation-duration:.8s}
.pg-rise--2{animation-delay:.1s;animation-duration:1.2s}
.pg-rise--3{animation-delay:.1s;animation-duration:1.4s}
@keyframes pgRise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}


/* ============================================================================
   1. できること（can-do.html）
============================================================================ */

/* ---- 1-1. 青パネル：150以上／13カテゴリ ---------------------------------- */
/* 絵の列を広げすぎると見出しが3行に折れます。264px が上限の目安です。
   文言を長くするときは、この幅も一緒に見直してください。 */
.cd-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,264px);
  gap:clamp(24px,3.6vw,52px);align-items:center;
}
.cd-top__art{justify-self:center;width:min(100%,264px)}
.cd-top__art img{
  width:100%;
  filter:drop-shadow(0 26px 44px rgba(24,24,27,.28));
  animation:pgBob 6s ease-in-out infinite;
}

/* 巨大数字の2枚組 */
.cd-figs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(24px,3vw,40px);
  scroll-margin-top:var(--header-h);
}
.cd-fig{
  padding:clamp(24px,3vw,44px);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cd-fig:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.cd-fig:first-child{background:#fff;color:var(--ink);border-color:rgba(36,41,47,.08)}
.cd-fig--alt{background:#fff;color:var(--ink);border-color:rgba(36,41,47,.08)}
.cd-fig__num{display:flex;align-items:baseline;gap:.12em;line-height:1}
.cd-fig__num .en{font-size:clamp(56px,9vw,120px);font-weight:700;letter-spacing:.01em}
.cd-fig__num small{font-size:clamp(16px,1.9vw,26px);font-weight:700;letter-spacing:-.02em}
.cd-fig p{
  margin-top:12px;font-size:clamp(13px,1.1vw,15px);line-height:1.6;opacity:.9;
}
.cd-fig--alt p{opacity:.8;color:var(--sub)}

/* 13カテゴリの索引。押すと下の該当カードへ飛ぶ */
.cd-index{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(26px,3.2vw,42px);
}
.cd-index a{
  display:flex;align-items:center;gap:9px;
  padding:8px 16px 8px 8px;border-radius:999px;
  background:#fff;color:var(--ink);text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:-.01em;
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cd-index a:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.cd-index img{width:30px;height:30px;flex:none;object-fit:contain}


/* ---- 1-2. 13カテゴリの本体 ---------------------------------------------- */
.cd-list{display:grid;gap:clamp(16px,2vw,24px)}

.cd-cat{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,196px) minmax(0,1fr);
  gap:clamp(20px,2.8vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,44px);
  border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  scroll-margin-top:120px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cd-cat:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

/* 左列：大きな絵と、背後に敷く巨大な番号 */
.cd-cat__side{position:relative;z-index:10;text-align:center}
.cd-cat__ghost{
  position:absolute;z-index:1;pointer-events:none;
  left:-14px;top:-38px;
  font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:.02em;
  font-size:clamp(90px,11vw,150px);line-height:1;
  color:rgba(1,118,240,.07);
}
.cd-cat__art{
  position:relative;z-index:10;
  width:clamp(104px,13vw,168px);height:auto;margin-inline:auto;
  filter:drop-shadow(0 18px 26px rgba(24,24,27,.16));
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cd-cat:hover .cd-cat__art{transform:translateY(-6px) scale(1.04)}
.cd-cat__no{
  display:inline-block;margin-top:14px;
  padding:5px 15px;border-radius:999px;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  background:var(--surface);color:var(--sub);border:1px solid var(--line);
}

/* 右列：見出しと項目 */
.cd-cat__body{position:relative;z-index:10;min-width:0}
.cd-cat__body h3{
  font-size:clamp(19px,1.9vw,25px);font-weight:700;letter-spacing:-.04em;line-height:1.3;
}
.cd-cat__body h3 + p{
  margin-top:10px;font-size:13.5px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.cd-cat__items{
  list-style:none;margin:0;padding:18px 0 0;
  margin-top:18px;border-top:1px solid var(--line);
  columns:2;column-gap:clamp(20px,2.4vw,34px);
}
.cd-cat__items li{
  position:relative;padding-left:17px;margin-bottom:9px;
  break-inside:avoid;
  font-size:13.5px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.cd-cat__items li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(120deg,var(--blue),var(--purple));opacity:.5;
}


/* ---- 1-3. ピンクパネル：向き・不向き ------------------------------------ */
.cd-fit{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.cd-fitcard{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,36px);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(36,41,47,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cd-fitcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.cd-fitcard__art{
  width:clamp(64px,7vw,88px);height:auto;margin-bottom:16px;
  filter:drop-shadow(0 12px 18px rgba(24,24,27,.16));
}
.cd-fitcard h3{
  font-size:clamp(17px,1.6vw,21px);font-weight:700;letter-spacing:-.04em;line-height:1.3;
  color:var(--ink);
}
.cd-fitcard ul{
  list-style:none;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(36,41,47,.1);
  display:grid;gap:10px;
}
.cd-fitcard li{
  position:relative;padding-left:17px;
  font-size:13.5px;color:var(--sub2);line-height:1.6;letter-spacing:-.01em;
}
.cd-fitcard li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.4;
}
.cd-fitcard--key{background:#fff}
.cd-fitcard--key li::before{background:var(--blue);opacity:1}


/* ============================================================================
   2. 料金（price.html）
============================================================================ */

/* ---- 2-1. プラン2枚 ------------------------------------------------------ */
.pr-plans-section{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(-22px,-1.4vw,-10px);
  padding-top:clamp(112px,8vw,136px);
  padding-bottom:clamp(100px,10vw,150px);
}
/* Yoomの料金ページの大きなリボン状背景を、ZETTAiの青系に置き換える。
   SVGは装飾専用で、カードより後ろの1枚の面として扱う。 */
.pr-plans-section::before{
  content:'';position:absolute;z-index:-2;pointer-events:none;
  inset:-5% -8% -4%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cpath d='M-170 390C110 350 245 125 535 175C820 225 885 485 1120 500C1370 515 1495 330 1770 425' fill='none' stroke='%23cbdcff' stroke-width='235' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-80 858C155 760 258 590 438 565' fill='none' stroke='%23e0e8ff' stroke-width='112' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.pr-plans-section::after{
  content:'';position:absolute;z-index:-3;pointer-events:none;
  inset:0;
  background:linear-gradient(180deg,#f9fbff 0%,#f4f7ff 54%,#fff 100%);
}
.pr-plans-section > .wrap{position:relative;z-index:1}

.pr-plans{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,28px);align-items:stretch;
}
.pr-plan{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(30px,3.6vw,52px);
  border-radius:var(--r-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pr-plan__inner{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}

/* おすすめ側：白背景にアクセントカラーで主役感を出す */
.pr-plan--main{
  overflow:visible;
  background:#fff;border:1px solid var(--line);
  color:var(--ink);
  box-shadow:var(--sh-rest);
}
.pr-plan--main:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-hover);
}
.pr-plan__deco{display:none}
.pr-plan__peek{
  position:absolute;z-index:11;pointer-events:none;
  right:clamp(24px,4vw,64px);bottom:calc(100% - 10px);
  width:clamp(120px,9.6vw,152px);height:auto;
  filter:drop-shadow(0 12px 16px rgba(24,24,27,.14));
}
.pr-plan--sub{
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
}
.pr-plan--sub:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

.pr-plan__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pr-plan__art{
  width:clamp(56px,6vw,76px);height:auto;flex:none;
  filter:drop-shadow(0 12px 18px rgba(24,24,27,.22));
}
.pr-plan__flag{
  padding:1px 2px 4px;border-radius:0;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1.3;
  background:transparent;color:#704536;
  border-bottom:3px solid #cf745d;
}
.pr-plan__for{
  margin-top:18px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--sub);
}
.pr-plan--main .pr-plan__for{color:var(--sub)}
.pr-plan__name{
  margin-top:6px;
  font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.04em;line-height:1.3;
}

/* 金額。英数だけ Poppins にして大きく、字間をプラスに振る */
.pr-plan__price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.1em;
  margin-top:clamp(16px,2vw,24px);line-height:1;
}
.pr-plan__cur{font-size:clamp(14px,1.3vw,17px);font-weight:700;opacity:.8;margin-right:.2em}
.pr-plan__num{font-size:clamp(56px,8.4vw,116px);font-weight:700;letter-spacing:.01em}
.pr-plan__unit{font-size:clamp(17px,1.9vw,26px);font-weight:700;letter-spacing:-.02em}
.pr-plan__per{opacity:.72;font-size:.82em;margin-left:.12em}
.pr-plan--sub .pr-plan__num{
  color:var(--ink);
}
.pr-plan--main .pr-plan__num{
  color:var(--ink);
}
.pr-plan__sub{
  margin-top:12px;font-size:13.5px;line-height:1.6;letter-spacing:-.01em;color:var(--sub);
}
.pr-plan--main .pr-plan__sub{color:var(--sub)}

.pr-plan__list{
  list-style:none;
  margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);
  display:grid;gap:13px;
}
.pr-plan--main .pr-plan__list{border-top-color:var(--line)}
.pr-plan__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14px;line-height:1.6;letter-spacing:-.01em;
}
.pr-plan--sub .pr-plan__list li{color:var(--sub)}
.pr-plan--sub .pr-plan__list li b{color:var(--ink);font-weight:700}
.pr-plan--main .pr-plan__list li b{color:var(--ink);font-weight:700}
.pr-plan__list li.is-off{color:var(--sub);opacity:.9}

.pr-ck{
  flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;
}
.pr-ck svg{width:11px;height:11px}
.pr-plan--sub .pr-ck--on{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.pr-plan--main .pr-ck--on{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.pr-ck--off{background:var(--surface);border:1px solid var(--line);color:var(--sub)}

/* ボタンはカードの下端に揃える（2枚の高さが違っても崩れない） */
.pr-plan__btn{margin-top:auto;padding-top:clamp(24px,2.8vw,34px)}
.pr-plan__btn .ibtn{width:100%}
.pr-plan--main .ibtn-ghost{
  background:#fff;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:var(--sh-rest);
}
.pr-plan--main .ibtn-ghost:hover{box-shadow:var(--sh-hover)}
.pr-plan--main .ibtn-ghost .arw{background:rgba(22,104,240,.12);color:var(--blue)}
.pr-plan--sub .ibtn-ghost{border:1.5px solid var(--line)}

@media (max-width:700px){
  .pr-plans-section{
    margin-top:0;padding-top:132px;padding-bottom:86px;
  }
  .pr-plans-section::before{
    inset:0 -55%;
    background-size:auto 100%;
  }
  .pr-plan__peek{right:18px;bottom:calc(100% - 8px);width:112px}
}


/* ---- 2-2. 黄パネル：含まれるもの／含まれないもの ------------------------ */
.pr-incl{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
.pr-inclcard{
  position:relative;overflow:hidden;
  padding:clamp(26px,3vw,40px);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(36,41,47,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pr-inclcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.pr-inclcard__head{display:flex;align-items:center;gap:14px}
.pr-inclcard__head > div{min-width:0}
.pr-inclcard__art{
  width:clamp(56px,6vw,78px);height:auto;flex:none;
  filter:drop-shadow(0 12px 18px rgba(24,24,27,.16));
}
.pr-inclcard h3{
  font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-.04em;line-height:1.3;
  color:var(--ink);
}
.pr-inclcard__cap{
  display:inline-block;margin-top:6px;padding:4px 12px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
}
.pr-inclcard--in .pr-inclcard__cap{background:rgba(1,118,240,.12);color:var(--blue-dp)}
.pr-inclcard--out .pr-inclcard__cap{background:rgba(36,41,47,.1);color:var(--sub)}
.pr-inclcard ul{
  list-style:none;margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(36,41,47,.1);
  display:grid;gap:11px;
}
.pr-inclcard li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;color:var(--sub2);line-height:1.6;letter-spacing:-.01em;
}
.pr-inclcard li b{color:var(--ink);font-weight:700}
/* チェック／ダッシュの丸は .pr-ck を共用する。
   .pr-plan の中でしか色が付かないため、ここで単体版を足しておく。 */
.pr-inclcard .pr-ck--on{background:linear-gradient(120deg,var(--blue),var(--purple));color:#fff}
.pr-inclcard .pr-ck--off{background:var(--surface);border:1px solid rgba(36,41,47,.16);color:var(--sub)}


/* ---- 2-3. 紫パネル：どちらを選ぶか ------------------------------------- */
.pr-choose{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
  margin-bottom:clamp(20px,2.6vw,34px);
}
.pr-choosecard{
  display:flex;gap:16px;align-items:flex-start;
  padding:clamp(22px,2.6vw,32px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pr-choosecard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.pr-choosecard__no{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.24);
  font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;line-height:1;
}
.pr-choosecard h3{font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.pr-choosecard p{margin-top:8px;font-size:13.5px;line-height:1.6;opacity:.88}

/* 比較表は白いカードに載せる（紫の上に直接置くと罫線が沈む）

   color を必ず戻すこと。table.cmp の th / td は色を持たないセルがあり、
   そのままだとパネルから白を継承して白地に白文字になります。 */
.pr-table{
  border-radius:var(--r-card);overflow:hidden;
  background:#fff;border:1px solid rgba(36,41,47,.08);
  box-shadow:var(--sh-rest);
  color:var(--ink);
}
.pr-table .tablewrap{border:0;border-radius:0;box-shadow:none}
.pr-table table.cmp thead th{color:var(--ink)}
.pr-table table.cmp td{color:var(--ink)}
.pr-table table.cmp td.is-claw{color:var(--blue-dp)}


/* ============================================================================
   3. 導入の流れ（flow.html）
============================================================================ */

/* ---- 3-1. 3ステップの横レール --------------------------------------------
   箱の羅列をやめ、1本の線でつなぐ。線は .fl-rail::before の1本だけ。
   線の左右端は「最初と最後の丸の中心」に正確に合わせている
   （--fl-ring と --fl-gap から算出しているので、値を変えてもズレない）。 */
.fl-rail{
  --fl-gap:clamp(18px,2.4vw,34px);
  --fl-ring:clamp(84px,9vw,116px);
  --fl-no-gap:14px;
  --fl-no-width:clamp(50px,5vw,66px);
  list-style:none;margin:0;padding:0;
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--fl-gap);
}
.fl-rail::before{
  content:'';position:absolute;z-index:0;
  /* 各列の中心に丸を置くため、線の端も1列目・3列目の中心に合わせる */
  left:calc((100% - 2 * var(--fl-gap)) / 6);
  right:calc((100% - 2 * var(--fl-gap)) / 6);
  top:calc(var(--fl-ring) / 2 - 2px);
  height:4px;border-radius:4px;
  background:linear-gradient(90deg,
    rgba(1,118,240,.2) 0%,
    var(--blue) 20%,
    var(--purple) 82%,
    rgba(123,60,245,.2) 100%);
}
/* 線の上を流れる粒。無限ループのみ（スクロール監視は使わない） */
.fl-rail::after{
  content:'';position:absolute;z-index:0;
  left:calc((100% - 2 * var(--fl-gap)) / 6);
  right:calc((100% - 2 * var(--fl-gap)) / 6);
  top:calc(var(--fl-ring) / 2 - 2px);
  height:4px;border-radius:4px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.85) 0 14px, transparent 14px 40px);
  background-size:40px 4px;
  /* 線を途切れさせず、左右の長さを正確に比較できるようにする */
  display:none;
}
@keyframes flDash{from{background-position:0 0}to{background-position:40px 0}}

.fl-step{list-style:none;position:relative}

/* 線の上に乗る丸。中に生成画像を入れる */
.fl-step__marker{
  position:relative;z-index:1;
  display:block;
  min-height:var(--fl-ring);
  margin-bottom:clamp(20px,2.4vw,30px);
}
.fl-ring{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  flex:none;width:var(--fl-ring);height:var(--fl-ring);border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:#fff;border:2px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fl-ring img{width:74%;height:74%;object-fit:contain}
.fl-step:hover .fl-ring{transform:translateX(-50%) translateY(-4px);box-shadow:var(--sh-hover)}
.fl-step__no{
  position:absolute;left:calc(50% + var(--fl-ring) / 2 + var(--fl-no-gap));top:50%;
  /* 数字の背面だけ線を隠し、前後のレールは残す。 */
  z-index:2;transform:translateY(-50%);min-width:var(--fl-no-width);padding-inline:10px;
  font-family:'Poppins',sans-serif;letter-spacing:.02em;
  font-size:clamp(30px,3.2vw,44px);line-height:1;font-weight:700;
  background:#fff;color:rgba(36,41,47,.16);
}
/* 2番目だけ色面の丸にして、最重要であることを見せる */
.fl-step--key .fl-ring{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  border-color:transparent;
  box-shadow:0 8px 16px rgba(24,24,27,.1), 0 22px 42px -22px rgba(70,60,220,.85);
}
.fl-step--key .fl-step__no{
  background:linear-gradient(120deg,var(--blue),var(--purple)) text,#fff padding-box;
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;color:transparent;
}
/* タグは丸の行に置く。本文側に置くと3列の見出しの高さがズレる。
   背景は不透明にし、外側に白いリングを付けて線を切る */
.fl-step__tag{
  /* 線上から外し、左右の接続線が同じ長さに見えるようにする */
  position:absolute;left:calc(50% + var(--fl-ring) / 2 + var(--fl-no-gap) + var(--fl-no-width));top:-8px;
  transform:translateY(-100%);padding:0;
  font-size:11.5px;font-weight:800;letter-spacing:0;white-space:nowrap;line-height:1.3;
  background:none;color:var(--purple-dp);
  box-shadow:none;
}

/* FLOWの主張は強調色ではなく、本文と同じ黒で読み切らせる */
.fl-head h1 em{
  color:var(--ink);background:none;
  -webkit-text-fill-color:currentColor;
}

/* 資料ページは本文の読みやすさを優先し、青紫の見出し文字を黒に統一する。 */
.page-docs .label,
.page-docs .page-head h1 em,
.page-docs .section h2 em,
.page-docs .final h2 em{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
.docs-summary-title em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
.docs-slides-section{background:#f6f8fa}
.docs-slides-title em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* できることページの「150以上」は、他の見出しと同じ黒で統一する。 */
.page-capability .page-head h1 em{
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}

/* 線の下の本文。箱で囲わない */
.fl-step__body h3{
  font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.04em;line-height:1.3;
}
.fl-step__body p{
  margin-top:12px;font-size:14px;color:var(--sub);line-height:1.85;letter-spacing:-.01em;
}
.fl-step__body ul{
  list-style:none;
  margin-top:18px;padding-top:16px;display:grid;gap:9px;
  border-top:1px solid var(--line);
}
.fl-step__body li{
  position:relative;padding-left:17px;
  font-size:13px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.fl-step__body li::before{
  content:'';position:absolute;left:0;top:.58em;
  width:6px;height:6px;border-radius:50%;
  background:#b7654c;opacity:.7;
}
.fl-step--key .fl-step__body li::before{opacity:1}


/* ---- 3-2. 緑パネル：設置当日の縦レール ---------------------------------- */
.fl-day{
  --fl-node:clamp(56px,6vw,72px);
  position:relative;
  display:grid;gap:clamp(14px,1.8vw,22px);
}
/* 縦の線。丸の中心を通す */
.fl-day::before{
  content:'';position:absolute;z-index:0;
  left:calc(var(--fl-node) / 2 - 2px);
  top:calc(var(--fl-node) / 2);
  bottom:calc(var(--fl-node) / 2);
  width:4px;border-radius:4px;
  background:rgba(255,255,255,.5);
}
.fl-day__item{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--fl-node) minmax(0,1fr);
  gap:clamp(16px,2.2vw,28px);align-items:start;
}
.fl-day__node{
  flex:none;width:var(--fl-node);height:var(--fl-node);border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:#00795c;
  font-family:'Poppins',sans-serif;font-size:clamp(15px,1.5vw,19px);font-weight:700;line-height:1;
  box-shadow:0 8px 16px rgba(24,24,27,.14);
}
.fl-day__card{
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fl-day__card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.fl-day__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fl-day__card h3{font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.fl-day__time{
  padding:5px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:rgba(255,255,255,.9);color:#00795c;
}
.fl-day__card ol{
  list-style:none;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.3);
  display:grid;gap:9px;
}
.fl-day__card li{
  position:relative;padding-left:19px;
  font-size:13.5px;line-height:1.6;letter-spacing:-.01em;opacity:.94;
}
.fl-day__card li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:rgba(255,255,255,.85);
}
/* 合計時間の帯 */
.fl-day__total{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,2.6vw,32px);
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.9);color:var(--ink);
}
.fl-day__total .en{font-size:clamp(28px,3.4vw,44px);line-height:1;color:#00795c}
.fl-day__total .en small{font-size:.42em;font-weight:700;letter-spacing:-.02em;margin-left:.12em}
.fl-day__total p{font-size:13.5px;line-height:1.6;color:var(--sub)}
.fl-day__total b{color:var(--ink);font-weight:800}


/* ---- 3-3. 黄パネル：始める前の不安 -------------------------------------- */
/* details は白いカードのまま使う（黄の上に白が乗ると読みやすい） */
.fl-qa{max-width:900px;margin-inline:auto;display:grid;gap:12px}
.fl-qa details{
  background:#fff;border:1px solid rgba(36,41,47,.08);
  border-radius:var(--r-item);overflow:hidden;
  transition:box-shadow .2s ease;
}
.fl-qa details[open]{box-shadow:var(--sh-hover)}
.fl-qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:20px 58px 20px 24px;
  font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.5;color:var(--ink);
}
.fl-qa summary::-webkit-details-marker{display:none}
.fl-qa summary::after{
  content:'';position:absolute;right:26px;top:50%;
  width:9px;height:9px;border-right:2.4px solid var(--blue);border-bottom:2.4px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .24s ease;
}
.fl-qa details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.fl-qa .a{
  padding:0 24px 22px;
  font-size:13.5px;color:var(--sub);line-height:1.85;letter-spacing:-.01em;
}
.fl-qa .a b{color:var(--ink);font-weight:700}


/* ---- 3-4. ご用意いただくもの（白面） ------------------------------------ */
.fl-env{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
}
.fl-envcard{
  position:relative;overflow:hidden;
  display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  padding:clamp(26px,3.2vw,44px);
  border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fl-envcard:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
/* 同じ画像をもう1枚、大きく薄くしてカードの外へはみ出させる */
.fl-envcard__ghost{
  position:absolute;z-index:1;pointer-events:none;
  width:400px;height:auto;top:-170px;right:-190px;
  opacity:.07;filter:blur(1px);
}
.fl-envcard__icon{
  position:relative;z-index:10;flex:none;
  width:clamp(72px,8vw,110px);height:auto;
}
.fl-envcard__body{position:relative;z-index:10;min-width:0}
.fl-envcard h3{font-size:clamp(17px,1.7vw,22px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.fl-envcard ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.fl-envcard li{
  position:relative;padding-left:17px;
  font-size:13.5px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.fl-envcard li b{color:var(--ink);font-weight:700}
.fl-envcard li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(120deg,var(--blue),var(--purple));opacity:.5;
}


/* ============================================================================
   4. 画面が狭いとき
============================================================================ */
@media (max-width:1000px){
  .cd-cat{grid-template-columns:minmax(0,148px) minmax(0,1fr)}
  .cd-cat__items{columns:1}
  .cd-fit{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .pg-panelwrap{padding-inline:clamp(10px,2.6vw,20px)}
  .pg-panel{border-radius:var(--r-card)}

  /* モバイルではステップを独立して読ませるため、接続線は表示しない。 */
  .fl-rail{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}
  .fl-rail::before,
  .fl-rail::after{display:none}
  .fl-step__marker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .fl-ring,.fl-step__no,.fl-step__tag{position:static;transform:none}
  .fl-step__no{min-width:0}

  .cd-top{grid-template-columns:minmax(0,1fr)}
  /* モバイルではOVERVIEWの書類イラストを省き、本文と数値カードを優先する。 */
  .cd-top__art{display:none}
  .cd-figs{grid-template-columns:minmax(0,1fr)}

  .cd-cat{grid-template-columns:minmax(0,1fr);gap:20px}
  .cd-cat__side{display:flex;align-items:center;gap:16px;text-align:left}
  .cd-cat__art{width:clamp(72px,18vw,104px);margin-inline:0}
  .cd-cat__no{margin-top:0}
  .cd-cat__ghost{left:auto;right:-6px;top:-28px}

  .pr-plans{grid-template-columns:minmax(0,1fr)}
  .pr-incl{grid-template-columns:minmax(0,1fr)}
  .pr-choose{grid-template-columns:minmax(0,1fr)}

  .fl-env{grid-template-columns:minmax(0,1fr)}
  .fl-envcard{flex-direction:column}
}

@media (max-width:560px){
  .fl-day{--fl-node:48px}
  .fl-day__item{grid-template-columns:var(--fl-node) minmax(0,1fr);gap:14px}
  .cd-index a{font-size:12px;padding:6px 13px 6px 6px}
  .cd-index img{width:26px;height:26px}
}


/* ============================================================================
   5. 動きを減らす設定の端末では止める（仕様の必須項目）
============================================================================ */
@media (prefers-reduced-motion:reduce){
  .pg-deco--ring,
  .pg-deco--rays,
  .cd-top__art img,
  .fl-rail::after{animation:none}
  .pg-rise{opacity:1;animation:none}
  .cd-cat,.cd-fig,.cd-fitcard,.cd-index a,
  .pr-plan,.pr-inclcard,.pr-choosecard,
  .fl-ring,.fl-day__card,.fl-envcard,.cd-cat__art{transition:none}
  .cd-cat:hover,.cd-fig:hover,.cd-fitcard:hover,.cd-index a:hover,
  .pr-plan:hover,.pr-inclcard:hover,.pr-choosecard:hover,
  .fl-step:hover .fl-ring,.fl-day__card:hover,.fl-envcard:hover,
  .cd-cat:hover .cd-cat__art{transform:none}
}


/* ============================================================
   43. 下層ページ：OpenClaw / Hermes Agent
============================================================ */
/* ============================================================================
   pages_oc_hm.css — openclaw.html / hermes.html 専用

   ■ 統合先
     assets/style.css の「末尾」に追記してください。
     既存クラスを上書きしている箇所（.wall / .cmp 系）は一切ありません。
     すべて新規のクラスで、接頭辞は3種類だけです。

       .ochm-*  … 2ページ共通（色面パネル・比較メーター・見出しグラフィック）
       .oc-*    … openclaw.html だけで使う
       .hm-*    … hermes.html だけで使う

   ■ 使っている画像（すべて Codex 生成・背景透過・文字なし）
     images/pages/oc_card_channels.png / oc_card_browser.png / oc_card_shell.png
     images/pages/oc_head_gateway.png  / oc_head_connect.png / oc_head_compare.png
     images/pages/oc_panel_gateway.png
     images/pages/hm_card_memory.png   / hm_card_skilldoc.png / hm_card_models.png
     images/pages/hm_head_grow.png     / hm_head_install.png  / hm_head_compare.png
     images/pages/hm_panel_memory.png

   ■ 動き
     JavaScript は書いていません。スクロール監視（IntersectionObserver）は0件です。
     動きは次の2種類だけです。
       (a) 無限ループ … 浮遊 / 回転 / マーキー
       (b) 読み込み時に1回 … 比較メーターのバーが伸びる
     すべて prefers-reduced-motion: reduce で停止します（最終節）。
============================================================================ */


/* ============================================================================
   A. 共通パーツ
============================================================================ */

/* ---- A-0. 画面には出さず、読み上げにだけ渡す文字 --------------------------
   装飾扱い（aria-hidden）にした帯の内容を、音声環境へ伝えるために使います。 */
.ochm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ---- A-1. 見出しの横に置くグラフィック --------------------------------------
   仕様：文字サイズの 1.25〜1.3倍。
   h2 は clamp(25px,3.2vw,44px) なので、その1.3倍を指定しています。
   ページ内の「ポップさ」はほぼこれが作っています。減らさないでください。 */
.ochm-hd-ic{
  display:inline-block;vertical-align:-.3em;
  width:clamp(40px,5.4vw,72px);height:auto;
  margin-left:.2em;
  filter:drop-shadow(0 8px 16px rgba(24,24,27,.18));
}
/* パネルの中（色面の上）に置くときは、影を少し強めて面から浮かせる */
.ochm-panel .ochm-hd-ic{filter:drop-shadow(0 10px 20px rgba(24,24,27,.26))}


/* ---- A-2. 下層ページのヘッダーに足す図 ---------------------------------------
   .page-head は style.css 22章で定義済み。ここでは中身を2カラムにして
   右に大きな図を浮かせるだけです。1000px 以下では図を消して文字を優先します。 */
.ochm-lead{
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);
  align-items:center;
}
.ochm-lead__art{
  width:clamp(200px,24vw,320px);flex:none;
  animation:ochmFloat 5.4s ease-in-out infinite;
}
.ochm-lead__art img{filter:drop-shadow(0 26px 40px rgba(24,24,27,.18))}

/* 事実だけを並べるピル（数字ではなく性質を書く場所） */
.ochm-facts{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;
}
.ochm-facts li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  font-size:13px;font-weight:700;letter-spacing:-.01em;
}
.ochm-facts li::before{
  content:'';width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.ochm-facts .en{letter-spacing:.02em}
.ochm-hero-cta{margin-top:28px;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.ochm-hero-cta .ibtn{min-width:190px}

@media (max-width:1000px){
  .ochm-lead{grid-template-columns:1fr}
  .ochm-lead__art{display:none}
}


/* ============================================================================
   B. 色面パネル

   仕様の大原則：ベタ塗りの矩形を作らない。
   使えるのは次の2形だけです。
     .ochm-panel            … 全周角丸 60px のカードとして白の上に浮かせる
     .ochm-panel--flush     … 上端だけ角丸 60px。下から生えてくる（幅いっぱい）
============================================================================ */
.ochm-panelsec{padding-block:clamp(40px,4.4vw,72px)}

.ochm-panel{
  --pad-x:clamp(26px,4vw,72px);
  position:relative;overflow:hidden;
  border-radius:60px;
  padding:clamp(44px,5vw,80px) var(--pad-x) clamp(56px,6.6vw,120px);
  color:#fff;
}
.ochm-panel--blue{background:var(--panel-blue)}
.oc-architecture-panel{
  background:linear-gradient(145deg,#ff3b4f 0%,#e31b33 50%,#a90b24 100%);
}
.ochm-panel--purple{background:var(--panel-purple)}
/* CONNECT セクションは黒い外枠カードを使わず、ページの白地に直接載せる。 */
.ochm-panel--dark{
  background:transparent;
  border-radius:0;
  color:var(--ink);
}
/* 黄の上で白ヌキは読めないため、必ず濃色文字にする */
.ochm-panel--yellow{background:var(--panel-yellow);color:#24292f}

/* 幅いっぱいで「下から生えてくる」形。
   これは .wrap の中に入れず、<section> そのものに付けてください。
   直後のセクションには section--round section--paper を付けて、
   白い面がこのパネルに乗り上げるようにします（style.css 27章）。
   隙間を空けると、生えているように見えなくなります。 */
.ochm-panel--flush{
  border-radius:60px 60px 0 0;
  padding-inline:0;
  padding-bottom:clamp(88px,9vw,150px);
}
.ochm-panel--flush > .ochm-panel__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}

/* 中身は必ず装飾より前に出す（装飾 z-index:1〜5 ／ 中身 10） */
.ochm-panel__in{position:relative;z-index:10}

/* パネル内の文字の扱い。style.css の .panel と同じ考え方に揃えています */
.ochm-panel .label{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:currentColor;opacity:.72;
}
.ochm-panel h2,.ochm-panel h3{color:currentColor}
.ochm-panel h2 em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:currentColor;
  text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.16em;
  text-decoration-color:rgba(255,255,255,.45);
}
.ochm-panel--yellow h2 em{text-decoration-color:rgba(36,41,47,.28)}
.ochm-panel .sec-lead{color:currentColor;opacity:.86}

/* ---- B-1. はみ出す装飾 -------------------------------------------------------
   数百px はみ出させて、パネル側の overflow:hidden で切る。これがこのサイトの流儀。 */
.ochm-deco{position:absolute;z-index:1;pointer-events:none;display:block}

.ochm-deco--ring{
  top:-240px;right:-200px;width:720px;height:720px;border-radius:50%;
  border:2px solid rgba(255,255,255,.34);opacity:.5;
  animation:ochmFloat 7s ease-in-out infinite;
}
.ochm-deco--ring::after{
  content:'';position:absolute;inset:112px;border-radius:50%;
  border:2px solid rgba(255,255,255,.26);
}
.ochm-deco--rays{
  bottom:-360px;left:-300px;width:860px;height:860px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.5) 0deg 6deg,transparent 6deg 18deg);
  opacity:.14;
  animation:ochmSpin 90s linear infinite;
}
.ochm-deco--dots{
  top:-160px;right:-180px;width:680px;height:680px;
  background-image:radial-gradient(rgba(36,41,47,.5) 2.4px,transparent 2.6px);
  background-size:26px 26px;opacity:.2;transform:rotate(-8deg);
}
.ochm-deco--grid{
  right:-220px;bottom:-260px;width:640px;height:640px;
  border:3px solid rgba(255,255,255,.22);border-radius:80px;
  transform:rotate(16deg);opacity:.6;
}
.ochm-deco--grid::after{
  content:'';position:absolute;inset:64px;
  border:3px solid rgba(255,255,255,.18);border-radius:56px;
}


/* ---- B-2. パネルの主役：中央の図と、その周りを回るラベル --------------------
   図には文字が入っていません。意味を伝える日本語はすべて
   .ochm-orbit__pin として HTML で重ねています。位置を動かすときは
   下の --x / --y を触ってください。 */
.ochm-hero{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
/* 左右を入れ替えても、本文のほうを広い列に置く */
.ochm-hero.is-reverse{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(42px,5vw,88px)}
.ochm-hero.is-reverse .ochm-hero__text{order:2}
/* パネルの中は本文幅が狭いので、見出しだけ一段小さくして折れ方を整える */
.ochm-hero__text h2{font-size:clamp(24px,2.9vw,40px)}
.ochm-hero__text .sec-lead + .sec-lead{margin-top:16px}

.ochm-orbit{
  position:relative;display:grid;place-items:center;
  width:100%;max-width:530px;margin-inline:auto;
  padding:clamp(32px,3.6vw,50px);
}
/* 図の後ろに敷く軌道の輪。ゆっくり回り続ける */
.ochm-orbit::before{
  content:'';position:absolute;inset:6%;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.38);
  animation:ochmSpin 42s linear infinite;
}
.ochm-panel--yellow .ochm-orbit::before{border-color:rgba(36,41,47,.28)}
.ochm-orbit__img{
  position:relative;z-index:2;width:min(100%,380px);
  filter:drop-shadow(0 30px 46px rgba(24,24,27,.28));
  animation:ochmFloat 6s ease-in-out infinite;
}
.oc-architecture-image{
  width:min(135%,380px);max-width:none;
  filter:drop-shadow(0 24px 40px rgba(88,0,18,.24));
}
.oc-architecture-orbit{min-height:390px}
.oc-architecture-panel .ochm-orbit::before{
  border-color:rgba(255,255,255,.52);
}
.ochm-orbit__flow{
  position:absolute;z-index:1;width:min(100%,480px);
  pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(61,24,138,.18));
}
.ochm-orbit__pin{
  position:absolute;z-index:3;
  left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  padding:8px 15px;border-radius:999px;white-space:nowrap;
  background:#fff;color:#24292f;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  box-shadow:var(--sh-rest);
  animation:ochmFloat 4.4s ease-in-out infinite;
}
.ochm-orbit__pin:nth-of-type(2){animation-delay:-.9s}
.ochm-orbit__pin:nth-of-type(3){animation-delay:-1.8s}
.ochm-orbit__pin:nth-of-type(4){animation-delay:-2.7s}
.ochm-orbit__pin:nth-of-type(5){animation-delay:-3.6s}

/* ---- B-3. パネルの中の巨大数字 ------------------------------------------------
   仕様：144px の英数フォント。ここに置いてよいのは、
   出典が確認できている事実だけです。推測の数字を足さないでください。 */
.ochm-figs{
  margin-top:clamp(30px,3.6vw,52px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.ochm-fig{
  padding:clamp(24px,2.8vw,38px);border-radius:40px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);
}
.ochm-panel--yellow .ochm-fig{
  background:rgba(255,255,255,.55);border-color:rgba(36,41,47,.12);
}
.ochm-fig__num{
  display:flex;align-items:baseline;gap:clamp(4px,.5vw,10px);
  font-weight:700;letter-spacing:-.03em;line-height:1;
}
.ochm-fig__num .en{
  font-family:'Poppins',sans-serif;
  font-size:clamp(52px,8vw,104px);letter-spacing:.005em;
}
.ochm-fig__num small{
  font-size:clamp(15px,1.4vw,20px);font-weight:800;opacity:.82;
  flex:none;white-space:nowrap;   /* 「以上」が縦に割れるのを防ぐ */
  padding-bottom:.08em;
}
.ochm-fig h3{margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.ochm-fig p{margin-top:8px;font-size:13.5px;line-height:1.9;opacity:.85}

/* パネルの中に置く注記（1行だけ強く言いたいとき） */
.ochm-note{
  margin-top:clamp(24px,3vw,40px);padding:clamp(22px,2.6vw,34px);
  border-radius:40px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
}
.ochm-panel--yellow .ochm-note{background:rgba(255,255,255,.55);border-color:rgba(36,41,47,.12)}
.ochm-note b{display:block;font-size:clamp(16px,1.7vw,21px);font-weight:800;letter-spacing:-.01em}
.ochm-note p{margin-top:10px;font-size:14px;line-height:1.95;opacity:.88}
.ochm-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(255,255,255,.85);color:#24292f;
  padding:2px 8px;border-radius:6px;font-size:.9em;font-weight:700;
}

@media (max-width:900px){
  .ochm-hero,
  .ochm-hero.is-reverse{grid-template-columns:1fr}
  .ochm-hero.is-reverse .ochm-hero__text{order:0}
}

/* 画面が狭いと、軌道のラベルがパネルの外へ出て切れてしまう。
   HTML 側の --x を無視して、内側へ寄せ直します。
   ラベルを増やすときは、この nth-of-type も足してください。 */
@media (max-width:640px){
  .ochm-orbit{padding:38px 18px}
  .ochm-orbit__pin{font-size:11px;padding:6px 12px}
/* モバイルでは「前回の会話」だけをマークに合わせて30px左へ寄せる。 */
.ochm-orbit__pin:nth-of-type(1){left:calc(26% - 87px)}
  .ochm-orbit__pin:nth-of-type(2){left:74%}
  /* 「うまくいった手順」だけをモバイルで20px左へ寄せる。 */
  .ochm-orbit__pin:nth-of-type(3){left:calc(18% - 55px)}
  .ochm-orbit__pin:nth-of-type(4){left:calc(72% - 10px)}
  .ochm-orbit__pin:nth-of-type(5){left:50%}
  .oc-architecture-orbit .ochm-orbit__pin:nth-of-type(1){left:20%}
  .oc-architecture-orbit .ochm-orbit__pin:nth-of-type(2){left:80%}
  .oc-architecture-orbit .ochm-orbit__pin:nth-of-type(3){left:24%}
  .oc-architecture-orbit .ochm-orbit__pin:nth-of-type(4){left:76%}
  .oc-architecture-image{width:min(126%,330px)}
}


/* ============================================================================
   C. 特徴カード（.ochm-feat）

   既存の .wall は「白い箱に文字」だけで見応えが出ませんでした。
   ここでは カードの上半分に色面を敷き、その上に専用グラフィックを置いています。
   面をなくすと、透過PNGが白地に浮いて安っぽく見えます。
============================================================================ */
.ochm-feats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);
}
.ochm-feat{
  position:relative;overflow:hidden;
  border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-rest);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ochm-feat:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

/* 上半分の色面。--tone をカード側で差し替えて色を変えます */
.ochm-feat__art{
  position:relative;display:grid;place-items:center;
  padding:clamp(22px,2.6vw,34px);
  background:
    radial-gradient(120% 100% at 50% 0%,var(--tone-2,#eaf1ff) 0%,var(--tone-1,#f6f8fa) 70%);
  border-bottom:1px solid var(--line);
}
/* 色面の中で、さらに一段明るい円を敷いて絵の受け皿にする */
.ochm-feat__art::before{
  content:'';position:absolute;width:172px;height:172px;border-radius:50%;
  background:rgba(255,255,255,.75);filter:blur(6px);
}
.ochm-feat__art img{
  position:relative;z-index:1;
  width:clamp(112px,12vw,152px);height:auto;
  filter:drop-shadow(0 16px 22px rgba(24,24,27,.16));
  transition:transform .2s ease;
}
.ochm-feat:hover .ochm-feat__art img{transform:translateY(-4px)}

.ochm-feat__body{padding:clamp(22px,2.4vw,32px)}
.ochm-feat__no{
  font-family:'Poppins',sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.12em;
  color:var(--accent,var(--blue));
}
.ochm-feat h3{
  margin-top:10px;
  font-size:clamp(17px,1.6vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.3;
}
.ochm-feat p{margin-top:13px;color:var(--sub);font-size:14.5px;line-height:1.95}
/* 上端の色の帯。カードごとに色が変わるので、並べると識別しやすい */
.ochm-feat::after{
  content:'';position:absolute;left:0;right:0;top:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--accent,var(--blue)),var(--accent-2,var(--purple)));
}

/* ---- C-1. 導入後の具体例 ----------------------------------------------- */
.oc-usecases{background:#fff}
.oc-usecases__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(28px,3.5vw,46px);
}
.oc-usecase{
  display:flex;flex-direction:column;min-height:250px;
  padding:clamp(24px,2.8vw,36px);border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-rest);
}
.oc-usecase__no{color:var(--blue);font-size:14px;font-weight:800;letter-spacing:.08em}
.oc-usecase h3{margin-top:26px;font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.35}
.oc-usecase p{margin-top:12px;color:var(--sub);font-size:14px;line-height:1.85}
.oc-usecase__result{display:block;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:800;line-height:1.6}

@media (max-width:860px){
  .ochm-feats{grid-template-columns:1fr}
  .oc-usecases__grid{grid-template-columns:1fr}
}


/* ============================================================================
   D. 比較メーター（.ochm-vs）

   表のままだと「どちらがどれだけ得意か」が伝わらないため、
   軸ごとに2本のバーを向かい合わせて置いています。
   バーの長さは相対的な強さの表現で、数値は表示しません（根拠のない数字を書かないため）。
   長さを変えるときは HTML 側の --v（％）だけを触ってください。
============================================================================ */

/* 実際に伸びる面。読み込み時に1回だけ 0 → --v まで伸びます */
/* 面の上に文字が乗る長さのときは白ヌキ、はみ出す短さのときは濃色 */
/* 短いバーは、文字がバーの外に出るように押し出す */

@media (max-width:560px){
}


/* ============================================================================
   E. openclaw.html 固有
============================================================================ */

/* ---- E. 接続した先の業務を見せるワークフローカード ----------------------------- */
.oc-workflows{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,3.4vw,48px);
}
.oc-workflow{
  display:flex;flex-direction:column;min-height:350px;padding:clamp(22px,2.3vw,32px);
  border:1px solid #e3e8ef;border-radius:28px;background:#fff;
  box-shadow:0 16px 32px -27px rgba(30,50,120,.42);
  transition:transform .22s ease,box-shadow .22s ease;
}
.oc-workflow:hover{transform:translateY(-5px);box-shadow:0 24px 38px -26px rgba(30,50,120,.34)}
.oc-workflow__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oc-workflow__no{font:800 13px/1 var(--font-en,var(--font));letter-spacing:.08em;color:var(--blue)}
.oc-workflow__kind{padding:7px 10px;border-radius:999px;background:#f0f4ff;color:#3d5fae;font-size:11px;font-weight:800;white-space:nowrap}
.oc-workflow__scene{position:relative;height:114px;margin:12px -2px 0;overflow:hidden;border-radius:18px;background:linear-gradient(112deg,#f6f8ff,#fff 58%,#fff4f1)}
.oc-scene__line{position:absolute;left:8%;right:20%;top:54%;border-top:2px dashed #b9c7eb}
.oc-tool{position:absolute;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:#fff;border:1px solid #dfe6f5;box-shadow:0 8px 16px -12px rgba(31,71,152,.65);color:#3274ea;animation:ocToolFlow 3.4s ease-in-out infinite}
.oc-tool svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.oc-tool--browser{left:8%;top:33%}.oc-tool--sheet{left:28%;top:52%}.oc-tool--chat{left:47%;top:25%}.oc-tool--mail{left:8%;top:31%;color:#e45463}.oc-tool--book{left:47%;top:25%;color:#7b4fd5}.oc-tool--system{left:8%;top:31%;color:#4569c9}.oc-tool--folder{left:28%;top:52%;color:#ef9b30}
.oc-tool:nth-of-type(3){animation-delay:-1.1s}.oc-tool:nth-of-type(4){animation-delay:-2.2s}
@keyframes ocToolFlow{0%,100%{transform:translate(-4px,4px);opacity:.58}50%{transform:translate(7px,-5px);opacity:1}}
.oc-workflow__scene img{position:absolute;z-index:2;right:2%;bottom:-30px;width:102px;height:auto;filter:drop-shadow(0 12px 10px rgba(111,54,45,.18));animation:ocMascotWave 3.6s ease-in-out infinite}
@keyframes ocMascotWave{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.oc-workflow__apps{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:14px;color:#536072;font-size:11px;font-weight:800;line-height:1.4}
.oc-workflow__apps span{padding:8px 10px;border:1px solid #e0e6f0;border-radius:9px;background:#fbfcff;box-shadow:0 6px 12px -12px rgba(30,50,120,.65)}
.oc-workflow__apps b{color:#9aa6ba;font-size:13px}
.oc-workflow h3{margin-top:24px;font-size:clamp(20px,1.8vw,26px);font-weight:800;letter-spacing:-.045em;line-height:1.45}
.oc-workflow p{margin-top:14px;color:var(--sub);font-size:13px;line-height:1.9}
.oc-workflow__route{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px;border-top:1px solid #e8ecf2;color:#647084;font-size:11px;font-weight:700;line-height:1.6}
.oc-workflow__route i{color:#91a0b6;font-style:normal;font-size:15px}
.oc-workflow__route strong{color:#226bea}

/* 黒背景を外した CONNECT セクション専用の明色化。 */
.ochm-panel--dark .ochm-deco{display:none}
.ochm-panel--dark h2 em{text-decoration-color:rgba(123,60,245,.32)}
@media (max-width:860px){.oc-workflows{grid-template-columns:1fr}.oc-workflow{min-height:0}}
@media (prefers-reduced-motion:reduce){.oc-workflow__scene img,.oc-tool{animation:none}}

/* 業務ごとの「デジタル社員」を見せる、横に流れるカード群。 */
.ochm-panel--dark{overflow:visible}
.oc-agent-marquee{
  width:100vw;margin-top:clamp(28px,3.6vw,48px);margin-left:calc(50% - 50vw);
  padding-block:12px;overflow:hidden;
}
.oc-agent-marquee .marquee__track{gap:24px;animation-duration:var(--speed,28s)}
.oc-agent-card{flex:none;width:310px;overflow:hidden;border:1px solid #e0e6ee;border-radius:28px;background:#fff;box-shadow:0 16px 30px -24px rgba(30,50,120,.36)}
.oc-agent-card__art{position:relative;height:205px;overflow:hidden;background:linear-gradient(145deg,#f5f7fb,#f0f3f8)}
.oc-agent-card:nth-child(2n) .oc-agent-card__art{background:linear-gradient(145deg,#fff8eb,#f8f1e7)}
.oc-agent-card:nth-child(3n) .oc-agent-card__art{background:linear-gradient(145deg,#eef7ff,#eef3ff)}
.oc-agent-card__art>img{position:absolute;left:50%;bottom:-3px;width:144px;height:178px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 10px 12px rgba(34,44,75,.14))}
.oc-agent-tools{position:absolute;z-index:1;left:16px;bottom:14px;display:flex}
.oc-agent-tools span{display:grid;place-items:center;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:#fff;box-shadow:0 8px 18px rgba(32,41,47,.12)}
.oc-agent-tools span img{display:block;width:28px;height:28px;object-fit:contain}
.oc-agent-tools span+span{margin-left:-10px}
.oc-agent-card__body{padding:20px 21px 22px}.oc-agent-card__body h3{font-size:22px;font-weight:800;letter-spacing:-.045em}.oc-agent-card__body p{margin-top:8px;color:var(--sub);font-size:13px;line-height:1.7}
@media (max-width:600px){.oc-agent-card{width:270px}.oc-agent-card__art{height:190px}.oc-agent-marquee .marquee__track{gap:16px}}


/* ============================================================================
   F. hermes.html 固有
============================================================================ */

/* ---- F-1. 経験がスキルドキュメントになる（黄パネルの横レール） ----
   3段階を1本の線でつなぎます。狭いときは線を縦にします。 */
.hm-rail{
  --hm-rail-gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(30px,3.6vw,52px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hm-rail-gap);
  position:relative;list-style:none;padding:0;
}
/* 01 の丸の中心から 03 の丸の中心までを結ぶ。
   グリッド列の中央を基準にすることで、01・02・03 と線の両端を常に対称に保つ。 */
.hm-rail::before{
  content:'';position:absolute;
  left:calc((100% - 2 * var(--hm-rail-gap)) / 6);
  right:calc((100% - 2 * var(--hm-rail-gap)) / 6);
  top:34px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(36,41,47,.3) 0 10px,transparent 10px 20px);
  z-index:0;
}
.hm-rail li{position:relative;z-index:1}
.hm-rail__no{
  width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#24292f;
  font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;letter-spacing:.02em;
  box-shadow:var(--sh-rest);
  margin:0 auto 18px;
}
.hm-rail h3{font-size:clamp(16px,1.6vw,20px);font-weight:800;letter-spacing:-.02em}
.hm-rail p{margin-top:10px;font-size:14px;line-height:1.95;opacity:.84}

@media (max-width:860px){
  .hm-rail{grid-template-columns:1fr;gap:22px}
  .hm-rail::before{left:33px;right:auto;top:8%;bottom:8%;width:3px;height:auto;
    background:repeating-linear-gradient(180deg,rgba(36,41,47,.3) 0 10px,transparent 10px 20px);}
  .hm-rail__no{margin-inline:0}
}

/* Hermes の FIT は前章の黄色から切り替わる、淡いグレーの面。 */
.hermes-fit{background:#eef1f5}

/* ---- F-2. 「フレームワークであって、モデルではない」の対比 ----
   ここは誤解が起きやすい一点なので、独立した面で言い切ります。 */
.hm-swap{
  margin-top:clamp(26px,3vw,40px);
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,26px);
  align-items:center;
}
.hm-swap__box{
  padding:clamp(20px,2.4vw,30px);border-radius:24px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
}
.hm-swap__cap{font-size:12px;font-weight:800;letter-spacing:.1em;opacity:.72}
.hm-swap__box h3{margin-top:10px;font-size:clamp(16px,1.7vw,21px);font-weight:800;letter-spacing:-.02em}
.hm-swap__box p{margin-top:10px;font-size:13.5px;line-height:1.9;opacity:.86}
.hm-swap__mark{
  font-family:'Poppins',sans-serif;font-size:clamp(20px,2.4vw,32px);font-weight:800;
  opacity:.5;letter-spacing:.02em;
}
@media (max-width:820px){
  .hm-swap{grid-template-columns:1fr}
  .hm-swap__mark{justify-self:center}
}


/* ============================================================================
   G. アニメーションの定義
============================================================================ */
@keyframes ochmFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes ochmSpin{to{transform:rotate(360deg)}}
}


/* ============================================================================
   H. 動きを減らす設定の端末では、すべて止める
============================================================================ */
@media (prefers-reduced-motion:reduce){
  .ochm-lead__art,
  .ochm-deco--ring,
  .ochm-deco--rays,
  .ochm-orbit::before,
  .ochm-orbit__img,
  .ochm-orbit__pin{animation:none}
  .oc-architecture-panel .ochm-deco--ring,
  .oc-architecture-panel .ochm-deco--rays,
  .oc-architecture-panel .ochm-orbit::before,
  .oc-architecture-panel .ochm-orbit__img,
  .oc-architecture-panel .ochm-orbit__pin{animation:none!important}
  .ochm-feat,
  .ochm-feat__art img,
  .oc-workflow{transition:none}
  .ochm-feat:hover{transform:none}
  .ochm-feat:hover .ochm-feat__art img{transform:none}
  .oc-workflow:hover{transform:none}
}


/* ============================================================
   44. 統計カード（事実の数字とドーナツ）
============================================================ */
/* ============================================================
   統計カード（FACTS）専用スタイル
   接頭辞は .st- で統一しています（既存クラスと衝突しません）。
   既存の .section / .wrap / .sec-head / .label / h2 / .sec-lead は流用します。

   参考サイト（lp.yoom.fun）の実測仕様に合わせた点：
   ・統計カード：角丸 40px / padding 64px / 630×323（横長版 1280×294）/ gap 20px
   ・巨大数字：英数フォント 3.5rem（横長カードは 3rem）/ weight 600
   ・カード内のアイコン：32×32px
   ・影は2種類だけ（--st-sh-rest / --st-sh-hover）。色相は混ぜない
   ・ホバーはカード translateY(-4px) ＋ 影を深くするだけ。色は変えない
   ・見出し 行間1.3 / 字間-0.04em、本文 行間1.6 / 字間-0.01em
   ・スクロール監視は使わない。動きは「読み込み時に1回」だけ
   ・JavaScript は使わない。円グラフは conic-gradient
============================================================ */

.st{
  /* 影（この2つ以外を使わない。#18181B のアルファのみで、色を付けない） */
  --st-sh-rest:  0 8px 16px rgba(24,24,27,.1), 0 0 1px rgba(24,24,27,.3);
  --st-sh-hover: 0 0 2px rgba(24,24,27,.12), 0 12px 24px rgba(24,24,27,.1);

  --st-sub:#57606A;   /* 副次テキスト（実測値） */
  --st-line:#EAEEF2;  /* 罫線・淡い背景（実測値） */

  /* カードの寸法（実測値） */
  --st-r:40px;                          /* 角丸 */
  --st-pad:clamp(28px,4.6vw,64px);      /* 内側余白。実測 64px を上限にする */
  --st-gap:20px;                        /* カード間 gap（統計だけ 20px） */

  /* 読み込み時アニメーションの既定値。各要素は style 属性で上書きする */
  --st-delay:0s;
  --st-dur:1s;

  /* ----------------------------------------------------------
     円グラフのデータ（ここだけ書き換えれば数字を変えられます）

     出典：can-do.html に実際に掲載されている業務例を数えたもの。合計 87件。
     01 営業・メール自動化          8件  9.2%
     02 MEO・ローカルSEO            6件  6.9%
     03 SNS運用                     8件  9.2%
     04 クリエイティブ・動画生成    6件  6.9%
     05 情報収集・リサーチ          8件  9.2%
     06 秘書・スケジュール管理      6件  6.9%
     07 ドキュメント・バックオフィス 8件  9.2%
     08 CRM・顧客フォロー           6件  6.9%
     09 社内業務・オペレーション    6件  6.9%
     10 カスタマーサポート          6件  6.9%
     11 マーケティング・分析        6件  6.9%
     12 システム連携・ブラウザ操作  7件  8.0%
     13 高度な判断・ニッチ業務      6件  6.9%

     13区分を寒色・暖色で明確に分け、凡例と同じ色で対応づけます。
     背景のサーモン色の上でも、扇形と数値をひと目で読めるようにしています。
  ---------------------------------------------------------- */
  --st-c1:#174b89;  --st-c2:#1c6ba0;  --st-c3:#007f96;  --st-c4:#19865f;
  --st-c5:#4967af;  --st-c6:#7047a5;  --st-c7:#a63d70;  --st-c8:#bd531f;
  --st-c9:#8d4724;  --st-c10:#837017; --st-c11:#3e688d; --st-c12:#286d72;
  --st-c13:#6d3f8d;
}

/* ------------------------------------------------------------
   グリッド
   630 + 20 + 630 = 1280。横長カードの実測幅と一致するので、
   コンテナ幅は 1280px を上限にしています。
------------------------------------------------------------ */
.st-grid{
  max-width:1280px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--st-gap);
}
@media (max-width:900px){
  .st-grid{ grid-template-columns:minmax(0,1fr) }
}

/* ------------------------------------------------------------
   カード本体
------------------------------------------------------------ */
.st-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:323px;              /* 実測 630×323 の高さ。中身が増えれば伸びる */
  padding:var(--st-pad);
  border-radius:var(--st-r);
  background:#fff;
  box-shadow:var(--st-sh-rest);
  /* 本文のタイポグラフィ（実測値） */
  line-height:1.6;
  letter-spacing:-.01em;
  transition:all .2s ease;
}

/* 参考のようにカード全体を色面にする。
   彩度は少し抑え、濃い文字色で可読性を確保する。 */
.st-card:nth-child(1){--st-card-bg:#f8cc4a;--st-card-accent:#9a6500}
.st-card:nth-child(2){--st-card-bg:#43d1a8;--st-card-accent:#086b54}
.st-card:nth-child(3){--st-card-bg:#ff8c73;--st-card-accent:#a53223}
.st-card:nth-child(4){--st-card-bg:#ff8874;--st-card-accent:#9a3a2a}
.st-card:nth-child(5){--st-card-bg:#7ca9e8;--st-card-accent:#164f91}

.st-card{
  background:var(--st-card-bg,#fff);
  color:#20262d;
}
.st-card .st-card__ic{color:var(--st-card-accent,var(--blue))}
.st-card .st-card__label,
.st-card .st-card__text,
.st-card .st-legend li{color:rgba(32,38,45,.78)}
.st-card .st-pie__hole{
  background:#fff;color:#20262d;
  border:2px solid #24292f;
}
.st-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--st-sh-hover);
}

/* 横長カード（実測 1280×294）。2列ぶんをまたぐ */
.st-card--wide{
  grid-column:1 / -1;
  min-height:294px;
  flex-direction:row;
  align-items:center;
  gap:clamp(24px,3vw,44px);
}
.st-card--visual{
  display:block;
  position:relative;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #e3e8ef;
  box-shadow:0 16px 28px rgba(15,35,62,.10);
  line-height:0;
}
.st-card--visual img{display:block;width:100%;height:auto}
/* `.st-card--visual img` より詳細度を上げ、PCでモバイル画像が
   同時に表示されないようにする。表示切替は下の900pxメディアクエリで行う。 */
.st-card--visual > .stats-mobile-visual{display:none}
/* 右側の凡例だけを85%に縮小。画像全体の縦横比は変えない。 */
.stats-legend-shrink{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:54%;
  height:100%;
  overflow:hidden;
  background:#fff;
}
.stats-legend-shrink img{
  position:absolute;
  top:0;
  left:-72.4%;
  width:157.4%;
  max-width:none;
  height:auto;
}
@media (max-width:900px){
  /* 1列になると 323px の下限が「余白の穴」になるので、中身の高さに任せる */
  .st-card{ min-height:0 }
  .st-card__text{ padding-top:16px }
  .stats-legend-shrink{ display:none }
  .st-card--visual > .stats-desktop-visual{ display:none }
  .st-card--visual > .stats-mobile-visual{ display:block }
  /* 統計カードも他の数値カードと同じ外形を保つ。図は歪めず中央に収める。 */
  .st-card--visual{
    display:flex;
    align-items:center;
    min-height:226px;
    height:226px;
    padding:0;
    border:1px solid #e3e8ef;
    border-radius:var(--st-r);
    background:#fff;
    box-shadow:var(--st-sh-rest);
  }
  .st-card--visual > .stats-mobile-visual{
    width:100%;height:100%;object-fit:contain;object-position:center;
  }
  .st-card--wide{
    flex-direction:column;
    align-items:flex-start;
    min-height:0;
  }
  .st-card--wide.st-card--visual{min-height:226px;height:226px}
}

/* カード内アイコン：32×32px（実測値） */
.st-card__ic{
  display:block;
  width:32px;
  height:32px;
  color:var(--blue,#1668f0);
}
.st-card__ic svg{ width:100%;height:100% }

.st-card__label{
  margin-top:20px;
  font-size:14px;
  font-weight:600;
  color:var(--st-sub);
}

/* 巨大数字。英数だけフォントを切り替え、字間をプラスに振る */
.st-en{
  font-family:'Poppins',sans-serif;
  font-feature-settings:'tnum';
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.st-card__num{
  margin-top:6px;
  /* 実測 3.5rem。狭い画面では縮める */
  font-size:clamp(2.25rem,5.4vw,3.5rem);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.st-card__num small{
  margin-left:.12em;
  margin-right:.28em;
  font-size:.4em;
  font-weight:700;
  letter-spacing:-.01em;
}
.st-card__num small:last-child{ margin-right:0 }
/* 横長カードの数字は 3rem（実測値） */
.st-card__num--sm{ font-size:clamp(3rem,5vw,4.4rem) }

.st-card__text{
  margin-top:auto;               /* カード下端に寄せる。カードの背が揃う */
  padding-top:20px;
  font-size:14px;
  font-weight:500;
  color:var(--st-sub);
}

/* ------------------------------------------------------------
   横長カードの3ブロック（数字 / 円グラフ / 凡例）
------------------------------------------------------------ */
.st-wide__lead{
  flex:0 0 auto;
  min-width:0;
}
.st-wide__lead .st-card__label{ margin-top:16px }

/* ------------------------------------------------------------
   円グラフ（conic-gradient のドーナツ）

   ・画像にしていないので、上のデータ表を書き換えれば形が変わります
   ・扇形の境目は黒 1.2deg のすき間で切っています
   ・中央の穴はカード背景と同じ白。ここに「13カテゴリ」を置いています
------------------------------------------------------------ */
.st-pie{
  flex:0 0 auto;
  width:clamp(172px,16vw,196px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:3px solid #20262d;
  background:conic-gradient(
    from -90deg,
    var(--st-c1)   0deg      32.5deg,   /* 01 営業・メール自動化 8件 */
    #24292f        32.5deg   33.7deg,
    var(--st-c2)   33.7deg   57.33deg,  /* 02 MEO・ローカルSEO 6件 */
    #24292f        57.33deg  58.53deg,
    var(--st-c3)   58.53deg  90.43deg,  /* 03 SNS運用 8件 */
    #24292f        90.43deg  91.63deg,
    var(--st-c4)   91.63deg  115.26deg, /* 04 クリエイティブ・動画生成 6件 */
    #24292f        115.26deg 116.46deg,
    var(--st-c5)   116.46deg 148.37deg, /* 05 情報収集・リサーチ 8件 */
    #24292f        148.37deg 149.57deg,
    var(--st-c6)   149.57deg 173.19deg, /* 06 秘書・スケジュール管理 6件 */
    #24292f        173.19deg 174.39deg,
    var(--st-c7)   174.39deg 206.3deg,  /* 07 ドキュメント・バックオフィス 8件 */
    #24292f        206.3deg  207.5deg,
    var(--st-c8)   207.5deg  231.12deg, /* 08 CRM・顧客フォロー 6件 */
    #24292f        231.12deg 232.32deg,
    var(--st-c9)   232.32deg 255.95deg, /* 09 社内業務・オペレーション 6件 */
    #24292f        255.95deg 257.15deg,
    var(--st-c10)  257.15deg 280.78deg, /* 10 カスタマーサポート 6件 */
    #24292f        280.78deg 281.98deg,
    var(--st-c11)  281.98deg 305.61deg, /* 11 マーケティング・分析 6件 */
    #24292f        305.61deg 306.81deg,
    var(--st-c12)  306.81deg 334.57deg, /* 12 システム連携・ブラウザ操作 7件 */
    #24292f        334.57deg 335.77deg,
    var(--st-c13)  335.77deg 360deg     /* 13 高度な判断・ニッチ業務 6件 */
  );
}
.st-pie__hole{
  width:54%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.15;
}
.st-pie__hole b{
  font-size:36px;
  font-weight:800;
  letter-spacing:-.03em;
}
.st-pie__hole small{
  margin-top:3px;
  font-size:13px;
  font-weight:700;
  color:#3d4754;
}

/* ------------------------------------------------------------
   凡例（扇形ごとのラベル）
   13件あるので、幅に応じて自然に折り返す構成にしています。
------------------------------------------------------------ */
.st-legend{
  flex:1 1 380px;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-content:start;   /* 行が引き伸ばされて行間が開くのを防ぐ */
  gap:6px 24px;
}
.st-legend li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  color:#26313d;
  line-height:1.55;
}
.st-legend li::before{
  content:"";
  flex:0 0 auto;
  border:2px solid rgba(32,38,45,.72);
  width:14px;
  height:14px;
  border-radius:3px;
  background:var(--st-c);
}
.st-legend li span{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.st-legend li b{
  flex:0 0 auto;
  min-width:1.2em;
  font-size:18px;
  font-weight:800;
  color:#161d26;
}
/* 横長カードが縦積みになったら、凡例は横幅いっぱいを使って自動で段組みする。
   （縦並びのとき flex-basis は「高さ」として効いてしまうため、必ず打ち消す） */
@media (max-width:900px){
  .st-legend{ flex:0 0 auto; width:100% }
}

/* ------------------------------------------------------------
   24コマの帯（1日24時間ぶん。すべて埋まる＝止まる時間帯がない）
   円グラフを使わない見せ方として、単一の事実だけを棒にしています。
------------------------------------------------------------ */
.st-bar{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(24,1fr);
  gap:2px;
}
.st-bar span{
  height:10px;
  border-radius:2px;
  background:var(--ink);
}
.st-bar span:first-child{ border-radius:6px 2px 2px 6px }
.st-bar span:last-child{ border-radius:2px 6px 6px 2px }

/* ------------------------------------------------------------
   出典の但し書き
------------------------------------------------------------ */
.st-note{
  max-width:1280px;
  margin:20px auto 0;
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:-.01em;
  color:var(--st-sub);
}
.st-note a{
  color:var(--blue,#1668f0);
  text-underline-offset:3px;
}

/* ------------------------------------------------------------
   動き：読み込み時に1回だけ（スクロール監視は使わない）
   delay と duration をあえてバラすと、参考サイトのポップさが出ます。
------------------------------------------------------------ */
@keyframes stFadeInUp{
  from{ opacity:0; transform:translateY(60px) }
  to  { opacity:1; transform:translateY(0) }
}
.st-rise{
  opacity:0;
  animation:stFadeInUp var(--st-dur) cubic-bezier(.68,0,.265,1.2) var(--st-delay) forwards;
}

/* ------------------------------------------------------------
   動きを減らす設定のとき（必須）
   ・出現アニメーションは止めて、最初から表示された状態にする
   ・ホバーの移動もなくし、影の変化だけ残す
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .st-rise{
    opacity:1;
    animation:none;
    transform:none;
  }
  .st-card{ transition:box-shadow .2s ease }
  .st-card:hover{ transform:none }
}


/* ============================================================
   45. 細部の調整（sticky復活・ヘッダー・フォーカス・ボタン色）

   ここは必ず最後に置くこと。34章の overflow-x:hidden を
   clip に上書きしています。順番が前後すると sticky が死にます。
============================================================ */
/* ============================================================
   detail.css — 参考サイト（lp.yoom.fun）の実測値に合わせる差分シート

   読み込み順（必須）:
     <link rel="stylesheet" href="assets/style.css">
     <link rel="stylesheet" href="assets/pages.css">   ← 下層ページのみ
     <link rel="stylesheet" href="assets/detail.css">  ← 必ず最後

   このファイルは既存の値を「上書き」する前提で書いてあります。
   同じ詳細度のときは後から読んだ方が勝つため、順番を守ってください。
   !important は 1 箇所も使っていません。

   実測の出どころ（2026-08-16 に lp.yoom.fun を計測）:
     header  position:sticky / top:0 / height:72px / z-index:10000
     main    margin-top:-72px（.top-page-main）
     footer  background:#24292F / padding:120px 0
     主ボタン background:#24292F / border-radius:70px
     副ボタン background:#FFFFFF / box-shadow は --sh-rest と同じ式
============================================================ */


/* ============================================================
   0. トークン
   影は style.css:1183 の --sh-rest / --sh-hover をそのまま使い回します
   （新しい影を増やさない。仕様書の「影は2種類だけ」に従う）
============================================================ */
:root{
  --header-h:72px;         /* 全ページで統一するヘッダー高 */
  --btn-ink:#24292f;       /* 主ボタンの黒 */
  --btn-ink-hover:#1c2024; /* 主ボタンのホバー */
  --link:#0969da;          /* 本文リンク */
  --focus-ring:#0969da;    /* フォーカスリング（明るい面用） */
}


/* ============================================================
   1. 【最重要】sticky が効かない原因を取り除く

   style.css:1833 の `html,body{overflow-x:hidden}` が原因で
   body がスクロールコンテナになり、position:sticky が
   ページ全体で無効化されています。実測で確認済み:

     現状 hidden … 1500px スクロール時 header.top = -1500（流れて消える）
                   .stack の1枚目パネル top = -900（積層していない）
     clip  に変更 … header.top = 0、パネル top = 0（正しく止まる）
                   横方向のはみ出し抑止は維持（scrollWidth = innerWidth）

   overflow-x:clip はスクロールコンテナを作らないので、はみ出しを
   切りつつ sticky を殺しません。ヘッダーだけでなく、このサイトの
   目玉である「カラーパネルの積層」もこの1行で復活します。
============================================================ */
html,body{ overflow-x:clip; }


/* ============================================================
   2. ヘッダー（absolute → sticky）

   参考サイトは <main> に margin-top:-72px を当ててヘッダーの下に
   潜り込ませていますが、ここでは HTML を触らずに済むよう
   ヘッダー側の margin-bottom を -72px にしています（結果は同じ）。
   ※ HTML に <main> を足した場合もこのままで正しく動きます。
      詳しくは detail_notes.md の「A. <main>について」を参照。
============================================================ */
header{
  position:sticky;
  top:0;
  left:auto; right:auto;          /* absolute 時代の指定を無効化 */
  z-index:10000;                  /* 参考サイト実測 */
  height:var(--header-h);
  padding-block:0;                /* 88px → 72px にするため */
  padding-inline:clamp(20px,3.2vw,52px);
  margin-bottom:calc(var(--header-h) * -1);

  /* 既定は「白＋影」。スクロール連動に対応した環境では
     下の @supports が上書きし、最上部だけ透明になります。
     非対応環境で常時白なのは意図的です（後述）。 */
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(24,24,27,.08), 0 8px 16px rgba(24,24,27,.06);
}
@media (max-width:1000px){
  header{ padding-inline:20px; }   /* style.css:594 の padding:16px 20px を打ち消す */
}

/* ---- スクロールで 透明 → 白＋影（JavaScript 不使用） ----
   CSS スクロール駆動アニメーション（animation-timeline:scroll()）。
   Chrome/Edge 115+、Safari 26+、Firefox 144+ で動きます。

   非対応ブラウザでは上の「常時 白＋影」が残ります。
   （逆向きのフォールバック＝常時透明 にはしていません。
     このサイトはフッターが #24292F、積層パネルが青・緑なので、
     透明のまま固定されるとナビ文字が読めなくなるためです。
     参考サイトはヘッダーが常時透明で、実際にフッター上で
     文字色 #333 が背景 #24292F に沈んでいます＝真似しない） */
@supports (animation-timeline: scroll()){
  @keyframes headerSolidify{
    from{
      background-color:rgba(255,255,255,0);
      box-shadow:0 1px 0 rgba(24,24,27,0), 0 8px 16px rgba(24,24,27,0);
      -webkit-backdrop-filter:blur(0px);
              backdrop-filter:blur(0px);
    }
    to{
      background-color:rgba(255,255,255,.9);
      box-shadow:0 1px 0 rgba(24,24,27,.08), 0 8px 16px rgba(24,24,27,.06);
      -webkit-backdrop-filter:blur(12px);
              backdrop-filter:blur(12px);
    }
  }
  header{
    /* animation ショートハンドは animation-timeline を auto に戻してしまうため、
       ここは長い書き方（longhand）で統一しています。 */
    animation-name:headerSolidify;
    animation-duration:auto;      /* スクロール駆動では auto がレンジ全体に対応 */
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
    animation-range:0 96px;       /* 96px スクロールする間に白くなる */
  }
}
/* 動きを減らす設定のときは、安全側（常時 白＋影）で固定する */
@media (prefers-reduced-motion: reduce){
  header{ animation:none; }
}

/* Hermes の背景装飾はヘッダーに透過させず、必ずヘッダー下から見せる。 */
body:has(.hm-hero-stage) header,
body:has(.oc-hero-stage) header{
  animation-name:none;
  background-color:#fff;
  box-shadow:0 1px 0 rgba(24,24,27,.08), 0 8px 16px rgba(24,24,27,.06);
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* 後段の sticky ヘッダー指定より優先するモバイルメニューの土台。 */
@media (max-width:1000px){
  header{
    min-height:72px;
    padding:12px 20px;
    background:#eff2f5;
    animation:none !important;
    box-shadow:0 1px 0 rgba(32,38,45,.08);
  }
  header.is-menu-open{
    position:fixed;
    inset:0;
    min-height:100dvh;
    padding:12px 20px;
    background:#eff2f5;
  }
}

/* ヘッダーが不透明になったぶん、ページ内アンカーの着地点を下げる */
:where([id]){ scroll-margin-top:calc(var(--header-h) + 16px); }


/* ============================================================
   3. 積層パネルの止まる位置をヘッダーぶん下げる

   参考サイトは top:0 / 15px / 30px / 0（ヘッダーが透明なので
   パネルの角丸60pxがヘッダー越しに見える）。
   こちらはヘッダーが不透明になるため、そのままだと各パネルの
   上端60pxがヘッダーに隠れて角丸が消えます。
   段差（0/15/30）は保ったまま、全体を 72px 下げます。

   ※ 参考サイトと完全に同じ数値に戻したい場合は、
     このブロックごと削除してください（ヘッダーに隠れます）。
============================================================ */
.stack > .panel:nth-child(1){top:var(--header-h)}
.stack > .panel.b3-employee:nth-child(1){top:auto}
/* 黒カードは固定対象外。その次の青を1枚目として0/15/30/0の段差に戻す。 */
.stack > .deco-card-panel:nth-child(2){top:var(--header-h)}
.stack > .panel:nth-child(3){top:calc(var(--header-h) + 15px)}
.stack > .panel:nth-child(4){top:calc(var(--header-h) + 30px)}
.stack > .panel:nth-child(5){top:var(--header-h)}

@media (max-width:1000px){
  /* カラーカードを画面上端まで上げ、黒カードの縁を残さない。 */
  .stack > .deco-card-panel:nth-child(2){top:0}
  .stack > .panel:nth-child(3){top:10px}
  .stack > .panel:nth-child(4){top:20px}
  .stack > .panel:nth-child(5){top:30px}
}

@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  .stack > .deco-card-panel:nth-child(2),
  .stack > .panel:nth-child(n + 3){position:relative;top:auto}
}


/* ============================================================
   4. ボタン — 主ボタンを黒 #24292F にする

   判断の根拠は detail_notes.md「B. ボタンの色」に書いています。
   グラデに戻したいときは、このブロックを丸ごと削除すれば
   style.css の btn_primary.png がそのまま復活します。
============================================================ */
.ibtn-primary{
  background-image:none;
  background-color:var(--btn-ink);
  color:#fff;
  box-shadow:var(--sh-rest);
}
.ibtn-primary:hover{
  background-color:var(--btn-ink-hover);
  filter:none;                    /* 彩度・明度いじりをやめる（色相を変えない） */
  box-shadow:var(--sh-hover);
}
.ibtn-primary .arw{ background:rgba(255,255,255,.2); }

/* 副ボタンも影だけ中立化する（仕様書「影に色を付けない」）。
   背景の btn_ghost.png はそのまま使います。 */
.ibtn-ghost{ box-shadow:var(--sh-rest); }
.ibtn-ghost:hover{ box-shadow:var(--sh-hover); }

/* ホバーの変化は「-2px ＋ 影を深く」だけ。transition も仕様書に合わせる */
.ibtn{ transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
@media (prefers-reduced-motion: reduce){
  .ibtn{ transition:none; }
  .ibtn:hover{ transform:none; }
}


/* ============================================================
   5. リンク色 #0969DA

   a{color:inherit} を全面的に外すと、ナビ・フッター・カードの
   リンクまで青くなって崩れます。本文の中に置かれたリンクだけに
   限定して当てます。新しく本文リンクを書くときは class="link" を
   付けてください（マークアップ側の指示は detail_notes.md「C」）。
============================================================ */
.link,
.article a:not([class]),
.faq .a a:not([class]),
.sec-lead a:not([class]),
.price-note a:not([class]),
.env-foot a:not([class]),
.todo-box a:not([class]),
.risk-note a:not([class]){
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:.07em;
  text-underline-offset:.18em;
  transition:opacity .2s ease;
}
.link:hover,
.article a:not([class]):hover,
.faq .a a:not([class]):hover{ opacity:.75; }

/* 色面・暗い面の上では #0969DA が沈むので、現在の文字色に合わせる */
.panel .link, .section--brand .link, footer .link{
  color:currentColor;
  text-decoration-color:currentColor;
}


/* ============================================================
   6. フォーカスリング（現状このサイトには指定なし）

   :where() は詳細度 0 なので、既存の :hover / :focus の見た目を
   壊しません。キーボード操作のときだけ出ます（マウスでは出ない）。
============================================================ */
:where(a, button, summary, input, select, textarea, [tabindex], details){
  outline-color:var(--focus-ring);
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}
/* ピル型ボタンは少し離した方が輪郭が読める */
.ibtn:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
/* style.css:736 が :focus で outline:none にしているので、明示的に戻す
   （詳細度は同じ 0,2,1。detail.css が後なので勝ちます） */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* 面の色ごとにリングの色を変える。
   青リングは緑パネル(2.3:1)・ピンクパネル(2.6:1)で 3:1 を割るため、
   カラーパネルの上は黒、暗い面の上は白にします。 */
.panel :focus-visible{ outline-color:var(--ink); }          /* 黄/緑/桃/青パネル */
footer :focus-visible,
.section--brand :focus-visible,
.b6-final :focus-visible{ outline-color:#fff; }             /* 濃紺・青紫の面 */


/* ============================================================
   7. フッター（#24292F / 120px 0）
============================================================ */
footer{
  background:#24292f;
  padding-block:120px;            /* 参考サイト実測 */
}
@media (max-width:1000px){
  footer{ padding-block:72px; }   /* 狭い画面で 120px は間延びするため */
}
/* #24292F 上でのコントラスト調整。
   .45 のままだと 4.08:1 で 12px 文字が AA に届かないので .62（6.5:1）へ */
.f-bottom{ color:rgba(255,255,255,.62); }
.f-brand p{ color:rgba(255,255,255,.62); }


/* ============================================================
   8. .sr-only ユーティリティ

   ★ 参考サイトのように「見出しを <p> にして <h1>〜<h4> を
     .sr-only で別置きする」構造は真似しないでください（SEO不利）。
     見えている見出しは今まで通り h1〜h4 のまま書きます。
     このクラスは、スキップリンクや「以下は表形式です」のような
     補助テキスト用です。
============================================================ */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* フォーカスしたときだけ現れる版（スキップリンク用） */
.sr-only-focusable:not(:focus):not(:focus-within){
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:fixed;
  top:12px; left:12px;
  z-index:10001;                  /* ヘッダー(10000)より前 */
  padding:10px 18px;
  border-radius:999px;
  background:var(--btn-ink);
  color:#fff;
  font-size:14px; font-weight:700;
  text-decoration:none;
  box-shadow:var(--sh-rest);
}


/* ============================================================
   9. スクロールバー

   参考サイトを実測したところ scrollbar-width は auto（=既定のまま）で、
   スクロールバーには一切スタイルが当たっていませんでした。
   よってページ全体のスクロールバーは触りません。

   ただし .tablewrap は overflow-x:auto の「中の横スクロール」で、
   macOS の overlay scrollbar では棒が出ず、横に続きがあること自体が
   伝わりません。ここだけ細く常時表示にします。
============================================================ */
.tablewrap{
  scrollbar-width:thin;
  scrollbar-color:#c9ced6 transparent;
}
.tablewrap::-webkit-scrollbar{ height:10px; }
.tablewrap::-webkit-scrollbar-track{ background:transparent; }
.tablewrap::-webkit-scrollbar-thumb{
  background:#c9ced6;
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
.tablewrap::-webkit-scrollbar-thumb:hover{ background:#aab2bd; background-clip:content-box; }


/* ============================================================
   46. 仕上げ（見出しグラフィック・ピル・積層の高さ）
============================================================ */
/* ============================================================
   46-1. 未使用パーツの配置と、積層パネルの高さ揃え

   ■ 置き場所
     assets/style.css の「末尾」に、この内容をまるごと追記してください。
     38章（.deco-*）・40〜41章（.ui-* / .has-*）より後ろに置くこと。
     ここは既存の値を意図的に上書きします。前に置くと効きません。

   ■ 中身
     1. 見出しに添えるグラフィックの寸法補正（仕様書の 1.25〜1.3倍 に合わせる）
     2. 全周角丸パネルの中で使う小物（.deco-panel__foot / ピルの並び）
     3. 積層4枚の高さ揃え（1023〜1359px のばらつきを 817〜893px に収める）

   ■ HTML 側の変更とセットです
     このCSSだけでは高さは揃いません。blocks/polish.md の
     「4. 積層パネルの高さを揃える」と「5-2. width / height 属性の追加」を
     必ず一緒に入れてください。特に 5-2 を入れないと、画像が届く前と後で
     パネルの高さが数百px変わったままになります。

   ■ JavaScript は使いません
     IntersectionObserver・スクロール監視は一切ありません。
     追加したアニメーションもありません。
============================================================ */


/* ============================================================
   1. 見出しに添えるグラフィック（.has-sparkle / .has-target）

   41章では 1.24em になっています。仕様書は「文字サイズの 1.25〜1.3倍」。
   56px の見出しに対して 1.28em＝71.7px となり、仕様の 72px と一致します。
   40章の .ui-sparkle / .ui-target（1.28em）とも数値が揃います。
============================================================ */
.has-sparkle::after,
.has-target::after{
  width:1.28em;
  height:1.28em;
}

/* 狭い画面では見出しが3〜4行に折れるため、少し小さくする */
@media (max-width:640px){
  .has-sparkle::after,
  .has-target::after{width:1.1em;height:1.1em;margin-left:.18em}
}


/* ============================================================
   2. 全周角丸パネルの中で使う小物

   38章の .deco-card-panel / .deco-pills はそのまま使います。
   足りないのは「パネル末尾の一行」だけなので、それだけ足します。
============================================================ */

/* 見出し → ピル → 締めの一行、の順で置く。ピルの上の余白。
   幅を 824px（200×4 + 8×3）に固定して、8個を 4列×2行にそろえます。
   .wrap の 1200px のままだと 5個＋3個の不揃いな2行になります。
   ピルを 6個にするなら 616px、10個にするなら 1032px（5列）です。 */
.deco-card-panel .deco-pills{
  margin:clamp(24px,3vw,40px) auto 0;
  max-width:824px;
}

/* ink（#24292F）の面では白線が強く出るので、うっすらまで落とす */
.deco-card-panel--ink .deco-wave{--deco-wave-alpha:.12}

/* パネル末尾の一行（.b3-ready__foot と同じ役目・別クラス） */
.deco-panel__foot{
  max-width:760px;
  margin:clamp(28px,3.4vw,44px) auto 0;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.6;
  text-align:center;
  color:currentColor;
}
/* 明るい面（yellow / pink / tint）に置いたときは濃色の枠にする */
.deco-card-panel--yellow .deco-panel__foot,
.deco-card-panel--pink   .deco-panel__foot,
.deco-card-panel--tint   .deco-panel__foot{
  background:rgba(36,41,47,.06);
  border-color:rgba(36,41,47,.14);
}


/* ============================================================
   3. 積層4枚の高さ揃え

   ■ なぜ揃えるか
     参考サイトの積層4枚は 720〜860px に収まっています。
     こちらは（画像を読み終えた状態・1440px幅で）
       1枚目 1023 / 2枚目 1359 / 3枚目 817 / 4枚目 1244 px
     とばらついており、下の面が上がってくる「積み重ね」が見えません。
     1画面に収まらない面ができると、sticky で重なる前に読み終わってしまいます。

   ■ どこまで詰めるか
     パネルの高さ ＝ 上下パディング(80 + 100.8 = 180.8px) ＋ .wrap の高さ。
     目標 760〜900px なので、.wrap を 580〜720px に収めます。
     見出しブロック（.sec-head）が 260px を占めるため、
     見出しの下に置ける中身は 380〜420px が上限です。

   ■ 適用後（1440px幅・画像読み込み後の実測）
       1枚目 893 / 2枚目 873 / 3枚目 817 / 4枚目 893 px
     1280px幅では 855 / 836 / 789 / 844 px。
     3枚目（ピンク）は元から範囲内なので触っていません。

   ■ 数値を触るときの順番
     高さを増やしたくなったら、まず画像の max-width を戻してください。
     文字サイズと行間（見出し 1.3 / 本文 1.6）は仕様なので動かさないこと。
============================================================ */

/* ---- 4枚共通：見出し下の余白 48px → 34px --------------------------------
   4枚とも見出しの下に必ず入る余白なので、ここだけで合計 56px 縮みます。 */
.b3-panel .b3-head{margin-bottom:clamp(24px,2.6vw,34px)}


/* ---- 1枚目・青：社員証カードを一回り小さくする -------------------------
   このパネルの高さは「社員証（508px）」が決めていました。右の本文は 427px で、
   カードの方が高いので、本文をいくら削っても縮みません。カードから削ります。
   写真 186→140px、内側の余白と行間を詰めて 508 → 392px。 */
.b3-employee .b3-idcard__body{padding:clamp(20px,2vw,24px)}
.b3-employee .b3-idcard__photo{width:clamp(118px,11vw,140px);margin:10px auto 12px}
.b3-employee .b3-idcard__name{font-size:clamp(19px,1.7vw,22px)}
.b3-employee .b3-idcard__meta{margin-top:12px;padding-top:12px;gap:7px}


/* ---- 2枚目・黄：横レールを外したので、2つを中央に寄せる ----------------
   3ステップの横レール（253px）を HTML 側で削除しています。
   右の列が 720px のまま空くと図が中央から外れて見えるため、
   列幅を実寸に近づけて、2つまとめて中央に置きます。 */
.b3-flow__top{
  grid-template-columns:minmax(0,300px) minmax(0,420px);
  justify-content:center;
}
/* 図 560 → 340px。スマホ（361px）とほぼ同じ高さになり、左右が釣り合います */
.b3-flow__art img{max-width:340px}


/* ---- 4枚目・緑：図を小さく、数字カードの内側を詰める -------------------
   巨大数字（144px）は仕様なので触りません。周りだけ詰めます。
   図 460→288px、カード内側 44→30px、箇条書きは HTML 側で3件に。 */
.b3-ready__art img{max-width:288px}
.b3-figs{margin-top:clamp(26px,2.8vw,32px)}
.b3-fig{padding:clamp(24px,2.3vw,30px)}


/* ---- 狭い画面 -----------------------------------------------------------
   36章は 1000px 未満で .b3-flow__top を1列に戻します。
   上の 2枚目の指定はその 36章より後ろに来るため、この打ち消しが無いと
   901〜1000px で1列に戻らなくなります。**必ず 1000px で揃えること。**
   縦積みになれば横幅の取り合いが無くなるので、図も元の大きさに戻します。 */
@media (max-width:1000px){
  .b3-flow__top{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .b3-flow__art img{max-width:420px}
  .b3-ready__art img{max-width:360px}
}


/* ============================================================
   47. 下層ページ：資料・FAQ・問い合わせ・記事
============================================================ */
/* ============================================================================
   pages_rest.css — docs / faq / contact / blog / blog-article の5ページ専用

   ■ 統合先
     assets/style.css の「末尾」に追記してください。
     （assets/pages.css でも動きますが、既存の .pg- / .fl- は style.css 側に
       入っているため、同じ場所にまとめたほうが探しやすいはずです）

   ■ 既存クラスの扱い
     単独セレクタでの上書きは1つもありません。
     既存クラスに触れているのは、次の「複合セレクタ」だけです。
       .ct-card.form            … 色面の上に載せるフォームの箱だけを作り替える
       .ct-panel .field 系       … 色面の上での入力欄の見え方
       .bl-posts.posts / .post   … 一覧の枠（プレースホルダ）の見た目だけ
       .ar-body.article 系       … 記事本文の読みやすさ（幅・行間・見出し間隔）
     いずれも「そのページの器の中に入ったときだけ」効きます。
     他ページの同名クラスには影響しません。

   ■ 接頭辞
     .pg2- … 5ページ共通で足した部品
     .dc-  … docs.html（サービス資料）
     .fq-  … faq.html（よくあるご質問）
     .ct-  … contact.html（お問い合わせ）
     .bl-  … blog.html（記事一覧）
     .ar-  … blog-article.html（記事テンプレート）

   ■ 使っているトークン（すべて style.css の :root で定義済み）
     --panel-blue / --panel-yellow / --panel-green / --panel-pink / --panel-purple
     --ink / --sub / --line / --surface / --bg-tint
     --r-panel(60px) / --r-card(40px) / --r-item(24px)
     --sh-rest / --sh-hover / --blue / --purple / --blue-dp / --purple-dp

   ■ 動き
     スクロール監視（IntersectionObserver）は使いません。
     無限ループ（浮遊）と、読み込み時1回だけの2種類のみです。
     器（.pg-panel / .pg-hic / .pg-deco / .pg-note / .pg-rise / .fl-rail）は
     すでに style.css にあるものをそのまま使い回しています。
============================================================================ */


/* ============================================================================
   0. 5ページ共通で足した部品
============================================================================ */

/* ---- 見出しの下に置く索引チップ ----
   ページ内のアンカーへ飛ばす。絵を左に抱かせて、文字だけの列にしない。
   色面の上でも白地でも使えるよう、色は2系統用意しています。 */
.pg2-chips{
  display:flex;flex-wrap:wrap;
  gap:clamp(10px,1.2vw,14px);
  list-style:none;margin:0;padding:0;
}
.pg2-chips a{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;border-radius:999px;
  background:#fff;color:var(--ink);text-decoration:none;
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pg2-chips a:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.pg2-chips img{width:34px;height:34px;flex:none;object-fit:contain}
.pg2-chips .en{font-size:12px;color:var(--sub);letter-spacing:.06em}

/* 白地の上に置くとき。白の上に白だと沈むので、面を淡くして枠線を足す */
.pg2-chips--tint a{background:var(--surface);border:1px solid var(--line)}

/* ---- 2カラムの器（左に文章、右に絵）----
   色面の頭でよく使う形。絵の列を広げすぎると見出しが余計に折り返します。 */
.pg2-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);
  gap:clamp(24px,3.6vw,52px);align-items:center;
}
.pg2-lead__art{justify-self:center;width:min(100%,240px)}
.pg2-lead__art img{
  width:100%;height:auto;
  filter:drop-shadow(0 26px 44px rgba(24,24,27,.28));
  animation:pgBob 6s ease-in-out infinite;
}

/* ---- 色面の上に置く白い箱 ----
   黄・ピンクの面では文字が濃色になるため、箱の中は常に濃色文字にします。 */
.pg2-sheet{
  padding:clamp(22px,2.6vw,34px) clamp(24px,2.8vw,38px);
  border-radius:var(--r-item);
  background:#fff;color:var(--ink);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pg2-sheet:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.pg2-sheet h3{font-size:clamp(17px,1.7vw,20px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.pg2-sheet p{margin-top:12px;font-size:14px;color:var(--sub);line-height:1.6;letter-spacing:-.01em}

/* ---- 色面の上に載せるフォームの箱 ----
   既存の .form は「白地の上で中央に置く」前提（max-width:680px + auto）です。
   色面の中に入れると中央に寄って左右が崩れるため、外枠だけを作り替えます。
   .form の中身（.field / .req / .form-foot）には触れていません。 */
.pg2-formcard.form{
  max-width:none;margin:0;
  padding:clamp(26px,3.2vw,44px);
  border-radius:var(--r-card);
  border-color:transparent;
  box-shadow:0 24px 48px -24px rgba(24,24,27,.5), 0 0 1px rgba(24,24,27,.3);
  /* ★これが無いと項目名が消えます★
     青・緑・紫の面は文字色が白です。白い箱を乗せても色は継承されるため、
     ラベル（会社名・お名前…）が白のまま白地に乗って見えなくなります。 */
  color:var(--ink);
}
.pg2-formcard .form-foot p{color:var(--sub)}
/* 3択のラジオを1行に収める。既定の min-width:180px だと2＋1に折れます */
.pg2-formcard .radio-row label{flex:0 1 auto;min-width:0}


/* ---- 巨大数字 ----
   仕様の「144px・英数フォント」枠。掲げてよい数字だけに使うこと。 */
.pg2-fig{display:flex;align-items:baseline;gap:.1em;line-height:1}
.pg2-fig .en{font-size:clamp(64px,10vw,144px);font-weight:700;letter-spacing:.01em}
.pg2-fig small{font-size:clamp(16px,1.9vw,26px);font-weight:700;letter-spacing:-.02em}


/* ============================================================================
   1. サービス資料（docs.html）
============================================================================ */

/* ---- 1-1. 青パネル：資料の目次 ------------------------------------------
   「登録なしで読める」ことを先に見せる面。巨大数字は章の数だけ。
   章を増減したら、この数字も必ず直すこと（下の .dc-toc の項目数と一致させる）。 */
.dc-toc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(12px,1.6vw,18px);
  list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
}
.dc-toc li{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,2vw,24px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.dc-toc li:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.dc-toc .en{font-size:clamp(26px,3vw,38px);line-height:1;opacity:.65}
.dc-toc b{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.4}

/* ---- 1-2. 章のカード（白地）---------------------------------------------
   左に絵と巨大な番号、右に見出しと内容。番号は絵の背後に薄く敷きます。 */
.dc-chapters{display:grid;gap:clamp(16px,2vw,24px)}
.dc-ch{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,176px) minmax(0,1fr);
  gap:clamp(20px,2.8vw,44px);align-items:start;
  padding:clamp(26px,3vw,44px) clamp(24px,3vw,46px);
  border-radius:var(--r-card);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:transform .2s ease, box-shadow .2s ease;
}
.dc-ch:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}

.dc-ch__side{position:relative;z-index:10;text-align:center}
/* 背後に敷く巨大な番号。文字ではなく面の一部として扱うので薄くする */
.dc-ch__ghost{
  position:absolute;z-index:1;pointer-events:none;
  left:-18px;top:-46px;
  font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(88px,11vw,150px);line-height:1;
  color:rgba(36,41,47,.05);
}
.dc-ch__art{
  position:relative;z-index:10;
  width:clamp(88px,11vw,140px);height:auto;margin-inline:auto;display:block;
  filter:drop-shadow(0 18px 30px rgba(24,24,27,.2));
  transition:transform .2s ease;
}
.dc-ch:hover .dc-ch__art{transform:translateY(-6px) scale(1.04)}
.dc-ch__no{
  position:relative;z-index:10;display:inline-block;margin-top:14px;
  padding:5px 14px;border-radius:999px;
  background:#f7e7d7;border:1px solid #e8c8b3;color:#9a4e32;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
}

.dc-ch__body{position:relative;z-index:10;min-width:0}
.dc-ch__body h3{font-size:clamp(19px,2vw,26px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.dc-ch__body > p{margin-top:12px;font-size:14px;color:var(--sub);line-height:1.6;letter-spacing:-.01em}
.dc-ch__items{
  list-style:none;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);
  display:grid;gap:10px;
}
.dc-ch__items li{
  position:relative;padding-left:18px;
  font-size:13.5px;color:var(--sub);line-height:1.6;letter-spacing:-.01em;
}
.dc-ch__items li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;
  background:#b7654c;opacity:.7;
}
.dc-ch__items li b{color:var(--ink);font-weight:700}

/* ---- 1-3. スライドの枠（中身は未完成なのでプレースホルダのまま）--------
   ★資料が刷新されるまで、この枠は枠のまま置いておくこと★
   画像が用意できたら .dc-slide__frame の中身を <img> に差し替えます。
   破線の枠は「まだ入っていない」ことを一目で分かるようにするためのものです。 */
.dc-slides{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:clamp(16px,2vw,24px);
}
.dc-slide{
  border-radius:var(--r-item);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-rest);
}
.dc-slide__frame{
  position:relative;aspect-ratio:16/9;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#f6f8fa 0%,#eef2fb 55%,#f5eeff 100%);
  border-bottom:1px solid var(--line);
}
.dc-slide__frame::before{
  content:'';position:absolute;inset:14px;
  border:2px dashed rgba(36,41,47,.16);border-radius:14px;
}
.dc-slide__ph{
  position:relative;z-index:1;max-width:80%;
  font-size:12px;line-height:1.75;letter-spacing:-.01em;
  color:#8891ad;text-align:center;
}
.dc-slide__cap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;font-size:12.5px;color:var(--sub);letter-spacing:-.01em;
}
.dc-slide__cap .en{
  font-size:12px;padding:3px 10px;border-radius:999px;
  background:var(--surface);color:var(--sub);letter-spacing:.04em;
}

/* ---- 1-4. 黄パネル：PDFのダウンロード ----------------------------------
   ★フォームの項目は増やさないこと★（会社名・お名前・メールの3つ）
   受け取り方の説明を左、フォームを右に置いて、入力の圧を下げています。 */
.dc-dl{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(26px,3.4vw,56px);align-items:start;
}
.dc-dl__aside h3{font-size:clamp(18px,1.9vw,24px);font-weight:700;letter-spacing:-.04em;line-height:1.3}
.dc-dl__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.dc-dl__list li{
  position:relative;padding-left:18px;
  font-size:14px;line-height:1.6;letter-spacing:-.01em;
}
.dc-dl__list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:rgba(36,41,47,.5);
}

/* 資料ページの先頭フォームは、デスクトップで最初の画面内に収める */
@media (min-width:1001px){
  .docs-download-top{padding:72px 5vw 0}
  .docs-download-top .pg-panel{padding:clamp(52px,4vw,64px) 0 clamp(64px,4.8vw,76px)}
  .docs-download-top .pg-panel > .wrap{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(620px,1.2fr);
    column-gap:clamp(36px,4vw,72px);
    align-items:start;
  }
  .docs-download-top .pg-panel .sec-head{grid-column:1;margin-bottom:0}
  .docs-download-top .dc-dl{display:contents}
  .docs-download-top .dc-dl__aside{grid-column:1;grid-row:2;margin-top:clamp(28px,3vw,44px)}
  .docs-download-top .pg2-formcard.form{grid-column:2;grid-row:1 / span 2}
  .docs-download-top .pg2-formcard.form{padding:clamp(30px,2.6vw,38px)}
  .docs-download-top .field{gap:8px;margin-bottom:18px}
  .docs-download-top .field input{padding:12px 15px}
  .docs-download-top .form-foot{margin-top:20px;padding-top:20px}
  .docs-download-top .form-foot p{margin-top:10px;line-height:1.6}
  .docs-download-top .dc-dl__list{margin-top:14px;gap:8px}
}


/* ============================================================================
   2. よくあるご質問（faq.html）
============================================================================ */

/* ---- 2-1. 質問の並び ------------------------------------------------------
   既存の .faq とは別クラスにしています（既存ページの見た目を変えないため）。
   白い箱を並べるだけにせず、開いているものだけ左に色の帯を出します。 */
.fq-list{display:grid;gap:clamp(10px,1.2vw,14px)}
.fq-list details{
  position:relative;overflow:hidden;
  border-radius:var(--r-item);
  /* 色面（紫）の上にも置くため、文字色を必ず濃色に戻す。
     指定しないと、パネルから継承した白文字が白い箱の上に乗って消えます */
  background:#fff;color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--sh-rest);
  transition:box-shadow .2s ease, transform .2s ease;
}
.fq-list details:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
/* 開いているものだけ、左端に色の帯を出す */
.fq-list details::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--blue),var(--purple));
  opacity:0;transition:opacity .2s ease;
}
.fq-list details[open]::before{opacity:1}

.fq-list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:clamp(20px,2.2vw,26px) clamp(54px,5vw,64px) clamp(20px,2.2vw,26px) clamp(22px,2.4vw,30px);
  font-size:clamp(15px,1.4vw,17px);font-weight:700;letter-spacing:-.02em;line-height:1.5;
}
.fq-list summary::-webkit-details-marker{display:none}
/* 開閉のしるし。＋ と − を1つの要素で作る（画像を増やさない） */
.fq-list summary::after{
  content:'';position:absolute;right:clamp(22px,2.4vw,30px);top:clamp(24px,2.6vw,31px);
  width:16px;height:16px;flex:none;
  background:
    linear-gradient(currentColor,currentColor) center/16px 2.4px no-repeat,
    linear-gradient(currentColor,currentColor) center/2.4px 16px no-repeat;
  color:var(--blue);
  transition:transform .2s ease;
}
/* 開いたら縦棒を消して「−」にする。
   回すのは 180deg（横棒のまま半回転）。90deg にすると縦棒になってしまいます */
.fq-list details[open] summary::after{
  transform:rotate(180deg);
  background:linear-gradient(currentColor,currentColor) center/16px 2.4px no-repeat;
}
/* 質問の頭に置く小さな印。Q/A の文字は使わず、丸で受ける */
.fq-list summary i{
  flex:none;width:26px;height:26px;border-radius:50%;margin-top:1px;
  background:linear-gradient(120deg,rgba(1,118,240,.12),rgba(125,59,255,.14));
  display:grid;place-items:center;
}
.fq-list summary i::before{
  content:'';width:9px;height:9px;border-radius:50%;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.fq-list .a{
  padding:0 clamp(22px,2.4vw,30px) clamp(22px,2.4vw,28px) clamp(64px,6vw,72px);
  font-size:14px;color:var(--sub);line-height:1.9;letter-spacing:-.01em;
}
.fq-list .a b{color:var(--ink);font-weight:700}

/* ★未確定の回答に付ける印★
   回答文そのものは変えないこと。条件が確定するまで断定した書き方に直さないこと。 */
.fq-hold{
  display:flex;width:fit-content;align-items:center;gap:7px;
  margin-bottom:10px;padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.02em;
  background:#fdf3d8;color:#8a6300;
}
.fq-hold::before{content:'';width:6px;height:6px;border-radius:50%;background:#e0b13c}

/* ---- 2-2. カテゴリの見出し帯 ----
   4つのカテゴリを、面の色と絵で見分けられるようにします。 */
.fq-cat{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);flex-wrap:wrap}
.fq-cat__art{
  width:clamp(56px,6vw,76px);height:auto;flex:none;
  filter:drop-shadow(0 14px 22px rgba(24,24,27,.2));
}


/* ============================================================================
   3. お問い合わせ（contact.html）
============================================================================ */

/* ---- 3-1. 青パネルの中のフォーム ---------------------------------------
   ★フォームの項目は増やさないこと★
   会社名・お名前・メール・電話（任意）・本文（任意）の5つで固定です。
   増やすほど、社長層の離脱は確実に増えます。 */
#contact-form .pg-panel{
  background:
    radial-gradient(circle at 14% 16%,rgba(255,255,255,.20) 0,rgba(255,255,255,0) 31%),
    radial-gradient(circle at 88% 84%,rgba(24,104,232,.24) 0,rgba(24,104,232,0) 36%),
    var(--panel-blue);
  color:#fff;
}
#contact-form .pg-deco--rays{display:block}
#contact-form .ct-form__aside .label{
  color:#fff;-webkit-text-fill-color:#fff;opacity:.78;
}
#contact-form .ct-form__aside h2 em{
  color:#fff;
  text-decoration-color:#ffd16f;
  text-decoration-thickness:.14em;
  text-underline-offset:.15em;
  text-decoration-skip-ink:none;
}
.ct-form{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(26px,3.4vw,56px);align-items:start;
}
.contact-form-peeking-mascots{
  position:absolute;
  z-index:2;
  width:min(36vw,690px);
  max-width:none;
  height:auto;
  left:calc(50% - 80px);
  top:clamp(12px,2.5vw,36px);
  pointer-events:none;
}
.contact-form-peeking-mascots--right{display:none}
.contact-form-mascots-mobile{display:none}
/* PCではフォーム上端の2体だけを12px上げる。モバイルの配置は維持する。 */
@media (min-width:1001px){
  .contact-form-peeking-mascots{transform:translate(10px,-12px)}
}
.contact-form-top .pg2-formcard{margin-top:clamp(142px,10vw,188px);position:relative;z-index:3}
.ct-form__aside h2{font-size:clamp(24px,3.2vw,42px)}
.ct-form__list{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;gap:14px}
.ct-form__list li{
  position:relative;padding-left:30px;
  font-size:14.5px;line-height:1.7;letter-spacing:-.01em;
}
.ct-form__list li::before{
  content:'';position:absolute;left:0;top:.15em;
  width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.28);
}
.ct-form__list li::after{
  content:'';position:absolute;left:6px;top:.5em;
  width:8px;height:5px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg);
}

/* （フォームの箱は共通部品 .pg2-formcard に置いています。0章を参照） */


/* ---- 3-2. 問い合わせ後の3ステップ ---------------------------------------
   flow.html と同じレール（.fl-rail / .fl-step）をそのまま使っています。
   同じ意味のものは同じ形で見せる、という理由です。
   ここでは絵の下の本文が短いため、線の下の余白だけ少し詰めます。 */
.ct-rail .fl-step__marker{margin-bottom:clamp(16px,2vw,24px)}
.ct-rail .fl-step__body p{margin-top:10px}
/* 問い合わせ後の3ステップは、丸・線・見出しを同じ軸で揃える */
.ct-rail::before{
  background:linear-gradient(90deg,var(--blue) 0%,var(--purple) 100%);
}
.ct-rail .fl-step__body{text-align:center}
.ct-rail .fl-step__body ul{text-align:left}


/* ---- 3-3. 下から生えてくる緑の面：その他の連絡方法 ----------------------
   フッター直前なので、上端だけ角丸にする型（.pg-panel--rise）を使います。 */
.ct-ways{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2vw,24px);
}
.ct-way{
  display:flex;gap:16px;align-items:flex-start;
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.6vw,34px);
  border-radius:var(--r-item);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ct-way:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.ct-way__ic{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#00795c;
}
.ct-way__ic svg{width:20px;height:20px}
.ct-way h3{font-size:16.5px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.ct-way ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ct-way li{font-size:13.5px;line-height:1.65;letter-spacing:-.01em;opacity:.92}


/* ============================================================================
   4. 記事一覧（blog.html）
============================================================================ */

/* ---- 4-1. 青パネル：何を書くか ----
   ★記事が1本もないので、本数や更新頻度は書かないこと★
   ここに書けるのは「書く姿勢」だけです。約束になる数字を入れないでください。 */
.bl-policy{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(26px,3vw,40px);
}

/* ---- 4-2. 一覧の枠 ------------------------------------------------------
   ★記事が入るまで、この枠はプレースホルダのままにすること★
   .post.is-ph の中身（.ph-thumb / .ph-bar / .ph-note）は触っていません。
   ここで整えているのは、枠の受け皿の見た目だけです。 */
.bl-posts.posts{grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}
.bl-posts .post{
  border-radius:var(--r-item);
  border-color:var(--line);
  box-shadow:var(--sh-rest);
}
.bl-posts .post.is-ph{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.bl-posts .ph-thumb{
  position:relative;
  background:linear-gradient(150deg,#f6f8fa 0%,#eef2fb 55%,#f5eeff 100%);
}
.bl-posts .ph-thumb::before{
  content:'';position:absolute;inset:12px;
  border:2px dashed rgba(36,41,47,.14);border-radius:12px;
}

/* 一覧の頭に置く、記事が入る位置の説明帯 */
.bl-slotnote{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:clamp(20px,2.4vw,28px);
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border-radius:var(--r-item);
  background:var(--surface);border:1px dashed var(--line);
}
.bl-slotnote p{font-size:13.5px;color:var(--sub);line-height:1.85;letter-spacing:-.01em}
.bl-slotnote b{color:var(--ink);font-weight:800}

/* 記事一覧の見出しは、本文と同じ黒で統一する */
.bl-latest .sec-head h2 em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}


/* ============================================================================
   5. 記事テンプレート（blog-article.html）
============================================================================ */

/* ---- 5-1. 本文の読みやすさ ----------------------------------------------
   ★中身は空のまま維持すること★ ここで直しているのは「読める形」だけです。
   1行の長さは全角36〜40字あたりが上限です。760px だと環境によっては
   40字を超えて視線が戻りにくくなるため、少し詰めています。 */
.ar-body.article{max-width:720px}
.ar-body.article p{font-size:16px;line-height:2.0;margin-bottom:26px}
.ar-body.article li{font-size:15.5px;line-height:1.95}
/* 見出しは「前を広く、後ろを狭く」。段落と見出しの所属が目で分かるようにする */
.ar-body.article h2{
  margin:clamp(52px,5.4vw,76px) 0 20px;
  padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line);
  letter-spacing:-.04em;line-height:1.3;
}
.ar-body.article h3{margin:clamp(34px,3.4vw,44px) 0 14px;letter-spacing:-.03em;line-height:1.35}

/* 章の番号。h2 の上に小さく出す（目次の番号と揃える） */
.ar-h2no{
  display:block;margin-bottom:10px;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--blue-dp);
}

/* ---- 5-2. 目次 ---- */
.ar-toc{
  padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  border-radius:var(--r-item);
  background:var(--surface);border:1px solid var(--line);
}
.ar-toc > b{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:-.01em;
}
.ar-toc > b::before{
  content:'';width:18px;height:18px;border-radius:6px;
  background:linear-gradient(120deg,var(--blue),var(--purple));
}
.ar-toc ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:artoc}
.ar-toc li{
  counter-increment:artoc;
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--sub);line-height:1.6;
}
/* 未記入の枠は、淡いサーフェスの上だと消えてしまうので少しだけ濃くする
   （実際の記事を書いたら .ph-bar ごと消えます） */
.ar-toc .ph-bar{background:linear-gradient(90deg,#e0e6f1,#eef1f8)}
.ar-toc li::before{
  content:counter(artoc,decimal-leading-zero);
  flex:none;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--blue-dp);
}

/* ---- 5-3. 記事末のCTA（色面）-------------------------------------------
   記事の途中のCTAは白いまま（.article-cta）、末尾だけ色面にします。
   同じ見た目のCTAが2回続くと、2つ目が目に入りません。 */
.ar-endcta{text-align:center}
.ar-endcta h2{
  border-top:0;padding-top:0;margin-top:0;
  font-size:clamp(24px,3.2vw,44px);
}
.ar-endcta .sec-lead{margin-top:16px}
.ar-endcta .cta{justify-content:center;margin-top:clamp(24px,2.8vw,34px)}


/* ============================================================================
   6. 画面が狭いとき
============================================================================ */
@media (max-width:1000px){
  .dc-ch{grid-template-columns:minmax(0,140px) minmax(0,1fr)}
  .ct-form{grid-template-columns:minmax(0,1fr)}
  /* stickyヘッダーの負マージンの下からカードを始め、上部のキャラを隠さない。 */
  .contact-form-top{padding:calc(var(--header-h) + 24px) clamp(14px,3.2vw,48px) 0}
  /* 説明文の上ではなく、PC版と同じく白いフォーム上端に乗せる。 */
  .contact-form-peeking-mascots{
    /* モバイルではフォーム基準の画像を使う。説明文の折返しでフォームが
       下がっても、キャラクターだけが取り残されないようにする。 */
    display:none;
  }
  .contact-form-mascots-mobile{
    display:block;
    position:absolute;
    z-index:2;
    width:min(74vw,460px);
    max-width:none;
    height:auto;
    left:50%;
    /* 透明画像内の前足の下端（画像高の約70.3%）を、フォーム上端に
       ぴったり合わせる。幅が変わっても同じ基準で追従する。 */
    top:0;
    transform:translate(-50%,calc(-70.3% + 4px));
    pointer-events:none;
  }
  .contact-form-mascots-mobile--left{clip-path:inset(0 50% 0 0)}
  .contact-form-mascots-mobile--right{
    clip-path:inset(0 0 0 50%);
    /* 右のキャラクターだけをわずかに内側へ寄せる。 */
    transform:translate(-50%,calc(-70.3% + 4px)) translateX(-10px);
  }
  .contact-form-top .pg2-formcard{margin-top:clamp(120px,18vw,170px)}
  .dc-dl{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  .pg2-lead{grid-template-columns:minmax(0,1fr)}
  .pg2-lead__art{order:-1;width:min(66%,220px)}

  /* 章カード：絵と番号を横並びにして、縦の間延びを防ぐ */
  .dc-ch{grid-template-columns:minmax(0,1fr);gap:20px}
  .dc-ch__side{display:flex;align-items:center;gap:16px;text-align:left}
  .dc-ch__art{width:clamp(72px,18vw,104px);margin-inline:0}
  .dc-ch__no{margin-top:0}
  .dc-ch__ghost{left:auto;right:-4px;top:-30px}

  .fq-list summary{gap:12px}
  .fq-list .a{padding-left:clamp(22px,2.4vw,30px)}
}

@media (max-width:560px){
  .pg2-chips a{font-size:12.5px;padding:6px 14px 6px 6px}
  .pg2-chips img{width:28px;height:28px}
  .dc-slides{grid-template-columns:minmax(0,1fr)}
  .ar-body.article p{font-size:15.5px;line-height:1.95}
}


/* ============================================================================
   7. 動きを減らす設定の端末では止める（仕様の必須項目）
============================================================================ */
@media (prefers-reduced-motion:reduce){
  .pg2-lead__art img{animation:none}
  .pg2-chips a,.pg2-sheet,.dc-toc li,.dc-ch,.dc-ch__art,
  .fq-list details,.ct-way,.pg2-formcard{transition:none}
  .pg2-chips a:hover,.pg2-sheet:hover,.dc-toc li:hover,.dc-ch:hover,
  .dc-ch:hover .dc-ch__art,.fq-list details:hover,.ct-way:hover{transform:none}
  .fq-list summary::after{transition:none}
}


/* ============================================================
   48. カードを参考サイトの実測形式に統一
============================================================ */
/* ============================================================
   recard — カードを参考サイトの実測形式に統一する

   ■ 追記先
     assets/style.css の「末尾」にそのまま貼ってください。
     既存の .why-card / .b4-dept / .b2-card のCSSは消さないでください
     （他ページからの参照が将来出たときのために残しておきます。
       index.html 側でクラス名を .rc- に差し替えるので、
       残っていても index.html には影響しません）。

   ■ 接頭辞
     .rc-（recard）。既存クラスとは一切衝突しません。

   ■ 実測仕様（YOOM_SPEC.md 7章）
     257 × 294px / 角丸24px / 枠線 1.208px solid #EAEEF2 /
     内側19px / gap 24px / 影なし（枠線だけ）/
     ホバー translateY(-2px) ＋ box-shadow 0 8px 24px rgba(0,0,0,.12)
     上：グラフィック（面に色）＋左下にバッジ2〜3個
     下：タイトル20px/700 ＋ 説明14px/1.6
     バッジ：28×28px を 39×39px の白丸に入れ、
             :not(:first-child){margin-left:-5px} で重ねる
             影 7.247px 7.247px 24.156px rgba(30,60,70,.24)
============================================================ */

/* ------------------------------------------------------------
   並べ方
   カード幅は 257px 固定です（実測値）。
   1fr で伸ばすと実測値から外れるため、auto-fit で
   「入るだけ並べて中央寄せ」にしています。
   1200px の .wrap（内側1072px）では3枚/行になります。
------------------------------------------------------------ */
.rc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,257px);
  justify-content:center;
  gap:24px;                     /* 実測：カード間 24px */
  margin-top:clamp(28px,3.2vw,44px);
}

/* ------------------------------------------------------------
   カード本体
------------------------------------------------------------ */
.rc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  width:257px;                  /* 実測 */
  height:294px;                 /* 実測 */
  border-radius:24px;           /* 実測 */
  border:1.208px solid #EAEEF2; /* 実測 */
  background:#fff;
  box-shadow:none;              /* 実測：影なし。枠線だけ */
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;

  /* 面の色。--rc-a=濃い側 / --rc-b=淡い側 / --rc-key=チップの文字色
     既定は青。カードごとに下の修飾クラスで差し替える */
  --rc-a:#E8F1FE;
  --rc-b:#F5F9FF;
  --rc-key:#0B5FC2;
}
/* ホバーはこの2つだけ。色相は変えない */
.rc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* ------------------------------------------------------------
   上段：グラフィックの面
   高さ128px。ここに
     ・大きく薄い同じ絵（ghost）を数十pxはみ出させて overflow で切る
     ・主役のグラフィックを右に
     ・日本語ラベルのチップを左上に（画像に文字は焼き込まない）
     ・バッジ2〜3個を左下に
   を重ねます。
------------------------------------------------------------ */
.rc-card__art{
  position:relative;
  flex:none;
  height:128px;
  overflow:hidden;
  background:linear-gradient(150deg,var(--rc-a),var(--rc-b));
  border-bottom:1px solid #EAEEF2;
}

/* 奥行き用。数十pxはみ出させて切る（参考サイトの流儀） */
.rc-card__ghost{
  position:absolute;right:-44px;top:-38px;
  width:170px;height:auto;
  opacity:.16;z-index:1;pointer-events:none;
}

/* 主役のグラフィック */
.rc-card__gfx{
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  width:84px;height:auto;z-index:2;
  filter:drop-shadow(0 8px 14px rgba(30,60,70,.18));
}

/* 左上のチップ。日本語ラベルは必ずHTMLで重ねる */
.rc-card__chip{
  position:absolute;left:14px;top:12px;z-index:3;
  display:inline-flex;align-items:center;
  height:22px;padding:0 10px;
  border-radius:999px;
  background:#fff;color:var(--rc-key);
  font-size:11px;font-weight:800;line-height:1;letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(30,60,70,.14);
  white-space:nowrap;
}
/* 英字のチップだけ Poppins にして字間をプラスへ振る */
.rc-card__chip--en{
  font-family:'Poppins',sans-serif;
  font-size:10.5px;letter-spacing:.09em;
}

/* ------------------------------------------------------------
   左下のバッジ（密度をつくる主役）
------------------------------------------------------------ */
.rc-card__badges{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:flex;align-items:center;
}
.rc-badge{
  width:39px;height:39px;flex:none;   /* 実測：白丸39px */
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:7.247px 7.247px 24.156px rgba(30,60,70,.24);  /* 実測 */
}
.rc-badge:not(:first-child){margin-left:-5px}              /* 実測：重ねる */
.rc-badge img{
  width:28px;height:28px;                                   /* 実測：アイコン28px */
  object-fit:contain;display:block;
}

/* ------------------------------------------------------------
   下段：文字
   内側19px（実測）。
   高さ294px は固定なので、入る文字数の上限があります。
     ・タイトル1行 ＋ 説明4行  … 入る
     ・タイトル2行 ＋ 説明3行  … 入る
   説明は 14px で 1行あたり全角15文字前後です。
   文言を差し替えるときは、この範囲に収めてください。
------------------------------------------------------------ */
.rc-card__body{
  flex:1;min-height:0;
  padding:19px;
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;
}
.rc-card__title{
  font-size:20px;font-weight:700;
  line-height:1.3;letter-spacing:-.04em;
  color:#24292F;
}
.rc-card__text{
  font-size:14px;font-weight:400;
  line-height:1.6;letter-spacing:-.01em;
  color:#24292F;
}

/* ------------------------------------------------------------
   面の色（8種）
   YOOM_SPEC.md 3章の5色を淡く敷いたものです。
   チップの文字色だけは、白の上で読める濃さに落としています。
------------------------------------------------------------ */
.rc-card--blue  {--rc-a:#DCEAFE;--rc-b:#F2F7FF;--rc-key:#0B5FC2}
.rc-card--sky   {--rc-a:#D6EDFF;--rc-b:#EFF8FF;--rc-key:#0176F0}
.rc-card--yellow{--rc-a:#FFECC2;--rc-b:#FFF9EA;--rc-key:#8A6100}
.rc-card--pink  {--rc-a:#FFDDF0;--rc-b:#FFF2FA;--rc-key:#C43B96}
.rc-card--green {--rc-a:#D2F2E8;--rc-b:#EDFBF7;--rc-key:#00795F}
.rc-card--purple{--rc-a:#E7DDFF;--rc-b:#F6F2FF;--rc-key:#6B2BE0}
.rc-card--coral {--rc-a:#FFDCD1;--rc-b:#FFF1EC;--rc-key:#D24A20}
.rc-card--amber {--rc-a:#FFE7B8;--rc-b:#FFF7E6;--rc-key:#A76F00}

/* ------------------------------------------------------------
   狭い画面
   257px は横幅297px の端末まで入ります。
   それより狭い環境だけ、幅いっぱいに落とします。
------------------------------------------------------------ */
@media (max-width:340px){
  .rc-grid{grid-template-columns:1fr}
  .rc-card{width:100%}
}

/* ------------------------------------------------------------
   動きを減らす設定
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .rc-card{transition:none}
  .rc-card:hover{transform:none}
}


/* ============================================================
   49. 参考サイトの基本カード（比較メーターの置き換え先）
============================================================ */
/* ============================================================================
   yoomcard.css — 参考サイト（lp.yoom.fun）の基本カードの再現

   ■ 貼り方
     assets/style.css の「末尾」に、このファイルの中身をそのまま追記してください。
     既存クラスの上書きはありません（すべて .yc- の新規）。

   ■ 同時に消してよいもの
     assets/style.css の
       「D. 比較メーター（.ochm-vs）」  … 5102行目あたりから .ochm-vs__bar--off まで
       @keyframes ochmGrow
       @media(prefers-reduced-motion) 内の .ochm-vs__bar::before{animation:none}
       @media(max-width:560px) 内の .ochm-vs__bar 2行
     openclaw.html / hermes.html から .ochm-vs のマークアップを外したので、
     残しておいても表示に影響はありませんが、死んだCSSになります。

   ■ 実測値（参考サイトを計測した値。ここは推測ではありません）
     カード      257 × 294px
     角丸        24px
     枠線        1.208px solid #EAEEF2
     内側の余白  19px
     カード間    gap 24px
     影          なし（枠線だけ）
     ホバー      translateY(-2px) ＋ box-shadow 0 8px 24px rgba(0,0,0,.12)
     バッジ      アイコン 28×28px ／ 白丸 39×39px
                 影 7.247px 7.247px 24.156px rgba(30,60,70,.24)
                 :not(:first-child){ margin-left:-5px } で 2〜3個重ねる

   ■ 構成は上下2段で固定です。独自のレイアウトを足さないでください。
     上：グラフィック（面に色を敷き、左下にバッジを重ねる）
     下：タイトル 20px/700 ＋ 説明 14px/1.6

   ■ 動き
     JavaScript は使いません。スクロール監視（IntersectionObserver）は0件です。
     読み込み時に1回だけ立ち上がる fadeInUp と、ホバーの2つだけです。
============================================================================ */

/* ---- 数値をここに集約。触るならこの5つだけ ---------------------------------- */
.yc-cards{
  --yc-w:257px;          /* カード幅 */
  --yc-h:294px;          /* カード高さ */
  --yc-pad:19px;         /* 内側の余白 */
  --yc-gap:24px;         /* カード間 */
  --yc-art:132px;        /* 上段（グラフィック）の高さ。残りが下段になる */
}

/* ---- 並べ方。6枚以下なので静止したグリッドです ------------------------------
   7枚以上に増やすときは、静止グリッドをやめて横に流してください
   （1枚あたり1.5秒。参考サイトの流儀です）。 */
.yc-cards{
  display:grid;
  grid-template-columns:repeat(3,var(--yc-w));
  gap:var(--yc-gap);
  justify-content:center;
  list-style:none;margin:0;padding:0;
}

/* ---- カード本体 ------------------------------------------------------------ */
.yc-card{
  position:relative;
  width:var(--yc-w);height:var(--yc-h);
  border-radius:24px;
  border:1.208px solid #EAEEF2;
  background:#fff;
  box-shadow:none;                 /* 影は付けない。枠線だけで持たせる */
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .2s ease;
}
.yc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* ---- 上段：グラフィック。面に色を敷く -------------------------------------- */
.yc-card__art{
  position:relative;flex:none;
  height:var(--yc-art);
  background:var(--yc-tone,#F6F8FA);
  overflow:hidden;
}
/* 直下の img だけ。> を外すとバッジの中のアイコンまで巻き込みます */
.yc-card__art > img{
  position:absolute;top:50%;left:56%;
  width:118px;height:118px;
  transform:translate(-50%,-50%);
  object-fit:contain;
}

/* ---- 左下に重ねるバッジ。これが密度を作ります ------------------------------ */
.yc-badges{
  position:absolute;left:var(--yc-pad);bottom:12px;z-index:2;
  display:flex;align-items:center;
  margin:0;padding:0;list-style:none;
}
.yc-badge{
  width:39px;height:39px;border-radius:999px;
  background:#fff;
  box-shadow:7.247px 7.247px 24.156px rgba(30,60,70,.24);
  display:grid;place-items:center;
  flex:none;
}
.yc-badge:not(:first-child){margin-left:-5px}
.yc-badge img{width:28px;height:28px;object-fit:contain}

/* ---- 経営視点の業務 Before / After ----------------------------------------- */
.yc-card--workflow{
  border-color:#D9E2EC;
}
.yc-card__art--workflow{
  box-sizing:border-box;
  padding:10px 14px 48px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,0) 58%),
    #EDF3F8;
}
.yc-workflow__compare{
  display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  gap:5px;align-items:center;
}
.yc-workflow__state{
  box-sizing:border-box;
  min-width:0;height:68px;padding:7px 8px 6px;
  border-radius:12px;
  display:flex;flex-direction:column;justify-content:center;
}
.yc-workflow__state > span{
  width:max-content;margin-bottom:5px;padding:2px 5px;border-radius:999px;
  font-size:8px;font-weight:800;line-height:1.2;letter-spacing:.04em;
}
.yc-workflow__state strong{
  font-size:14px;font-weight:800;line-height:1.25;letter-spacing:-.03em;
}
.yc-workflow__state small{
  margin-top:4px;
  font-size:8.5px;font-weight:600;line-height:1.25;
  letter-spacing:-.04em;white-space:nowrap;
}
.yc-workflow__state--before{
  color:#506579;background:rgba(255,255,255,.84);
  border:1px solid #D5DEE7;
}
.yc-workflow__state--before > span{
  color:#60758A;background:#E8EEF3;
}
.yc-workflow__state--after{
  color:#fff;background:linear-gradient(145deg,#155CC5,#0C3F80);
  border:1px solid rgba(11,55,112,.1);
  box-shadow:0 8px 18px rgba(20,82,166,.22);
}
.yc-workflow__state--after > span{
  color:#DCEAFF;background:rgba(255,255,255,.15);
}
.yc-workflow__state--after small{color:#DCEAFF}
.yc-workflow__arrow{
  width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;
  color:#145FCA;background:#fff;border:1px solid #C9D9EA;
  box-shadow:0 4px 10px rgba(25,68,110,.1);
  font-size:14px;font-weight:800;line-height:1;
}

/* ---- 下段：タイトルと説明 --------------------------------------------------- */
.yc-card__body{
  flex:1;padding:var(--yc-pad);
  display:flex;flex-direction:column;gap:6px;
}
.yc-card__body h3{
  font-size:20px;font-weight:700;
  line-height:1.3;letter-spacing:-.04em;
  color:#24292F;
}
.yc-card__body p{
  font-size:14px;font-weight:400;
  line-height:1.6;letter-spacing:-.01em;
  color:#57606A;
}

/* ---- カードの組。どちらが得意かをここで示す -------------------------------- */
.yc-group + .yc-group{margin-top:clamp(28px,3vw,44px)}
.yc-group__key{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 auto clamp(16px,1.6vw,22px);
  padding:8px 18px;border-radius:999px;
  background:#fff;border:1.208px solid #EAEEF2;
  font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:#24292F;
  width:max-content;
}
.yc-group__key::before{
  content:'';width:14px;height:14px;border-radius:5px;flex:none;
}
.yc-group--claw   .yc-group__key::before{background:linear-gradient(120deg,#1668f0,#4b9dff)}
.yc-group--hermes .yc-group__key::before{background:linear-gradient(120deg,#7b3cf5,#b47bff)}
.yc-group--dots .yc-group__key::before{background:linear-gradient(120deg,#385ce8,#7b60de)}
.yc-group--dots .yc-card__art img{object-fit:contain;padding:14px}
/* 中央寄せの translate を残したまま回転させる（translate を落とすとロゴが右下に寄る） */
.yc-group--dots .yc-card:nth-child(2) .yc-card__art img{transform:translate(-50%,-50%) scale(.86) rotate(8deg)}
.yc-group--dots .yc-card:nth-child(3) .yc-card__art img{transform:translate(-50%,-50%) scale(.86) rotate(-8deg)}
.yc-group--dots .yc-card__body a{margin-top:10px;color:#385ce8;font-size:13px;font-weight:800;text-decoration:none}
.yc-group--dots .yc-card__body a:hover{text-decoration:underline}
.yc-group--dots .yc-card__body a:focus-visible{outline:2px solid #385ce8;outline-offset:3px}
.yc-group__key b{font-weight:700;color:#57606A}

/* 見出しを中央に置くための箱。グリッド自体は justify-content:center 済み */
.yc-group{display:flex;flex-direction:column;align-items:center}

/* ---- 読み込み時に1回だけ立ち上がる（スクロール監視は使わない） -------------
   duration と delay をあえて揃えないのが参考サイトの流儀です。 */
@keyframes ycRise{
  from{opacity:0;transform:translateY(60px)}
  to  {opacity:1;transform:translateY(0)}
}
.yc-card{
  opacity:0;
  animation:ycRise var(--yc-dur,1s) cubic-bezier(.68,0,.265,1.2) var(--yc-del,0s) forwards;
}
.yc-cards > .yc-card:nth-child(1){--yc-del:0s;   --yc-dur:.8s}
.yc-cards > .yc-card:nth-child(2){--yc-del:.1s;  --yc-dur:1.2s}
.yc-cards > .yc-card:nth-child(3){--yc-del:.1s;  --yc-dur:1.4s}
.yc-cards > .yc-card:nth-child(4){--yc-del:.2s;  --yc-dur:1.6s}
.yc-cards > .yc-card:nth-child(5){--yc-del:.2s;  --yc-dur:1.2s}
.yc-cards > .yc-card:nth-child(6){--yc-del:.3s;  --yc-dur:1.4s}

/* ---- 画面が狭いとき --------------------------------------------------------
   カードの実寸（257×294）は保ったまま、列数だけ落とします。
   一番狭いところだけは幅を伸ばさないと1枚が入りません。 */
@media (max-width:900px){
  .yc-cards{grid-template-columns:repeat(2,var(--yc-w))}
}
@media (max-width:600px){
  .yc-cards{grid-template-columns:minmax(0,var(--yc-w))}
  .yc-card{width:100%;max-width:var(--yc-w)}
}

@media (prefers-reduced-motion:reduce){
  .yc-card{animation:none;opacity:1;transition:none}
  .yc-card:hover{transform:none}
}

/* ============================================================
   50. フラットキャラクター

   3Dのアイコンとは別系統の絵柄です。参考サイトも
   「大きく見せる所は3D、小さく大量に並べる所はフラット」と
   使い分けています。全部を同じ絵柄にすると単調になります。

   画像は縦横比がばらばら（169x320 〜 320x262）なので、
   正方形の枠に収めて中央に置きます。画像側は触りません。
============================================================ */
.b4-dept__icon,
.rc-card__art img,
.dept-art{
  object-fit:contain;         /* 縦横比を保ったまま枠に収める */
  object-position:center bottom;
}
/* フラットキャラは足元まで見せたいので、下端を基準に置く */
.b4-dept__art .b4-dept__icon{
  width:auto;height:76%;max-width:70%;
  filter:none;                /* フラットな絵に影は付けない */
}
.b4-dept:hover .b4-dept__icon{transform:translateY(-6px) scale(1.04)}

/* 背後に敷く薄い同じ絵も、影を外す */
.b4-dept__ghost{filter:none;opacity:.1}

/* ============================================================
   51. シーンイラストと背景装飾

   シーンイラストは1枚に18要素が入っています。
   小さく表示すると何も読み取れないので、大きく使ってください。
============================================================ */
.b3-panel--employee .b3-emp__art img,
.panel--blue .split-img img{
  border-radius:0;              /* 透過なので枠は不要 */
  filter:none;                  /* フラットな絵に影を付けない */
}

/* ---- 背景に敷くだけの装飾（3種） ----
   単色の画像を mask で流し込み、CSS側で色を決めます。
   色を変えたいときは --deco2-color だけ触ってください。 */
.deco2{
  position:absolute;pointer-events:none;z-index:1;
  background-color:var(--deco2-color, rgba(255,255,255,.16));
}
@supports (mask-image: url('')) or (-webkit-mask-image: url('')){
  .deco2--blob{
    -webkit-mask:url('../images/scene/deco_blob.png') center/contain no-repeat;
            mask:url('../images/scene/deco_blob.png') center/contain no-repeat;
  }
  .deco2--scribble{
    -webkit-mask:url('../images/scene/deco_scribble.png') center/contain no-repeat;
            mask:url('../images/scene/deco_scribble.png') center/contain no-repeat;
  }
  .deco2--shape{
    -webkit-mask:url('../images/scene/deco_shape.png') center/contain no-repeat;
            mask:url('../images/scene/deco_shape.png') center/contain no-repeat;
  }
}
/* mask が使えない環境では何も描かない（白い矩形が残る事故を防ぐ） */
@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))){
  .deco2{display:none}
}

/* ============================================================
   52. シーンバンド（FVの直下）

   左に文章、右に18要素のシーンイラスト。
   スマホでは絵が上、文章が下に入れ替わります。
============================================================ */
.sceneband{
  position:relative;
  padding-block:clamp(48px,6vw,96px);
  background:var(--surface);
  overflow:hidden;
}
.sceneband__inner{
  display:grid;
  /* 左を広めに取ること。狭いと見出しが「働／く。」のように
     不格好な位置で折り返します。 */
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);
  align-items:center;
}
.sceneband__h{
  /* 上限を抑えているのは、大きくすると2行に収まらなくなるためです */
  font-size:clamp(1.35rem,.85rem + 1.55vw,2.05rem);
  line-height:1.5;
  letter-spacing:-.01em;
  margin:.5em 0 0;
  text-wrap:balance;
}
.sceneband__h em{
  font-style:normal;
  color:var(--blue);
}
.sceneband__lead{
  margin-top:1.1em;
  font-size:clamp(.95rem,.9rem + .2vw,1.06rem);
  line-height:2;
  color:var(--sub);
}
.sceneband__art img{
  display:block;
  width:100%;height:auto;
  /* 透過PNGなので、枠も影も付けない */
}

@media (max-width:860px){
  .sceneband__inner{
    grid-template-columns:1fr;
    gap:clamp(18px,4vw,28px);
  }
  .sceneband__art{order:-1}   /* スマホは絵を先に見せる */
}

/* ============================================================
   53. 背景に敷くだけの装飾の配置（deco2 の実配置）

   なぜ足したか：
   参考サイト（lp.yoom.fun）は「主役のイラスト」とは別に、
   背景に敷くだけの絵をもう1層持っています。こちらにはその層が無く、
   ベタ塗りの面がそのまま見えていたため、絵柄が単調に見えていました。
   ここでは 51章の .deco2（mask 方式）を使い、面が広いのに何も
   置かれていない場所だけを選んで密度を足しています。

   置く場所を選んだ基準：
   - すでに装飾を持つ面（黄パネルのドット、桃パネルの曲線）は足さない。
     入れすぎると主役の邪魔になるため、ページ全体で7枚に留めています。
   - 親が position:relative（または sticky）である要素の中にだけ置く。
     静的なセクションに relative を足して回ることはしていません。
     そのため料金・導入の流れ・FAQ など、白地で左右が空いている
     セクションには装飾を置けていません（.section が position:static のため）。
     ここに足したくなったら、まず「そのセクションに relative を足してよいか」を
     判断してください。relative 自体は sticky を壊しませんが、
     このファイルは触る範囲を狭く保つ方針で書かれています。
   - 親に overflow を足すことは絶対にしない。
     45章の通り、overflow:hidden はページ全体の sticky を殺します。
     はみ出しは「親がすでに overflow:hidden を持つ面」でだけ許可し、
     持たない面（.section--brand）では内側に収まる値しか書いていません。

   色は 51章の --deco2-color で決めます。画像は単色シルエットなので、
   同じ絵を色違い・サイズ違いで何度も使い回しています。
============================================================ */

/* ---- シーンバンド（親：position:relative / overflow:hidden） ----
   文章の下が大きく空いていた場所です。背景が #f6f8fa と明るいので、
   白ではなくブランドの青を数％だけ流し込んでいます。 */
.deco2-band-a{
  left:-70px; bottom:-150px;
  width:min(36vw,360px); aspect-ratio:1;
  --deco2-color:rgba(22,104,240,.07);
}
/* 左上の隅にも1枚置いてみたが、見出しの上に単独で浮いて
   「消し忘れの落書き」に見えたので撤去した。ここは空けておくのが正しい。 */

/* ---- 青パネル（親：position:sticky / overflow:hidden） ----
   右上のリングは左下まで届かないので、社員証カードの外側だけを埋めます */
.deco2-p1{
  left:-80px; bottom:-60px;
  width:min(24vw,280px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.13);
}

/* ---- 緑パネルには置いていない ----
   下半分の右端に1枚試したが、既存の放射線と模様が競合して
   何も足せていなかった（14%まで上げても視認できない）。
   すでに装飾を持つ面には重ねない、という方針でここは見送っている。
   黄パネル（ドット）と桃パネル（曲線）も同じ理由で見送り。 */

/* ---- 黒いカードパネル（親：position:relative / overflow:hidden） ----
   うねる白線は右半分しか通らないため、左に1枚だけ。
   暗い面では同じ％でも明るく見えるので、白は 5% まで落としています */
.deco2-runs{
  left:-110px; top:150px;
  width:min(26vw,300px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.05);
}

/* ---- 2体のエージェント（親：position:relative だが overflow:visible） ----
   ここだけは、はみ出させると横スクロールが出ます。
   親に overflow:hidden を足すと sticky が死ぬので、
   代わりに left/right を 0 以上、幅を vw で頭打ちにして内側に収めます。
   ※この2つの数値は「はみ出さないこと」が目的です。触るときは
     document.documentElement.scrollWidth を必ず確認してください。 */
.deco2-brand-a{
  left:0; top:300px;
  width:min(20vw,260px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.08);
}
/* ここは最初 scribble（なぐり書き）を使っていたが、線が絡まっていて
   薄くすると「汚れ」に見えた。輪郭のはっきりした blob に差し替えている。 */
.deco2-brand-b{
  right:0; bottom:110px;
  width:min(18vw,240px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.07);
}

/* ---- 最後のCTA（親：position:relative / overflow:hidden） ----
   既存の装飾は細いリング2本だけで、面としては何も無い状態でした */
.deco2-final-a{
  right:-120px; bottom:-160px;
  width:min(32vw,380px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.10);
}
.deco2-final-b{
  left:-120px; top:-130px;
  width:min(26vw,300px); aspect-ratio:1;
  --deco2-color:rgba(255,255,255,.08);
}

/* ---- 画面が狭いとき ----
   スマホでは面そのものが狭く、装飾が主役に重なって読みにくくなります。
   減らすのではなく、まとめて消すのがいちばん事故が少ない。 */
@media (max-width:860px){
  .deco2{display:none}
}

/* ============================================================
   54. 白地セクションの装飾

   53章では「静的なセクションに position:relative を足さない」方針で
   見送っていました。ここでその判断を見直しています。

   なぜ解禁したか：
   sticky を壊すのは overflow であって position:relative ではありません。
   relative はスクロールコンテナを作らないので、積層とは無関係です。
   実際に足す前後で積層の位置を測り、変わらないことを確認しました
   （blue:72 / yellow:87 / pink:102 のまま）。

   触ったセクションを名指しで限定しているのは、.section 全体に
   relative を当てると、影響範囲が読めなくなるためです。
============================================================ */
.b2, .st, .b6-price, .b6-faqsec{
  position:relative;   /* 中の .deco2 を絶対配置するための基準 */
}

/* 白い地の上なので、白ではなくブランドの青をごく薄く流し込みます。
   ここで白を使うと背景と同化して何も見えません。 */
.deco2-w-a{                      /* 3つの壁：カードの下の空白 */
  right:-90px; bottom:-40px;
  width:min(30vw,320px); aspect-ratio:1;
  --deco2-color:rgba(22,104,240,.05);
}
.deco2-w-b{                      /* 数字で見る：ページ中でいちばん背の高い面 */
  left:-110px; top:120px;
  width:min(28vw,300px); aspect-ratio:1;
  --deco2-color:rgba(123,60,245,.05);
}
.deco2-w-c{                      /* 料金：表の左が大きく空いている */
  left:-80px; bottom:60px;
  width:min(26vw,280px); aspect-ratio:1;
  --deco2-color:rgba(22,104,240,.06);
}
.deco2-w-d{                      /* FAQ：最後の白い面 */
  right:-100px; top:80px;
  width:min(30vw,320px); aspect-ratio:1;
  --deco2-color:rgba(123,60,245,.04);
}

/* 狭い画面では 53章と同じく消します。
   はみ出した装飾が横スクロールを作らないよう、display:none で確実に消すこと。 */
@media (max-width:860px){
  .deco2-w-a,.deco2-w-b,.deco2-w-c,.deco2-w-d{display:none}
}

/* ============================================================
   55. フラット画像を既存パーツに入れるときの補正

   50章はトップページ向けに書いたもので、下層ページのパーツが
   漏れていました。下層に8体を入れたところ、次の2つで実際に破綻しました。

   ■ 高さが揃わない
   .cd-cat__art などは width を指定して height:auto の「幅駆動」です。
   3Dの画像は全部 1254×1254 の正方形なので、幅を決めれば高さも揃いました。
   ところがフラットの8体は 169×320 〜 320×262 と縦横比がばらばらで、
   幅を揃えると背の高さがまちまちになります（実際にカード1枚だけ
   318px の高さになり、並びが崩れました）。
   フラットのときだけ「高さ駆動」に切り替えて、下端で揃えます。

   ■ 影が乗る
   3D用に drop-shadow が指定されているため、影のないフラットな絵にも
   立体の影が付いてしまいます。50章と同じ方針で外します。

   src に /flat/ を含むかどうかで判定しているのは、HTML側に
   クラスを足して回らずに済ませるためです。画像を差し替えるだけで
   自動的に正しい方の指定が当たります。
============================================================ */
.cd-cat__art[src*="/flat/"],
.pg-hic[src*="/flat/"],
.dc-ch__art[src*="/flat/"],
.fq-cat__art[src*="/flat/"]{
  filter:none;                       /* フラットな絵に立体の影は付けない */
}

/* 幅駆動のものだけ、高さ駆動に切り替える。
   数値は元の width の指定をそのまま height に移したものです。 */
.cd-cat__art[src*="/flat/"]{
  width:auto;
  height:clamp(104px,13vw,168px);
  object-fit:contain;
  object-position:center bottom;
}

/* 50章のセレクタ漏れ。
   .why-art と .env-art は 76px 角の固定枠で、ここにフラットを入れると
   縦長の絵が正方形に潰れます。いまは使っていませんが、後から
   差し替えた人が踏むので先に塞いでおきます。 */
.why-art, .env-art{
  object-fit:contain;
  object-position:center bottom;
}

/* 数字表示は「750+」の見た目に合わせ、全ページで統一する。 */
:is(
  .en,
  .num-en,
  .st-en,
  .b3-fig__num,
  .b4-count__num,
  .b4-count__num2,
  .b6-plan__num,
  .b6-envfoot__num,
  .pr-plan__num,
  .cd-fig__num,
  .ochm-fig__num
){
  font-family:var(--number-font);
  font-weight:800;
  font-feature-settings:'tnum';
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* 色面の実績カードは、巨大な数値だけ一段軽くして本文との強弱を整える。 */
.ochm-panel--blue .ochm-fig__num,
.ochm-panel--purple .ochm-fig__num{
  font-weight:640; /* 共通の 800 に対して 80% */
}

/* Hermes ページの通常面は、強調を色で分けず濃色文字に統一する。
   色面パネル内は .ochm-panel の currentColor（白／濃色）をそのまま使う。 */
.page-hermes .page-head .label,
.page-hermes .section > .wrap > .sec-head .label,
.page-hermes .final .label,
.page-hermes .ochm-feat__no{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
.page-hermes .page-head h1 em,
.page-hermes section.section h2 em,
.page-hermes .final h2 em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* Hermes FEATURES：OpenClaw の機能カードを土台に、
   「記憶 → 手順化 → モデル選択」が一続きに見える構成へ組み替える。 */
.hm-features{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 88% 8%,rgba(123,60,245,.13),transparent 27%),
    radial-gradient(circle at 4% 82%,rgba(46,119,255,.08),transparent 25%),
    linear-gradient(180deg,#fff 0%,#faf8ff 54%,#fff 100%);
}
.hm-features::before{
  content:'';position:absolute;z-index:-1;right:-90px;top:32px;width:430px;height:430px;
  border:1px solid rgba(123,60,245,.12);border-radius:50%;
  box-shadow:0 0 0 54px rgba(123,60,245,.035),0 0 0 108px rgba(22,104,240,.018);
}
.hm-features>.wrap{position:relative;z-index:1}
.hm-features__intro{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  align-items:end;gap:clamp(38px,6vw,92px);margin-bottom:clamp(34px,4vw,54px);
}
.hm-features__intro .sec-head{margin-bottom:0}
.page-hermes .hm-features .label{
  color:#7034dc;-webkit-text-fill-color:#7034dc;
}
.page-hermes section.hm-features h2 em{
  background:linear-gradient(96deg,#5b21c8,#8950f5 58%,#367cf3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.hm-features__summary>p{
  color:#565f73;font-size:clamp(14px,1.15vw,16px);font-weight:500;line-height:1.95;
}
.hm-feature-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-rows:repeat(2,minmax(265px,1fr));gap:clamp(16px,2vw,24px);
}
.hm-feature-card{
  position:relative;overflow:hidden;border:1px solid rgba(83,57,132,.12);
  border-radius:32px;box-shadow:0 18px 48px -30px rgba(37,22,73,.34);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s ease;
}
.hm-feature-card:hover{
  transform:translateY(-5px);border-color:rgba(123,60,245,.24);
  box-shadow:0 26px 60px -30px rgba(58,27,118,.42);
}
.hm-feature-card__copy{position:relative;z-index:2}
.hm-feature-card__meta{
  display:flex;align-items:center;gap:11px;margin:0;
  color:#6d3bc1;font-family:'Poppins',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.11em;line-height:1.3;
}
.hm-feature-card__meta span{
  display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  background:#7035de;color:#fff;font-size:11px;letter-spacing:0;
  box-shadow:0 8px 18px rgba(90,31,208,.22);
}
.hm-feature-card h3{
  margin-top:18px;color:#20242a;font-size:clamp(23px,2.2vw,34px);
  font-weight:800;letter-spacing:-.045em;line-height:1.32;
}
.hm-feature-card__copy>p:not(.hm-feature-card__meta){
  margin-top:16px;color:#626a7b;font-size:14px;font-weight:500;line-height:1.9;
}
.hm-feature-card__visual{position:relative;z-index:1;display:grid;place-items:center}
.hm-feature-card__visual img{
  position:relative;z-index:2;width:clamp(130px,12vw,190px);height:auto;
  filter:drop-shadow(0 18px 24px rgba(58,21,126,.2));
  transition:transform .34s var(--ease);
}
.hm-feature-card:hover .hm-feature-card__visual img{transform:translateY(-5px) rotate(2deg) scale(1.025)}

.hm-feature-card--memory{
  grid-row:1 / 3;display:grid;grid-template-rows:auto minmax(280px,1fr);
  min-height:570px;padding:clamp(30px,3.2vw,46px);
  background:
    radial-gradient(circle at 75% 75%,rgba(200,167,255,.34),transparent 30%),
    radial-gradient(circle at 12% 8%,rgba(116,166,255,.23),transparent 28%),
    linear-gradient(145deg,#32116f 0%,#5d21c9 53%,#7d43e8 100%);
  color:#fff;
}
.hm-feature-card--memory::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:radial-gradient(circle,rgba(255,255,255,.72) 0 1px,transparent 1.5px);
  background-size:38px 38px;mask-image:linear-gradient(125deg,#000,transparent 58%);
}
.hm-feature-card--memory .hm-feature-card__copy{max-width:530px}
.hm-feature-card--memory .hm-feature-card__meta{color:#e8dbff}
.hm-feature-card--memory .hm-feature-card__meta span{
  background:#fff;color:#5f25c9;box-shadow:0 10px 24px rgba(20,7,53,.24);
}
.hm-feature-card--memory h3{color:#fff;font-size:clamp(29px,3vw,45px)}
.hm-feature-card--memory .hm-feature-card__copy>p:not(.hm-feature-card__meta){
  max-width:48ch;color:rgba(255,255,255,.82);
}
.hm-feature-card--memory .hm-feature-card__visual{min-height:260px;margin:-8px -20px -26px}
.hm-feature-card--memory .hm-feature-card__visual img{width:clamp(230px,25vw,350px)}
.hm-feature-card__orbit{
  position:absolute;z-index:1;width:min(86%,430px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.27);transform:rotate(-12deg) scaleY(.42);
  box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 80px rgba(224,205,255,.18);
}
.hm-feature-card__orbit::before,
.hm-feature-card__orbit::after{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.9);
}
.hm-feature-card__orbit::before{left:8%;top:19%}
.hm-feature-card__orbit::after{right:9%;bottom:18%;background:#bd9aff}
.hm-feature-card__tags{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;
}
.hm-feature-card__tags li{
  padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(255,255,255,.1);color:#fff;font-size:11px;font-weight:700;
  backdrop-filter:blur(8px);
}

.hm-feature-card--skill,
.hm-feature-card--models{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(135px,12vw,175px);
  align-items:center;gap:10px;padding:clamp(26px,2.5vw,34px);
}
.hm-feature-card--skill{
  background:
    radial-gradient(circle at 92% 20%,rgba(141,96,255,.19),transparent 38%),
    linear-gradient(135deg,#fbfaff,#f1ebff);
}
.hm-feature-card--models{
  background:
    radial-gradient(circle at 92% 24%,rgba(67,130,255,.14),transparent 38%),
    linear-gradient(135deg,#fff,#f7f5ff);
}
.hm-feature-card--skill h3,
.hm-feature-card--models h3{font-size:clamp(21px,1.8vw,28px)}
.hm-feature-card--skill .hm-feature-card__copy>p:not(.hm-feature-card__meta),
.hm-feature-card--models .hm-feature-card__copy>p:not(.hm-feature-card__meta){
  margin-top:13px;font-size:13.5px;line-height:1.82;
}
.hm-feature-card--skill .hm-feature-card__visual,
.hm-feature-card--models .hm-feature-card__visual{min-width:0}

@media (max-width:1100px){
  .hm-features__intro{grid-template-columns:1fr;align-items:start;gap:22px}
  .hm-features__summary{max-width:700px}
  .hm-feature-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .hm-feature-card--memory{grid-row:auto;min-height:520px}
  .hm-feature-card--skill,
  .hm-feature-card--models{min-height:290px}
}
@media (max-width:640px){
  .hm-features::before{right:-240px;top:40px}
  .hm-feature-card{border-radius:24px}
  .hm-feature-card--memory{display:flex;min-height:0;padding:28px 24px;flex-direction:column}
  .hm-feature-card--memory .hm-feature-card__visual{min-height:230px;margin:8px -10px -18px}
  .hm-feature-card--memory .hm-feature-card__visual img{width:min(74vw,285px)}
  .hm-feature-card--skill,
  .hm-feature-card--models{
    grid-template-columns:1fr;min-height:0;padding:26px 24px 20px;
  }
  .hm-feature-card--skill .hm-feature-card__visual,
  .hm-feature-card--models .hm-feature-card__visual{order:-1;min-height:150px;margin:-8px 0 10px}
  .hm-feature-card--skill .hm-feature-card__visual img,
  .hm-feature-card--models .hm-feature-card__visual img{width:145px}
  .hm-feature-card h3{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .hm-feature-card,
  .hm-feature-card__visual img{transition:none}
  .hm-feature-card:hover{transform:none}
  .hm-feature-card:hover .hm-feature-card__visual img{transform:none}
}

/* 金額は桁間と上下のグリフが切れない値を優先する。 */
.b6-plan__num,
.pr-plan__num{
  display:inline-block;
  line-height:1;
  padding:.06em .03em .05em 0;
  letter-spacing:0;
}

/* FV直下の実績帯は専用指定の優先度が高いため、数字フォントを明示する。 */
.fv-proof .proof-grid div b .en{
  font-family:var(--number-font);
  font-weight:800;
  font-style:normal;
  font-feature-settings:'tnum';
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* トップページの実績値・見出しの強調は、色ではなく数字そのものを読ませる。 */
.fv-proof .proof-grid div b{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}
.fv-proof .proof-grid div b small{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* 「150以上」「翌日には変化」「数字」を、他の見出しと同じ黒で統一する。 */
.b4-count__num,
.b4-cap .sec-head h2 em,
.b4-usecase .sec-head h2 em,
.st-head h2 em{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* ---- ボタン共通：白地＋黒い細枠のシンプルな外観 ----
   画像ボタンや青紫の影を使わず、ページ全体で同じ見え方に揃える。 */
html body .ibtn{
  background-image:none !important;
  background:#fff !important;
  color:#24292f !important;
  border:1.5px solid #24292f !important;
  box-shadow:none !important;
  filter:none !important;
}
html body .ibtn:hover{
  background:#fff !important;
  color:#24292f !important;
  border-color:#24292f !important;
  box-shadow:0 4px 10px rgba(36,41,47,.12) !important;
}
html body .ibtn .arw{
  background:transparent !important;
  color:currentColor !important;
}

/* ---- InteractiveHoverButton：全CTA共通のホバー表現 ----
   小さな青い円が広がる動きで、各ページの導線を同じ操作感に統一する。 */
html body .ibtn[data-interactive-hover-ready="true"]{
  isolation:isolate;
  overflow:hidden;
  transform:none;
  transition:border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
html body .ibtn[data-interactive-hover-ready="true"] .ibtn__label{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:transform .3s ease, opacity .3s ease;
}
html body .ibtn[data-interactive-hover-ready="true"] .ibtn__hover-label{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transform:translateX(3rem);
  transition:transform .3s ease, opacity .3s ease;
}
html body .ibtn[data-interactive-hover-ready="true"] .ibtn__hover-arrow{
  font-size:1.25em;
  line-height:1;
}
html body .ibtn[data-interactive-hover-ready="true"] .ibtn__hover-fill{
  position:absolute;
  z-index:1;
  inset:0;
  border-radius:999px;
  background:#1668f2;
  pointer-events:none;
  /* 通常時は点を見せず、ホバー時だけ起点から色面を広げる。 */
  clip-path:circle(0 at 20% 40%);
  transition:clip-path .42s cubic-bezier(.2,.8,.2,1);
}
html body .ibtn[data-interactive-hover-ready="true"]:is(:hover,:focus-visible){
  color:#fff !important;
  border-color:#1668f2 !important;
  box-shadow:0 10px 22px rgba(22,104,240,.22) !important;
}
html body .ibtn[data-interactive-hover-ready="true"]:is(:hover,:focus-visible) .ibtn__label{
  opacity:0;
  transform:translateX(3rem);
}
html body .ibtn[data-interactive-hover-ready="true"]:is(:hover,:focus-visible) .ibtn__hover-label{
  opacity:1;
  transform:translateX(0);
}
html body .ibtn[data-interactive-hover-ready="true"]:is(:hover,:focus-visible) .ibtn__hover-fill{
  clip-path:circle(150% at 20% 40%);
}
/* 完成画像に焼き込んだヒーローCTAにも、共通CTAと同じホバー演出を重ねる。 */
.oc-hero-actions a{--hero-cta:#ef1f32}
.hm-hero-baked-actions a{--hero-cta:#7b3cf5}
@media (min-width:1001px){
  /* 通常の位置は保ち、ホバー塗りだけをボタン下端より1px深く届かせる。 */
  .oc-hero-actions a:first-child{top:85.7%;height:calc(8.4% + 1px)}
  .oc-hero-actions a:last-child{top:85.7%;height:calc(8.4% + 1px)}
}
.hero-image-hover[data-interactive-hover-ready="true"]{
  isolation:isolate;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease;
}
.hero-image-hover .ibtn__label{display:none}
.hero-image-hover .ibtn__hover-label{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:.55em;
  color:#fff;font-size:clamp(13px,1.1vw,18px);font-weight:800;letter-spacing:-.02em;
  opacity:0;pointer-events:none;transform:translateX(3rem);transition:transform .3s ease,opacity .3s ease;
}
.hero-image-hover .ibtn__hover-arrow{font-size:1.25em;line-height:1}
.hero-image-hover .ibtn__hover-fill{
  position:absolute;inset:0;z-index:1;border-radius:999px;background:var(--hero-cta);
  pointer-events:none;clip-path:circle(0 at 20% 40%);transition:clip-path .42s cubic-bezier(.2,.8,.2,1);
}
.hero-image-hover:is(:hover,:focus-visible){border-color:var(--hero-cta)!important;box-shadow:0 10px 22px color-mix(in srgb,var(--hero-cta) 28%,transparent)!important}
.hero-image-hover:is(:hover,:focus-visible) .ibtn__hover-label{opacity:1;transform:translateX(0)}
.hero-image-hover:is(:hover,:focus-visible) .ibtn__hover-fill{clip-path:circle(150% at 20% 40%)}
/* Hermes の1つ目のCTAは、焼き込み画像の端に合わせて
   PC表示時だけ左へ4px広げ、右端は1px内側に収める。 */
@media (min-width:769px){
  .hm-hero-baked-actions a:first-child{left:calc(11.8% - 4px);width:calc(22.5% + 3px)}
  .hm-hero-baked-actions a:last-child{left:calc(35.4% - 2px);width:calc(20.8% + 2px)}
}
@media (prefers-reduced-motion:reduce){
  html body .ibtn[data-interactive-hover-ready="true"],
  html body .ibtn[data-interactive-hover-ready="true"] *,
  .hero-image-hover,.hero-image-hover *{transition:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .fv-agent-pair__openclaw,.fv-agent-pair__hermes,.fv-agent-pair__times{animation:none;opacity:1}
}

/* ============================================================================
   トップページ：OpenClaw × Hermes Agent ファーストビュー
   ========================================================================== */
.hero2.fv:has(.fv-product-hero){
  min-height:clamp(680px,52vw,900px);
  padding:0;
  background:
    radial-gradient(circle at 14% 45%,rgba(255,82,82,.13),transparent 25%),
    radial-gradient(circle at 86% 42%,rgba(111,75,255,.15),transparent 27%),
    #f8f9fc;
}
.hero2.fv:has(.fv-product-hero) > .fv-ring,
.hero2.fv:has(.fv-product-hero) > .fv-agent-pair,
.hero2.fv:has(.fv-product-hero) > .fv-inner{display:none}
.hero2.fv:has(.fv-product-hero) + .fv-proof{margin-top:0;border-radius:0}
.fv-product-hero{position:relative;isolation:isolate;min-height:inherit;overflow:hidden}
.fv-product-hero__glow{
  position:absolute;inset:9% 10% 7%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.82),rgba(255,255,255,.18),rgba(255,255,255,.78));
  filter:blur(28px);
}
.fv-product-hero__openclaw{
  position:absolute;z-index:1;left:clamp(-80px,-3vw,-24px);top:clamp(180px,15vw,270px);
  width:clamp(360px,39vw,650px);aspect-ratio:1;
  background:url('../images/openclaw_hero_red_final.png') 86% 65% / 330% auto no-repeat;
  filter:drop-shadow(0 26px 26px rgba(239,31,50,.2));
}
.fv-product-hero__hermes{
  position:absolute;z-index:1;right:clamp(-95px,-3vw,-26px);top:clamp(145px,9vw,220px);
  width:clamp(390px,39vw,690px);pointer-events:none;
  filter:drop-shadow(0 24px 32px rgba(58,38,117,.14));
}
.fv-product-hero__hermes img{display:block;width:100%;height:auto}
.fv-product-hero__content{
  position:relative;z-index:2;display:flex;min-height:inherit;flex-direction:column;
  align-items:center;justify-content:center;padding:clamp(122px,10vw,158px) 20px clamp(60px,6vw,92px);
  text-align:center;
}
.fv-product-hero__eyebrow{
  margin:0;padding:10px clamp(18px,1.8vw,28px);border:1px solid rgba(255,255,255,.94);border-radius:999px;
  background:rgba(255,255,255,.6);box-shadow:0 8px 28px rgba(78,86,132,.08);
  color:#344a71;font-size:clamp(12px,.98vw,16px);font-weight:800;letter-spacing:.035em;
}
.fv-product-hero__names{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,30px);margin-top:clamp(24px,2.7vw,42px);line-height:.82}
.fv-product-hero__names span{font-family:var(--number-font);font-size:clamp(42px,5.3vw,88px);font-weight:800;letter-spacing:-.075em}
.fv-product-hero__openclaw-name{color:#f33a42;text-shadow:0 8px 20px rgba(243,58,66,.14)}
.fv-product-hero__hermes-name{color:#181c26}
.fv-product-hero__hermes-name small{display:block;margin-top:.08em;font-size:.58em;letter-spacing:-.055em}
.fv-product-hero__names b{color:#202532;font-size:clamp(32px,3vw,52px);font-weight:400}
.fv-product-hero h1{max-width:none;margin:clamp(30px,3.2vw,48px) auto 0;font-size:clamp(27px,2.65vw,46px);line-height:1.25;letter-spacing:-.045em}
.fv-product-hero h1 em{font-style:normal;background:linear-gradient(96deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.fv-product-hero h1 em::after{height:.13em}
.fv-product-hero__lead{max-width:720px;margin:clamp(20px,2vw,30px) auto 0;color:#596678;font-size:clamp(13px,1.03vw,16.5px);font-weight:500;line-height:1.9}
.fv-product-hero__lead b{color:#394dff;font-weight:800}
.fv-product-hero__cta{justify-content:center;gap:12px;margin-top:clamp(22px,2.2vw,34px)}
.fv-product-hero__cta .ibtn{min-width:clamp(240px,20vw,330px)}
.fv-product-hero__capabilities{
  position:absolute;z-index:3;bottom:clamp(22px,2.5vw,42px);left:50%;display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,.7vw,13px);width:min(92vw,1520px);
  margin:0;padding:0;list-style:none;transform:translateX(-50%);
}
.fv-product-hero__capabilities li{
  display:flex;align-items:center;gap:clamp(7px,.7vw,12px);min-height:82px;padding:clamp(10px,.85vw,14px);
  border:1px solid rgba(220,225,235,.75);border-radius:18px;background:rgba(255,255,255,.84);
  box-shadow:0 10px 24px rgba(78,86,132,.07);backdrop-filter:blur(8px);
}
.fv-product-hero__capabilities img{width:clamp(29px,2.5vw,45px);height:auto;flex:none}
.fv-product-hero__capabilities span{color:#252a35;font-size:clamp(10px,.77vw,13px);font-weight:800;line-height:1.25;white-space:nowrap}
.fv-product-hero__capabilities small{display:block;margin-top:4px;color:#778295;font-size:.75em;font-weight:500}

@media (max-width:1180px){
  .fv-product-hero__openclaw{left:-140px;top:255px;opacity:.4}
  .fv-product-hero__hermes{right:-150px;top:220px;opacity:.4}
}
@media (max-width:760px){
  .hero2.fv:has(.fv-product-hero){min-height:0}
  .fv-product-hero__content{padding:calc(var(--header-h) + 54px) 20px 62px}
  .fv-product-hero__openclaw,.fv-product-hero__hermes{display:none}
  .fv-product-hero__names{gap:10px;margin-top:23px}
  .fv-product-hero__names span{font-size:clamp(34px,11vw,54px)}
  .fv-product-hero__names b{font-size:28px}
  .fv-product-hero h1{margin-top:28px;font-size:clamp(28px,8vw,40px)}
  .fv-product-hero__lead br{display:none}
  .fv-product-hero__cta{width:100%;flex-direction:column;align-items:stretch}
  .fv-product-hero__cta .ibtn{width:100%;min-width:0}
  .fv-product-hero__capabilities{position:relative;bottom:auto;left:auto;grid-template-columns:repeat(2,minmax(0,1fr));width:auto;margin:0 20px 46px;transform:none}
  .fv-product-hero__capabilities li{min-height:66px;padding:10px}
  .fv-product-hero__capabilities img{width:32px}
}

/* 指定された完成画像をトップのファーストビューとしてそのまま表示する。 */
html:has(.fv-reference-image),
body:has(.fv-reference-image){background:#fff}
body:has(.fv-reference-image) > header{
  margin-bottom:0;
  background:#fff;
  animation:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.hero2.fv:has(.fv-reference-image){min-height:0;padding:0;background:#f8f9fc}
.fv-product-hero:has(.fv-reference-image){min-height:0;overflow:visible}
.fv-product-hero:has(.fv-reference-image) > :not(.fv-reference-image):not(.fv-reference-actions):not(.fv-grok-launch):not(.fv-trio-arrival-center):not(.fv-trio-arrival-openclaw):not(.fv-trio-arrival-hermes):not(.fv-trio-arrival-grok):not(.fv-trio-arrival-cloud):not(.fv-dots-unit--desktop):not(.fv-left-agent-field--desktop):not(.fv-trio-copy):not(.fv-animated-cards):not(.fv-animation-bg):not(.fv-sequence-base):not(.fv-sequence-layer):not(.fv-arrival-exact){display:none!important}
.fv-reference-image{display:block;width:100%;height:auto}
.fv-reference-image--mobile{display:none}
.fv-reference-actions{position:absolute;inset:0;z-index:6}
.fv-reference-actions a{position:absolute;display:block;border-radius:999px}
.fv-reference-actions a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* 画像内に焼き込まれた通常ラベルだけを非表示にし、JSが足すホバー要素は表示する。 */
.fv-reference-actions > a > span:not(.ibtn__label):not(.ibtn__hover-label):not(.ibtn__hover-fill){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fv-reference-actions__home{left:3.2%;top:2.75%;width:7.2%;height:5.8%}
.fv-reference-actions__can-do{left:42.4%;top:2.75%;width:5.6%;height:5.8%}
.fv-reference-actions__openclaw{left:49.15%;top:2.75%;width:5.7%;height:5.8%}
.fv-reference-actions__hermes{left:55.85%;top:2.75%;width:4.7%;height:5.8%}
.fv-reference-actions__price{left:61.8%;top:2.75%;width:3.3%;height:5.8%}
.fv-reference-actions__flow{left:66.15%;top:2.75%;width:5.5%;height:5.8%}
.fv-reference-actions__blog{left:72.8%;top:2.75%;width:3.3%;height:5.8%}
.fv-reference-actions__docs{left:77.05%;top:2.75%;width:10.9%;height:5.8%}
.fv-reference-actions__contact{left:88.65%;top:2.75%;width:9.2%;height:5.8%}
.fv-reference-actions__primary{left:29.35%;top:66.85%;width:20.05%;height:6.1%}
.fv-reference-actions__secondary{left:50.1%;top:66.85%;width:20.1%;height:6.1%}
/* 画像に焼き込まれたCTAの上に、共通の青いホバー演出を重ねる。 */
.fv-reference-actions__primary,.fv-reference-actions__secondary{
  --hero-cta:#2f62ff;
  isolation:isolate;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
@media (min-width:1200px){
  /* 画像に焼き込まれたナビゲーション領域を取り除き、共通ヘッダーを表示する。 */
  .fv-product-hero:has(.fv-reference-image){width:100%;aspect-ratio:1659 / 870;overflow:hidden}
  .fv-reference-image:not(.fv-reference-image--mobile){display:none}
  .fv-hero-slice{
    position:absolute;top:0;bottom:0;z-index:1;
    background-image:url('../images/home-hero-openclaw-hermes-hires.png');
    background-repeat:no-repeat;background-position-y:bottom;
  }
  .fv-hero-slice--left{left:0;width:27%;background-size:370.3704% auto;background-position-x:left;animation:fvHeroEnterLeft .9s .08s var(--ease) both}
  .fv-hero-slice--center{left:27%;width:46%;background-size:217.3914% auto;background-position-x:center}
  .fv-hero-slice--right{right:0;width:27%;background-size:370.3704% auto;background-position-x:right;animation:fvHeroEnterRight .9s .08s var(--ease) both}
  @keyframes fvHeroEnterLeft{from{transform:translateX(-115%);opacity:0}to{transform:none;opacity:1}}
  @keyframes fvHeroEnterRight{from{transform:translateX(115%);opacity:0}to{transform:none;opacity:1}}
  .fv-animated-cards{
    /* 元ヒーローに焼き込まれたカード列を完全に覆ってから、
       独立した帯として流す。 */
    /* 最終フレーム画像（z-index:5）の前面に出して、常に流れを見せる。 */
    position:absolute;z-index:7;left:0;right:0;bottom:0;height:23.5%;
    overflow:hidden;background-color:#f8f9fc;
    /* 以前と同一のカード内容・アイコンだけを流す。 */
  }
  /* 最初は左から順に控えめに現れ、整列後に横スクロールへ移る。
     導入は0.85倍速にさらに0.8倍を掛け、従来の0.68倍速にする。 */
  .fv-cards-track{display:flex;align-items:center;gap:24px;width:max-content;height:100%;will-change:transform;transform:translateX(0)}
  .fv-cards-set{display:flex;align-items:center;gap:24px;flex:none}
  .fv-flow-card{
    display:flex;align-items:center;gap:11px;width:219px;height:154px;
    padding:20px 14px;flex:none;overflow:hidden;border-radius:18px;
    background:#fff;box-shadow:0 7px 22px rgba(28,41,79,.09);
  }
  .fv-product-hero--trio .fv-flow-card{
    /* ヒーローとカード帯の位置は固定したまま、短い画面ではカードだけを収める。 */
    height:clamp(100px,calc(100dvh - 72px - 44.78vw - 6px),154px);
    padding-block:12px;
  }
  .fv-flow-card__icon{
    display:block;width:72px;height:68px;flex:none;
    background-repeat:no-repeat;background-size:219px 154px;
    background-position:-20px -40px;
  }
  .fv-flow-card span{min-width:0;color:#202633;white-space:nowrap}
  .fv-flow-card b{display:block;font-size:13px;font-weight:800;line-height:1.3}
  .fv-flow-card small{display:block;margin-top:7px;color:#4e5968;font-size:9.5px;font-weight:600;line-height:1.3}
  .fv-cards-track.is-card-intro .fv-cards-set[aria-hidden="true"]{display:none}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card{
    opacity:0;
    transform:translateY(26px) scale(.96);
    animation:fvCardRise .735s cubic-bezier(.22,1,.36,1) both;
  }
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(1){animation-delay:.147s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(2){animation-delay:.294s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(3){animation-delay:.441s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(4){animation-delay:.588s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(5){animation-delay:.735s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(6){animation-delay:.882s}
  .fv-cards-track.is-card-intro .fv-cards-set:first-child .fv-flow-card:nth-child(7){animation-delay:1.029s}
  @keyframes fvCardRise{
    0%{opacity:0;transform:translateY(26px) scale(.96)}
    72%{opacity:1;transform:translateY(-4px) scale(1.015)}
    100%{opacity:1;transform:translateY(0) scale(1)}
  }
  /* 再生成画像内のCTA枠に合わせ、ホバー用レイヤーを枠の内側へ収める。 */
  /* 焼き込みCTAの黒枠の内側にのみ塗りを収める。
     上端を30px相当下げ、ボタンの内寸（約76px）に合わせる。 */
  .fv-reference-actions__primary{left:28.35%;top:62.5%;width:20.7%;height:calc(7.4% + 1px)}
  .fv-reference-actions__secondary{left:49.7%;top:62.5%;width:21.1%;height:calc(7.4% + 1px)}
}
@media (max-width:1199px){
  /* モバイル／タブレットでは実ヘッダーを使い、画像は一切切り抜かない。 */
  body:has(.fv-reference-image) > header{
    position:relative;display:flex;min-height:72px;padding:12px 20px;
    background:#eff2f5;box-shadow:0 1px 0 rgba(32,38,45,.08);
  }
  body:has(.fv-reference-image) > header > nav{display:none}
  body:has(.fv-reference-image) > header > .actions{margin-left:auto;gap:0}
  body:has(.fv-reference-image) > header > .actions .ibtn-ghost{display:none}
  body:has(.fv-reference-image) > header > .actions .ibtn-primary{height:42px;padding-inline:18px;font-size:14px;box-shadow:none}
  body:has(.fv-reference-image) > header > .actions .ibtn-primary .arw{display:none}
  body:has(.fv-reference-image) > header > .menu-toggle{display:grid;width:44px;height:44px;margin-left:10px;padding:10px;gap:5px;border:0;background:transparent;color:var(--ink);cursor:pointer}
  body:has(.fv-reference-image) > header > .menu-toggle span{display:block;width:24px;height:2px;border-radius:99px;background:currentColor}
  body:has(.fv-reference-image) > header.is-menu-open{position:fixed;inset:0;z-index:1000;align-content:flex-start;align-items:center;flex-wrap:wrap;padding:12px 20px;background:#eff2f5}
  body:has(.fv-reference-image) > header.is-menu-open > .actions{display:none}
  body:has(.fv-reference-image) > header.is-menu-open > nav{display:flex;order:3;width:100%;margin:30px 0 0;flex-direction:column;align-items:stretch;gap:0}
  body:has(.fv-reference-image) > header.is-menu-open > nav a{padding:18px 4px;font-size:20px;font-weight:700;border-bottom:1px solid rgba(32,38,45,.09)}
  body:has(.fv-reference-image) > header.is-menu-open > nav a::after{display:none}
  body:has(.fv-reference-image) > header.is-menu-open .menu-toggle{margin-left:auto}
  body:has(.fv-reference-image) > header.is-menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body:has(.fv-reference-image) > header.is-menu-open .menu-toggle span:nth-child(2){opacity:0}
  body:has(.fv-reference-image) > header.is-menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .fv-reference-image{display:none}
  .fv-reference-image--mobile{display:block;height:auto;object-fit:contain;object-position:center}
  /* 画像を縮小してもリンク座標は再計算されないため、誤操作を避けて無効化する。 */
  .fv-reference-actions{display:none}
  .fv-hero-slice,.fv-animated-cards{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fv-hero-slice--left,.fv-hero-slice--right,.fv-animated-cards{animation:none!important}
  .fv-cards-track{transform:none!important}
}

/*
 * 完成画像を基準座標にしたファーストビュー入場演出。
 * 完成画像と背景の差分から事前生成した透過PNG前景を、
 * 拡縮せず translate だけで運ぶ。終点は必ず transform:none なので、
 * 完成画像と同じ寸法・同じ座標のまま止まる。
 */
@media (min-width:1200px){
  /* 元画像の上96px・下26px相当だけを切り、主要情報は一切縮めずに
     ヘッダーとカード列までを1画面へ収める。表示範囲は949-96-26=827。 */
  .fv-product-hero:has(.fv-animation-bg){aspect-ratio:1658 / 827}
  .fv-hero-slice{display:none}
  .fv-reference-image:not(.fv-reference-image--mobile){
    display:block;position:absolute;left:0;top:-11.6083%;z-index:-1;
    width:100%;height:114.7521%;object-fit:cover;
    opacity:0;pointer-events:none;
  }
  .fv-animation-bg{
    position:absolute;left:0;top:-11.6083%;z-index:0;
    width:100%;height:114.7521%;object-fit:cover;opacity:0;pointer-events:none;
  }
  .fv-sequence-base,.fv-sequence-layer{
    position:absolute;left:0;top:-11.6083%;display:block;
    width:100%;height:114.7521%;pointer-events:none;
  }
  .fv-sequence-base{z-index:0;opacity:0}
  .fv-sequence-layer{z-index:1;opacity:0;will-change:opacity,transform}
  .fv-product-hero.has-static-arrival .fv-sequence-base{opacity:1}
  .fv-product-hero.is-arrival-ready .fv-sequence-base{opacity:1}
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--badge{
    animation:fvSequenceFade .58s .08s both ease-out;
  }
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--headline{
    animation:fvSequenceFadeUp .52s .68s both cubic-bezier(.2,.75,.25,1);
  }
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--line-1{
    animation:fvSequenceFadeUp .44s 1.05s both cubic-bezier(.2,.75,.25,1);
  }
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--line-2{
    animation:fvSequenceFadeUp .44s 1.28s both cubic-bezier(.2,.75,.25,1);
  }
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--line-3{
    animation:fvSequenceFadeUp .44s 1.51s both cubic-bezier(.2,.75,.25,1);
  }
  .fv-product-hero.is-arrival-ready .fv-sequence-layer--cta{
    animation:fvSequenceFadeUp .46s 1.76s both cubic-bezier(.2,.75,.25,1);
  }
  @keyframes fvSequenceFade{from{opacity:0}to{opacity:1}}
  @keyframes fvSequenceFadeUp{
    from{opacity:0;transform:translate3d(0,7px,0)}
    to{opacity:1;transform:none}
  }
  .fv-arrival-exact{
    position:absolute;left:0;top:-11.6083%;z-index:2;display:block;
    width:100%;height:114.7521%;
    opacity:0;pointer-events:none;transform:translate3d(0,0,0);
    transform-origin:50% 50%;will-change:transform,opacity;
  }
  .fv-product-hero.is-arrival-ready .fv-arrival-exact--left{
    animation:fvExactArrivalLeft 1.12s 2.24s both cubic-bezier(.2,.82,.22,1);
  }
  .fv-product-hero.is-arrival-ready .fv-arrival-exact--right{
    animation:fvExactArrivalRight 1.12s 2.28s both cubic-bezier(.2,.82,.22,1);
  }
  .fv-product-hero.is-arrival-ready .fv-arrival-exact--times{
    animation:fvSequenceTimes .28s 2.1s both ease-out;
  }
  .fv-product-hero.has-static-arrival .fv-reference-image:not(.fv-reference-image--mobile){
    z-index:5;
    animation:fvArrivalFinalFrame .18s 3.64s both ease-out;
  }
  @keyframes fvArrivalFinalFrame{from{opacity:0}to{opacity:1}}
  @keyframes fvSequenceTimes{from{opacity:0}to{opacity:1}}
  @keyframes fvExactArrivalLeft{
    0%{opacity:0;transform:translate3d(-32%,22%,0)}
    12%{opacity:1}
    74%{opacity:1;transform:translate3d(1.35%,-1.05%,0)}
    88%{opacity:1;transform:translate3d(-.38%,.3%,0)}
    100%{opacity:1;transform:none}
  }
  @keyframes fvExactArrivalRight{
    0%{opacity:0;transform:translate3d(32%,22%,0)}
    12%{opacity:1}
    74%{opacity:1;transform:translate3d(-1.35%,-1.05%,0)}
    88%{opacity:1;transform:translate3d(.38%,.3%,0)}
    100%{opacity:1;transform:none}
  }
  .fv-product-hero.is-arrival-fallback .fv-reference-image:not(.fv-reference-image--mobile){
    z-index:5;opacity:1;
  }
}

/* ============================================================
   dots — OpenClaw / Hermes / Grok Bot の既存部品を組み合わせたビジュアル
============================================================ */
.page-dots{
  --dots-indigo:#3157d5;
  --dots-violet:#6d43dd;
  --dots-cyan:#32bfe9;
  --dots-yellow:#ffc42e;
}
.page-dots > header nav a[aria-current="page"]::after{
  background:linear-gradient(90deg,var(--dots-indigo),var(--dots-cyan));
}
.dots-hero-stage{
  min-height:clamp(560px,41.66vw,809px);
  isolation:isolate;
  background:
    radial-gradient(circle at 84% 42%,rgba(50,191,233,.18),transparent 23%),
    radial-gradient(circle at 72% 62%,rgba(109,67,221,.12),transparent 31%),
    linear-gradient(135deg,#fff 0%,#fbfcff 54%,#f2f7ff 100%);
}
.dots-hero-stage::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.86) 43%,rgba(255,255,255,0) 64%);
}
.dots-hero-copy{
  position:absolute;z-index:4;
  left:clamp(112px,12vw,232px);top:calc(var(--header-h) + clamp(78px,5.5vw,106px));
  width:min(47%,820px);color:var(--ink);
  font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;
}
.dots-wordmark{
  display:inline-flex!important;align-items:center;gap:9px;
  color:var(--dots-indigo)!important;font-family:'Poppins',sans-serif;
  font-size:clamp(17px,1.25vw,22px)!important;line-height:1.8;
  font-weight:800!important;letter-spacing:.08em!important;text-transform:none!important;
}
.dots-wordmark::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--dots-indigo),var(--dots-cyan));
  box-shadow:14px 0 0 var(--dots-violet),28px 0 0 var(--dots-yellow);margin-right:27px;
}
.dots-hero-copy h1{
  margin:clamp(13px,1.5vw,24px) 0 0;
  font-size:clamp(40px,3.05vw,58px);line-height:1.41;font-weight:800;
  letter-spacing:-.045em;text-wrap:balance;
}
.dots-hero-copy h1 em{position:relative;color:var(--dots-indigo);font-style:normal;white-space:nowrap}
.dots-hero-copy h1 em::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.02em;height:clamp(6px,.52vw,10px);
  border-radius:999px;
  background:linear-gradient(90deg,var(--dots-indigo),var(--dots-cyan),var(--dots-yellow));
}
.dots-hero-copy > p{
  max-width:660px;margin:clamp(16px,1.45vw,25px) 0 0;
  color:#303846;font-size:clamp(15px,1.05vw,20px);font-weight:500;line-height:2.15;
  letter-spacing:-.025em;
}
.dots-hero-facts{
  display:flex;flex-wrap:wrap;gap:clamp(12px,1.05vw,20px);margin:clamp(20px,1.45vw,28px) 0 0;padding:0;list-style:none;
}
.dots-hero-facts li{
  display:flex;align-items:center;gap:12px;min-height:clamp(50px,3.15vw,60px);padding:0 clamp(18px,1.25vw,24px);
  border:1px solid rgba(49,87,213,.16);border-radius:999px;background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px -20px rgba(35,62,145,.65);font-size:clamp(14px,.9vw,17px);font-weight:600;
}
.dots-hero-facts li::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--dots-cyan)}
.dots-hero-cta{margin-top:clamp(22px,1.45vw,28px);gap:clamp(14px,1.05vw,20px)}
.dots-hero-cta .ibtn{
  height:clamp(62px,3.7vw,70px);padding-inline:clamp(28px,2vw,38px);
  font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;
  font-size:clamp(17px,1.05vw,20px);font-weight:600;
}
.dots-hero-cta .ibtn:first-child{width:clamp(320px,20.35vw,390px)}
.dots-hero-cta .ibtn:last-child{width:clamp(270px,17.2vw,330px)}
.dots-hero-cta .ibtn-primary{background:var(--dots-indigo)}
.dots-hero-cta .ibtn-primary:hover{background:#2448bd}
.dots-hero-motion{z-index:1!important;display:block!important}
.dots-hero-motion img{
  position:absolute;right:-2.5%;top:7%;width:58%;height:auto;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 24px 28px rgba(36,72,166,.18));
  animation:dotsHeroFloat 5.4s ease-in-out infinite!important;will-change:transform;
}
@keyframes dotsHeroFloat{
  0%,100%{transform:translate3d(0,14px,0) rotate(-.35deg)}
  50%{transform:translate3d(0,0,0) rotate(.35deg)}
}
.dots-hero-deco{position:absolute;z-index:0;display:block;border-radius:50%;pointer-events:none}
.dots-hero-deco--a{
  top:-17%;left:-6%;width:20vw;max-width:360px;aspect-ratio:1;
  background:linear-gradient(145deg,var(--dots-indigo),var(--dots-violet));opacity:.96;
}
.dots-hero-deco--b{
  right:-5%;bottom:-24%;width:19vw;max-width:350px;aspect-ratio:1;
  border:30px solid rgba(49,87,213,.08);
}
.dots-hero-grid{
  position:absolute;z-index:0;right:3.5%;top:14%;width:125px;height:82px;opacity:.52;
  background-image:radial-gradient(circle,var(--dots-indigo) 2px,transparent 2.5px);
  background-size:13px 13px;pointer-events:none;
}
.page-dots .oc-usecase__no{color:var(--dots-indigo)}
.page-dots .oc-usecases .sec-head{margin-bottom:clamp(34px,3.7vw,52px)}
.page-dots .oc-usecases .label{
  margin-bottom:clamp(13px,1.3vw,20px);background:none;color:var(--dots-indigo);
  -webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--dots-indigo);
  font-size:12px;letter-spacing:.15em;
}
.page-dots .dots-usecases-title{
  max-width:1120px;font-size:clamp(34px,4.2vw,64px);line-height:1.18;
  letter-spacing:-.055em;text-wrap:wrap;
}
.page-dots .dots-usecases-title>span{display:inline-block;white-space:nowrap}
.page-dots .oc-usecases .dots-usecases-title em{
  background:none;color:var(--dots-indigo);-webkit-background-clip:initial;
  background-clip:initial;-webkit-text-fill-color:var(--dots-indigo);
}
.page-dots .oc-usecases .sec-lead{
  max-width:760px;margin-top:clamp(16px,1.5vw,23px);color:#596273;
  font-size:clamp(14px,1.12vw,17px);line-height:1.8;
}
@media (max-width:600px){
  .page-dots .dots-usecases-title br{display:block}
  .page-dots .dots-usecases-title>span{white-space:normal}
  .page-dots .dots-usecases-title em{white-space:nowrap}
}
.page-dots .dots-architecture-panel{
  background:linear-gradient(135deg,#244fc6 0%,#4b43d1 56%,#118bc7 100%);
}
.page-dots .dots-architecture-panel .ochm-orbit{
  padding:0;
}
.page-dots .dots-architecture-panel .ochm-orbit::before{
  inset:4%;border-color:rgba(255,255,255,.42);animation:ochmSpin 42s linear infinite;
  will-change:transform;
}
.page-dots .dots-architecture-art-motion{
  position:relative;z-index:2;width:min(116%,440px);max-width:none;
  animation:dotsArchitectureGlide 6s ease-in-out infinite;
  will-change:transform;transform:translateZ(0);
}
.page-dots .dots-architecture-art{display:block;width:100%;height:auto}
.page-dots .dots-architecture-pin{
  position:absolute;z-index:4;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
}
.page-dots .dots-architecture-pin > span{
  display:block;padding:8px 15px;border-radius:999px;
  background:#fff;color:#0d275e;box-shadow:var(--sh-rest);
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;
  animation:dotsArchitecturePinGlide 4.4s ease-in-out infinite;
  will-change:transform;transform:translateZ(0);
}
.page-dots .dots-architecture-pin--email > span{animation-delay:-.9s}
.page-dots .dots-architecture-pin--docs > span{animation-delay:-1.8s}
.page-dots .dots-architecture-pin--sheets > span{animation-delay:-2.7s}
@keyframes dotsArchitectureGlide{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-14px,0)}
}
@keyframes dotsArchitecturePinGlide{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-14px,0)}
}
.page-dots .dots-architecture-panel .ochm-fig{transition:transform .2s ease,box-shadow .2s ease}
.page-dots .dots-architecture-panel .ochm-fig:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(21,33,104,.24)}
.page-dots .dots-fig-word{font-size:clamp(28px,3.8vw,55px);letter-spacing:-.035em}
.page-dots .dots-after-group .yc-group__key::before{
  background:linear-gradient(120deg,var(--dots-indigo),var(--dots-cyan));
}

/* dots と Grok Bot の比較。既存ページの角丸カード、浮遊する主役画像、
   青／オレンジの製品色を使いながら、選び分けを一つの流れで読めるようにする。 */
.dots-vs-section{
  position:relative;overflow:clip;scroll-margin-top:calc(var(--header-h) + 20px);
  background:
    radial-gradient(circle at 12% 18%,rgba(50,191,233,.1),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(255,145,35,.1),transparent 25%),
    linear-gradient(180deg,#fff 0%,#f7f9ff 52%,#fff 100%);
}
.dots-vs-section::before{
  content:"";position:absolute;right:-35px;top:120px;width:230px;height:170px;opacity:.22;pointer-events:none;
  background-image:radial-gradient(circle,var(--dots-indigo) 2px,transparent 2.5px);background-size:16px 16px;
}
.dots-vs-section > .wrap{position:relative;z-index:1}
.dots-vs-visual{
  display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:16px;align-items:center;
  max-width:1080px;margin:0 auto;
}
.dots-vs-product{
  display:grid;grid-template-rows:auto 1fr;min-width:0;height:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:42px;background:#fff;box-shadow:0 24px 60px -42px rgba(32,49,101,.52);
}
.dots-vs-product__art{
  position:relative;display:grid;place-items:center;min-height:clamp(220px,20vw,280px);overflow:hidden;
}
.dots-vs-product__art::before{
  content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  border:1px dashed currentColor;opacity:.18;animation:ochmSpin 38s linear infinite;
}
.dots-vs-product__art::after{
  content:"";position:absolute;width:48%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.8);
  box-shadow:0 22px 70px currentColor;opacity:.42;
}
.dots-vs-product--dots .dots-vs-product__art{color:var(--dots-indigo);background:linear-gradient(145deg,#f2f6ff,#e2f7ff)}
.dots-vs-product--grok .dots-vs-product__art{color:#e96a00;background:linear-gradient(145deg,#fff8ee,#ffe9cb)}
.dots-vs-product__art > span{
  position:absolute;z-index:3;left:24px;top:22px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.9);
  color:currentColor;font:800 9px/1 'Poppins',sans-serif;letter-spacing:.13em;box-shadow:0 8px 20px -14px currentColor;
}
.dots-vs-product__art img{position:relative;z-index:2;height:auto;object-fit:contain;animation:ochmFloat 6.4s ease-in-out infinite}
.dots-vs-product--dots .dots-vs-product__art img{width:min(43%,190px);filter:drop-shadow(0 20px 18px rgba(35,76,181,.19))}
.dots-vs-product--grok .dots-vs-product__art img{width:min(76%,350px);filter:drop-shadow(0 20px 18px rgba(79,43,14,.17));animation-delay:-1.2s}
.dots-vs-product__body{padding:clamp(25px,3vw,38px)}
.dots-vs-product__name{font:800 clamp(26px,2.6vw,38px)/1 'Poppins',sans-serif;letter-spacing:-.045em}
.dots-vs-product--dots .dots-vs-product__name{color:var(--dots-indigo)}
.dots-vs-product--grok .dots-vs-product__name{color:#c55500}
.dots-vs-product__body h3{margin-top:15px;font-size:clamp(19px,1.7vw,24px);line-height:1.45;letter-spacing:-.035em}
.dots-vs-product__body > p:last-child{margin-top:13px;color:var(--sub);font-size:14px;line-height:1.9}
.dots-vs-badge{
  position:relative;z-index:4;display:grid;place-items:center;width:72px;aspect-ratio:1;border-radius:50%;
  background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 15px 34px -20px rgba(22,36,80,.7);
  font:800 18px/1 'Poppins',sans-serif;letter-spacing:.06em;
}
.dots-vs-badge::before,.dots-vs-badge::after{content:"";position:absolute;top:50%;width:22px;border-top:2px dotted #aab5ca}
.dots-vs-badge::before{right:100%}.dots-vs-badge::after{left:100%}

.dots-vs-table{
  max-width:1080px;margin:clamp(34px,4vw,56px) auto 0;overflow:hidden;
  border:1px solid var(--line);border-radius:34px;background:#fff;box-shadow:0 22px 56px -44px rgba(31,48,98,.48);
}
.dots-vs-table__head,.dots-vs-table__row{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1fr)}
.dots-vs-table__head{background:#f3f5fa;border-bottom:1px solid var(--line)}
.dots-vs-table__head > div{display:flex;flex-direction:column;justify-content:center;min-height:88px;padding:18px 22px;border-left:1px solid var(--line)}
.dots-vs-table__head > div:first-child{border-left:0;color:var(--sub);font-size:12px;font-weight:800}
.dots-vs-table__head .is-dots{background:linear-gradient(135deg,#f1f5ff,#eafaff)}
.dots-vs-table__head .is-grok{background:linear-gradient(135deg,#fff9f0,#fff0dc)}
.dots-vs-table__head small{color:var(--sub);font:800 9px/1 'Poppins',sans-serif;letter-spacing:.12em}
.dots-vs-table__head strong{margin-top:8px;font:800 20px/1.2 'Poppins',sans-serif}
.dots-vs-table__head .is-dots strong{color:var(--dots-indigo)}
.dots-vs-table__head .is-grok strong{color:#bd5100}
.dots-vs-table__row{border-top:1px solid var(--line)}
.dots-vs-table__head + .dots-vs-table__row{border-top:0}
.dots-vs-table__row > *{padding:19px 22px;border-left:1px solid var(--line)}
.dots-vs-table__row > :first-child{border-left:0}
.dots-vs-table__row > b{display:flex;align-items:center;background:#fafbfe;font-size:13px;line-height:1.55}
.dots-vs-table__row > p{color:#4f596c;font-size:13px;line-height:1.85}
.dots-vs-table__row > p:nth-of-type(1){background:rgba(242,247,255,.38)}
.dots-vs-table__row > p:nth-of-type(2){background:rgba(255,248,238,.34)}
.dots-vs-table__row > p span{display:none}

.dots-vs-choice{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1080px;margin:20px auto 0}
.dots-vs-choice__card{
  position:relative;overflow:hidden;padding:clamp(25px,3vw,36px);border-radius:30px;border:1px solid var(--line);background:#fff;
}
.dots-vs-choice__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--choice-accent)}
.dots-vs-choice__card--dots{--choice-accent:linear-gradient(180deg,var(--dots-indigo),var(--dots-cyan));background:linear-gradient(135deg,#fff,#f4f8ff)}
.dots-vs-choice__card--grok{--choice-accent:linear-gradient(180deg,#ff7100,#ffb000);background:linear-gradient(135deg,#fff,#fff8ee)}
.dots-vs-choice__card > span{color:var(--sub);font:800 9px/1 'Poppins',sans-serif;letter-spacing:.13em}
.dots-vs-choice__card h3{margin-top:14px;font-size:clamp(18px,1.7vw,23px);line-height:1.45;letter-spacing:-.035em}
.dots-vs-choice__card ul{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.dots-vs-choice__card li{position:relative;padding-left:20px;color:var(--sub);font-size:13px;line-height:1.7}
.dots-vs-choice__card li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--choice-accent)}
.dots-vs-choice__card a{display:inline-block;margin-top:22px;color:var(--dots-indigo);font-size:13px;font-weight:800;text-decoration:none}
.dots-vs-choice__card--grok a{color:#bd5100}

@media (max-width:900px){
  .dots-vs-visual{grid-template-columns:1fr;gap:14px;max-width:620px}
  .dots-vs-badge{width:58px;margin:-4px auto;font-size:14px}
  .dots-vs-badge::before,.dots-vs-badge::after{top:auto;left:50%;right:auto;width:0;height:18px;border-top:0;border-left:2px dotted #aab5ca}
  .dots-vs-badge::before{bottom:100%}.dots-vs-badge::after{top:100%;bottom:auto}
  .dots-vs-product__art{min-height:230px}
  .dots-vs-table{max-width:620px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .dots-vs-table__head{display:none}
  .dots-vs-table__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;border:0}
  .dots-vs-table__head + .dots-vs-table__row{margin-top:0}
  .dots-vs-table__row > *{border:1px solid var(--line);border-radius:18px;padding:16px 17px}
  .dots-vs-table__row > b{grid-column:1/-1;min-height:0;background:#eef1f7;border:0;border-radius:999px;padding:10px 16px}
  .dots-vs-table__row > p{background:#fff!important;box-shadow:0 12px 28px -24px rgba(31,48,98,.48)}
  .dots-vs-table__row > p span{display:block;margin-bottom:8px;color:var(--dots-indigo);font:800 11px/1 'Poppins',sans-serif}
  .dots-vs-table__row > p:nth-of-type(2) span{color:#bd5100}
  .dots-vs-choice{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:560px){
  .dots-vs-product{border-radius:30px}
  .dots-vs-product__art{min-height:205px}
  .dots-vs-product--dots .dots-vs-product__art img{width:min(42%,155px)}
  .dots-vs-product--grok .dots-vs-product__art img{width:min(80%,300px)}
  .dots-vs-product__art > span{left:18px;top:17px}
  .dots-vs-product__body{padding:23px 21px 27px}
  .dots-vs-table__row{grid-template-columns:1fr}
  .dots-vs-table__row > b{grid-column:auto}
}

/* dots と Grok Bot の比較は、Hermesページと同じ2段×3枚のカード構成に揃える。 */
.page-dots .dots-vs-section{
  background:#f7f8fc;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.page-dots .dots-vs-section::before{display:none}
.page-dots .dots-vs-section .yc-group--dots .yc-group__key::before{
  background:linear-gradient(120deg,var(--dots-indigo),var(--dots-cyan));
}
.page-dots .dots-vs-section .yc-group--grok .yc-group__key::before{
  background:linear-gradient(120deg,#ff7100,#ffb000);
}
.page-dots .dots-vs-section .yc-card__art--dots-agent > img{
  left:52%;width:112px;height:112px;
  filter:drop-shadow(0 12px 16px rgba(35,76,181,.2));
}
.page-dots .dots-vs-section .yc-card__art--grok > img{
  left:50%;width:168px;height:100px;
  filter:drop-shadow(0 12px 14px rgba(70,39,16,.16));
}
.page-dots .dots-vs-summary{margin-top:clamp(34px,4vw,54px)}

@media (max-width:1180px) and (min-width:1001px){
  header > nav{gap:12px}
  header > .actions .ibtn-ghost{display:none}
  .dots-hero-stage{min-height:600px}
  .dots-hero-copy{left:clamp(72px,9vw,106px);top:calc(var(--header-h) + 66px);width:55%}
  .dots-hero-copy h1{font-size:clamp(40px,4vw,47px);line-height:1.36}
  .dots-hero-copy > p{max-width:540px;font-size:15px;line-height:1.9}
  .dots-hero-facts{gap:8px;margin-top:18px}
  .dots-hero-facts li{min-height:44px;padding-inline:14px;font-size:12px;gap:8px}
  .dots-hero-facts li::before{width:8px;height:8px}
  .dots-hero-cta{gap:10px;margin-top:18px}
  .dots-hero-cta .ibtn{height:58px;padding-inline:22px;font-size:15px}
  .dots-hero-cta .ibtn:first-child{width:280px}
  .dots-hero-cta .ibtn:last-child{width:220px}
  .dots-hero-motion img{right:-5%;width:59%}
}

@media (max-width:1000px){
  .dots-hero-stage{
    min-height:0;aspect-ratio:941 / 1672;
    background:
      radial-gradient(circle at 52% 78%,rgba(50,191,233,.19),transparent 25%),
      radial-gradient(circle at 73% 70%,rgba(109,67,221,.13),transparent 31%),
      linear-gradient(180deg,#fff 0%,#f9fbff 58%,#eef5ff 100%);
  }
  .dots-hero-stage::after{
    background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.82) 49%,rgba(255,255,255,0) 68%);
  }
  .dots-hero-copy{
    left:8%;top:calc(var(--header-h) + clamp(24px,5vw,48px));width:84%;text-align:left;
  }
  .dots-hero-copy h1{font-size:clamp(34px,7.1vw,57px);line-height:1.22}
  .dots-hero-copy > p{font-size:clamp(13px,2.35vw,17px);line-height:1.78}
  .dots-hero-facts{gap:8px}
  .dots-hero-facts li{min-height:38px;padding-inline:13px;font-size:12px}
  .dots-hero-cta{display:grid;grid-template-columns:1fr;max-width:480px;gap:10px}
  .dots-hero-cta .ibtn,
  .dots-hero-cta .ibtn:first-child,
  .dots-hero-cta .ibtn:last-child{width:100%;min-width:0}
  .dots-hero-motion{display:block!important}
  .dots-hero-motion img{
    right:-11%;top:auto;bottom:1.5%;width:122%;height:auto;
    animation:dotsHeroFloatMobile 5.4s ease-in-out infinite!important;
  }
  .dots-hero-deco--a{top:-4%;left:-24%;width:58vw}
  .dots-hero-deco--b{right:-19%;bottom:-4%;width:52vw}
  .dots-hero-grid{right:4%;top:51%;width:92px;height:64px;background-size:11px 11px}
}
@keyframes dotsHeroFloatMobile{
  0%,100%{transform:translate3d(0,8px,0)}
  50%{transform:translate3d(0,0,0)}
}
@media (max-width:520px){
  .dots-hero-copy{left:7%;width:86%;top:calc(var(--header-h) + 23px)}
  .dots-hero-copy h1{font-size:clamp(31px,9vw,42px)}
  .dots-hero-copy > p br{display:none}
  .dots-hero-facts{display:none}
  .dots-hero-cta{margin-top:18px}
  .dots-hero-motion img{right:-8%;bottom:2%;width:116%}
}
/* PC幅では本文を通常フローに置き、ヒーロー枠を本文の高さに合わせて伸ばす（CTAの見切れ防止） */
@media (min-width:1001px){
  .dots-hero-stage{aspect-ratio:auto}
  .dots-hero-copy{
    position:relative;left:auto;top:auto;
    margin-left:clamp(112px,12vw,232px);
    padding:calc(var(--header-h) + clamp(78px,5.5vw,106px)) 0 clamp(48px,3.5vw,72px);
  }
}
@media (max-width:1180px) and (min-width:1001px){
  .dots-hero-copy{margin-left:clamp(72px,9vw,106px);padding-top:calc(var(--header-h) + 66px)}
}
@media (max-width:640px){
  .page-dots .dots-architecture-pin--chat{left:20%;top:18%}
  .page-dots .dots-architecture-pin--email{left:80%;top:20%}
  .page-dots .dots-architecture-pin--docs{left:18%;top:78%}
  .page-dots .dots-architecture-pin--sheets{left:82%;top:79%}
}
@media (prefers-reduced-motion:reduce){
  .dots-hero-motion img{animation:none!important;transform:none!important}
  .dots-vs-product__art::before,.dots-vs-product__art img{animation:none!important}
  .page-dots .dots-architecture-art-motion,
  .page-dots .dots-architecture-pin > span,
  .page-dots .dots-architecture-art,
  .page-dots .dots-architecture-panel .ochm-orbit__pin,
  .page-dots .dots-architecture-panel .ochm-deco--ring,
  .page-dots .dots-architecture-panel .ochm-deco--rays{animation:none!important}
  .page-dots .dots-architecture-panel .ochm-orbit::before{animation:none!important}
  .page-dots .dots-architecture-panel .ochm-fig{transition:none}
  .page-dots .dots-architecture-panel .ochm-fig:hover{transform:none}
}
@media (max-width:1199px){.fv-animation-bg,.fv-sequence-base,.fv-sequence-layer,.fv-arrival-exact{display:none}}
@media (prefers-reduced-motion:reduce) and (min-width:1200px){
  .fv-animation-bg,.fv-sequence-base,.fv-sequence-layer,.fv-arrival-exact,.fv-animated-cards{display:none!important}
  .fv-reference-image:not(.fv-reference-image--mobile){
    z-index:5;opacity:1;
  }
}

/* モバイルメニューは常に不透明な全面パネルにする。ヒーローの装飾を
   背面へ透かさず、従来の淡いグレーの見え方を保つ。 */
@media (max-width:1199px){
  header.is-menu-open{
    position:fixed !important;
    inset:0 !important;
    width:100%;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow-y:auto;
    background:#eff2f5 !important;
    background-image:none !important;
    opacity:1;
    isolation:isolate;
  }
  header.is-menu-open > nav{display:flex !important}
}

/* ============================================================
   59. Grok Bot 導入パッケージ

   既存ページの文法だけで構成する：全周角丸の色面、浮遊する主役画像、
   静止グリッド、読み込み時1回の立ち上がり、ホバー。スクロール監視は
   増やさず、サイト全体の sticky パネルと同じスクロール感を保つ。
============================================================ */
[hidden]{display:none!important}
.page-grokbot{--gb-orange:#ff7100;--gb-orange-2:#ffad00}
body.page-grokbot > header{background:#fff;animation:none}
.page-grokbot > header nav a[aria-current="page"]::after{background:var(--gb-orange)}
.page-grokbot > header .actions .arw{color:var(--gb-orange)}
.page-grokbot .label,
.page-grokbot .section > .wrap > .sec-head .label,
.page-grokbot .final .label,
.page-grokbot .ochm-feat__no{color:var(--gb-orange)}
.page-grokbot section.section h2 em,
.page-grokbot .final h2 em{
  background:linear-gradient(96deg,var(--gb-orange),var(--gb-orange-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 指定済みの完成画像をPC版Grok Bot FVとして表示する。
   画像上部94pxの焼き込みヘッダーだけを切り、実ヘッダーとリンクを残す。 */
.gb-reference-hero{
  position:relative;overflow:hidden;padding-top:var(--header-h);background:#fff;
}
.gb-reference-hero__viewport{
  position:relative;overflow:hidden;width:100%;aspect-ratio:1558 / 731;
}
.gb-reference-hero__image{
  position:absolute;z-index:0;left:0;top:-12.8591%;display:block;width:100%;height:112.8591%;
  max-width:none;object-fit:cover;object-position:center;pointer-events:none;
  animation:gbReferenceHeroReveal .82s var(--ease) both;
}
@keyframes gbReferenceHeroReveal{from{opacity:0;transform:scale(1.008)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .gb-reference-hero__image{animation:none}
}
.gb-reference-hero__ambient{
  position:absolute;z-index:1;left:47%;top:17%;width:50%;height:66%;border-radius:50%;
  pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,113,0,.09),rgba(22,104,240,.035) 45%,transparent 72%);
  animation:gbHeroAmbient 5.4s ease-in-out infinite;will-change:transform,opacity;
}
.gb-reference-hero__ambient::before{
  content:'';position:absolute;inset:7% 3%;border:1px dashed rgba(116,99,240,.18);border-radius:50%;
  animation:gbHeroOrbit 26s linear infinite;
}
.gb-reference-hero__ambient::after{
  content:'';position:absolute;left:11%;top:25%;width:7px;height:7px;border-radius:50%;background:#ff7100;
  box-shadow:34vw 5vw 0 #1668f2,27vw 18vw 0 #22b86b,8vw 22vw 0 #ffad00;
  animation:gbHeroSpark 4.8s ease-in-out infinite;
}
@keyframes gbHeroAmbient{0%,100%{opacity:.72;transform:translateY(5px) scale(.99)}50%{opacity:1;transform:translateY(-3px) scale(1.012)}}
@keyframes gbHeroOrbit{to{transform:rotate(360deg)}}
@keyframes gbHeroSpark{0%,100%{opacity:.42;transform:translateY(4px)}50%{opacity:1;transform:translateY(-5px)}}
.gb-space-particles{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.gb-reference-hero__actions{position:absolute;z-index:3;inset:0;pointer-events:none}
.gb-reference-hero__actions a{
  --hero-cta:#ff5a00;
  position:absolute;display:block;border-radius:999px;pointer-events:auto;cursor:pointer;touch-action:manipulation;
}
.gb-reference-hero__consult{left:10.2%;top:82.35%;width:21.8%;height:8.75%}
.gb-reference-hero__price{left:33.05%;top:82.35%;width:18.85%;height:8.75%}
.gb-reference-hero__actions a:focus-visible{outline:4px solid var(--focus-ring);outline-offset:4px}
.gb-hero--mobile{display:none}

.gb-hero{
  position:relative;overflow:hidden;
  min-height:clamp(620px,41.96vw,812px);padding:0;background:#fff;
}
.gb-hero__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;pointer-events:none;
  animation:gbHeroReveal .9s var(--ease) both;
}
@keyframes gbHeroReveal{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
.gb-hero__orb{position:absolute;display:none;pointer-events:none;border-radius:50%}
.gb-hero__orb--a{
  width:min(52vw,720px);aspect-ratio:1;right:-19%;top:-28%;
  border:2px solid rgba(255,113,0,.15);animation:ochmFloat 8s ease-in-out infinite;
}
.gb-hero__orb--b{
  width:min(32vw,430px);aspect-ratio:1;left:-13%;bottom:-24%;
  background:repeating-conic-gradient(rgba(255,113,0,.32) 0 5deg,transparent 5deg 17deg);
  opacity:.12;animation:ochmSpin 90s linear infinite;
}
.gb-hero__inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  min-height:inherit;align-items:center;
}
.gb-hero__copy{width:min(53%,650px);padding:clamp(82px,7vw,120px) 0 clamp(46px,4vw,72px)}
.gb-hero__copy h1{
  margin-top:18px;font-size:clamp(38px,3.35vw,58px);font-weight:800;letter-spacing:-.055em;line-height:1.28;
}
.gb-hero__copy h1 em{font-style:normal;color:var(--gb-orange)}
.gb-hero__copy .lead{margin-top:22px;color:#434b57;font-size:clamp(13px,1.05vw,16px);font-weight:500;line-height:1.9}
.gb-hero__status{
  display:inline-flex;margin-left:10px;padding:6px 11px;border-radius:999px;
  color:#8f3e00;background:#ffe9cf;border:1px solid rgba(255,113,0,.2);
  font:800 10px/1 'Poppins',sans-serif;letter-spacing:.12em;vertical-align:2px;
}
.gb-hero__facts li::before{background:linear-gradient(120deg,var(--gb-orange),var(--gb-orange-2))}
.gb-hero__art{position:relative;display:none;place-items:center;min-height:390px}
.gb-hero__art img{
  position:relative;z-index:2;width:min(120%,690px);max-width:none;height:auto;
  filter:drop-shadow(0 34px 34px rgba(53,39,24,.17));animation:ochmFloat 6.4s ease-in-out infinite;
}
.gb-hero__halo{
  position:absolute;width:min(37vw,510px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.78);box-shadow:0 34px 90px rgba(255,113,0,.13);
}
.gb-hero__art p{
  position:absolute;z-index:3;right:3%;bottom:3%;padding:12px 17px;border-radius:999px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-rest);
  font-size:12.5px;color:var(--sub);white-space:nowrap;
}
.gb-hero__art p b{color:var(--ink)}

.gb-feature-art--team img{width:min(86%,230px)}
.ochm-panel--grok{
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,214,128,.42),transparent 25%),
    linear-gradient(145deg,#ff5c00 0%,#ff7900 54%,#f3a400 125%);
}
.ochm-panel--grok .ochm-fig{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.3)}
.ochm-panel--grok .ochm-orbit::before{border-color:rgba(255,255,255,.52)}
.gb-orbit{min-height:390px}
.gb-orbit .ochm-orbit__img{width:min(115%,560px);max-width:none}
.gb-hd-official{
  width:clamp(58px,7vw,94px);height:clamp(34px,4vw,52px);
  border-radius:999px;background-color:#fff;
  background-image:url('../images/grok-bot-official-team.png');
  background-repeat:no-repeat;background-size:142px auto;background-position:center 50%;
  box-shadow:0 8px 18px rgba(40,29,18,.12);
}
.gb-roster-section{padding-top:0}
.gb-roster-section .ochm-panel--dark{padding-top:clamp(28px,3vw,44px)}
.gb-roster-section .oc-agent-marquee{margin-top:clamp(28px,3.6vw,48px)}
.gb-roster-section .oc-agent-card{border-top:4px solid #ff7800}

.gb-panel-wrap{padding:clamp(34px,4vw,62px) 0 clamp(70px,8vw,126px);background:#fff}
.gb-panel{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:clamp(24px,4vw,70px);padding:clamp(40px,5vw,76px);border-radius:60px;
  color:#fff;background:
    radial-gradient(circle at 85% 15%,rgba(255,169,62,.28),transparent 25%),
    linear-gradient(145deg,#171717 8%,#27221d 60%,#5a2b05 130%);
  box-shadow:0 40px 90px -64px rgba(43,25,10,.8);
}
.gb-panel::before{
  content:'';position:absolute;right:-210px;bottom:-340px;width:720px;height:720px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 90px rgba(255,255,255,.025);
}
.gb-panel__copy,.gb-panel__art,.gb-figs{position:relative;z-index:2}
.gb-panel .label{color:#ffb05a;background:none;-webkit-text-fill-color:currentColor}
.gb-panel h2{margin-top:14px;font-size:clamp(28px,3.6vw,50px);line-height:1.3}
.gb-panel h2 em{font-style:normal;color:#ff9a32}
.gb-panel .sec-lead{color:rgba(255,255,255,.75)}
.gb-access-levels{display:grid;gap:10px;margin-top:28px}
.gb-access-levels > div{
  display:grid;grid-template-columns:28px 90px 1fr;gap:10px;align-items:center;
  padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
.gb-access-levels span{font-size:10px;color:#ffad59}.gb-access-levels b{font-size:13px}.gb-access-levels small{font-size:12px;color:rgba(255,255,255,.65)}
.gb-panel__art{display:grid;place-items:center;min-height:310px}
.gb-panel__art > img{
  width:min(120%,590px);max-width:none;height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.34));
  animation:ochmFloat 6.8s -1.5s ease-in-out infinite;
}
.gb-screen{
  position:absolute;right:4%;bottom:8%;display:flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:999px;background:rgba(14,15,17,.82);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 28px rgba(0,0,0,.22);backdrop-filter:blur(7px);
}
.gb-screen span{width:6px;height:6px;border-radius:50%;background:#ff8a1f;animation:gbPulse 1.8s ease-in-out infinite}
.gb-screen span:nth-child(2){animation-delay:-.6s}.gb-screen span:nth-child(3){animation-delay:-1.2s}
.gb-screen b{margin-left:5px;color:#fff;font:800 9px/1 'Poppins',sans-serif;letter-spacing:.1em}
@keyframes gbPulse{0%,100%{opacity:.28;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
.gb-figs{grid-column:1/-1}

.gb-learning{position:relative;z-index:2}
.gb-learning .hm-rail li{transition:transform .2s ease,box-shadow .2s ease}
.gb-learning .hm-rail li:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.gb-security-art{position:relative;display:grid;place-items:center;min-height:340px;border-radius:48px;background:linear-gradient(145deg,#fff5e9,#edf0f4);overflow:hidden}
.gb-security-art::before{content:'';position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 20px 70px rgba(255,113,0,.12)}
.gb-security-art img{position:relative;z-index:1;width:110%;max-width:none;height:auto;animation:ochmFloat 7.2s -2.2s ease-in-out infinite}
.gb-risk-note{background:#fff7ee;border-color:rgba(255,113,0,.22)}
.gb-risk-note b{color:#a94b00}

.gb-compare-grid,.pr-products{display:grid;gap:clamp(16px,2vw,24px)}
.gb-compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pr-products{grid-template-columns:repeat(4,minmax(0,1fr))}
.gb-compare-card,.pr-product{
  position:relative;display:flex;flex-direction:column;min-height:300px;padding:clamp(25px,2.8vw,36px);
  border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-rest);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;
}
.gb-compare-card::before,.pr-product::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--product-accent)}
.gb-compare-card--claw,.pr-product--claw{--product-accent:linear-gradient(90deg,#1668f0,#4b9dff)}
.gb-compare-card--hermes,.pr-product--hermes{--product-accent:linear-gradient(90deg,#7b3cf5,#b47bff)}
.gb-compare-card--grok,.pr-product--grok{--product-accent:linear-gradient(90deg,#ff7100,#ffb000)}
.pr-product--dots{--product-accent:linear-gradient(90deg,#3157d5,#32bfe9)}
.gb-compare-card:hover,.pr-product:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
.gb-compare-card > span,.pr-product__type{font:800 10px/1 'Poppins',sans-serif;letter-spacing:.12em;color:var(--sub)}
.gb-compare-card h3,.pr-product h3{margin-top:18px;font-size:clamp(21px,2vw,28px)}
.gb-compare-card > b{margin-top:17px;font-size:15px}
.gb-compare-card p,.pr-product > p{margin-top:12px;color:var(--sub);font-size:14px;line-height:1.85}
.gb-compare-card a,.pr-product > a{margin-top:auto;padding-top:23px;color:var(--blue);font-size:13px;font-weight:800;text-decoration:none}
.gb-compare-card--grok a,.pr-product--grok > a{color:#bd5100}
.pr-product--dots > a{color:#3157d5}
.gb-source-note{padding-top:0}
.gb-source-note p{padding:18px 22px;border-radius:18px;background:#f6f8fa;color:var(--sub);font-size:12.5px;line-height:1.8}
.gb-source-note a{color:var(--blue);font-weight:700}
.gb-final{background:linear-gradient(155deg,#fff9f1,#f7f8fa)}

/* トップの完成画像を壊さず、下中央へ第三の主役を重ねて三角形を作る。 */
.fv-grok-launch{
  position:absolute;z-index:11;left:50%;top:70.5%;transform:translateX(-50%);
  display:grid;grid-template-columns:minmax(240px,280px) 1fr 38px;align-items:center;gap:14px;
  width:min(38vw,560px);min-height:98px;padding:8px 18px 8px 10px;
  border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,244,228,.98));
  border:2px solid rgba(255,113,0,.54);
  box-shadow:0 22px 50px rgba(89,45,10,.24),0 0 0 7px rgba(255,255,255,.54);
  text-decoration:none;backdrop-filter:blur(10px);
  transition:transform .24s var(--ease),box-shadow .24s;
}
.fv-grok-launch:hover{transform:translateX(-50%) translateY(-3px);box-shadow:0 20px 42px rgba(48,33,20,.22)}
.fv-grok-launch__official{
  display:block;width:100%;height:76px;border-radius:24px;background-color:#fff;
  background-image:url('../images/grok-bot-official-team.png');background-repeat:no-repeat;
  background-size:410px auto;background-position:center 50%;
}
.fv-grok-launch__name{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.fv-grok-launch small{color:#d45d00;font:800 9px/1 'Poppins',sans-serif;letter-spacing:.14em}
.fv-grok-launch b{margin-top:7px;color:#24292f;font:800 clamp(22px,2vw,30px)/1 'Poppins',sans-serif;letter-spacing:-.035em;white-space:nowrap}
.fv-grok-launch em{margin-top:7px;color:#6b4b35;font-size:10px;font-style:normal;font-weight:700;white-space:nowrap}
.fv-grok-launch i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ff7100;color:#fff;font-style:normal;font-weight:800}

.yc-group--grok .yc-group__key::before{background:linear-gradient(120deg,#ff7100,#ffb000)}
.yc-card__art--grok > img{left:50%;width:168px;height:100px}
.yc-group--dots .yc-group__key::before{background:linear-gradient(120deg,#3157d5,#32bfe9)}
.yc-card__art--dots-agent > img{left:52%;width:112px;height:112px;filter:drop-shadow(0 12px 16px rgba(35,76,181,.2))}

.pr-products-section{padding-top:clamp(48px,5vw,80px)}
.pr-product{min-height:360px}
.pr-product--grok{background:linear-gradient(160deg,#fff,#fff8ef)}
.pr-product--dots{background:linear-gradient(160deg,#fff,#f2f8ff)}
.pr-product--grok > img{width:150px;height:76px;object-fit:contain;margin:-10px 0 14px auto;filter:drop-shadow(0 12px 14px rgba(40,29,18,.14));animation:ochmFloat 7s ease-in-out infinite}
.pr-product--dots > img{width:110px;height:92px;object-fit:contain;margin:-16px 4px 4px auto;filter:drop-shadow(0 12px 14px rgba(49,87,213,.18));animation:ochmFloat 7s -.9s ease-in-out infinite}
.pr-product__new{position:absolute;right:22px;top:19px;padding:5px 9px;border-radius:999px;background:#ff7100;color:#fff;font:800 9px/1 'Poppins',sans-serif;letter-spacing:.1em}
.pr-product--dots .pr-product__new{background:linear-gradient(90deg,#3157d5,#32bfe9)}
.pr-product__price{display:grid;gap:8px;margin-top:auto;padding-top:40px;background:linear-gradient(var(--line),var(--line)) 0 22px/100% 1px no-repeat}
.pr-product__price b{font-size:13px}.pr-product__price .en{font-size:22px;color:var(--ink)}
.pr-product > a{margin-top:23px;padding-top:0}
.pr-products__note{max-width:880px;margin:24px auto 0;text-align:center;color:var(--sub);font-size:12.5px;line-height:1.8}

@media (min-width:1181px){
  .pr-product--claw h3,.pr-product--hermes h3{min-height:2.5em;line-height:1.25}
  .pr-product--claw > p,.pr-product--hermes > p{min-height:7.4em}
}

@media (max-width:1180px) and (min-width:901px){
  .pr-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .gb-reference-hero{display:none}
  .gb-hero--mobile{display:block}
  .gb-hero{
    min-height:0;padding:calc(var(--header-h) + 42px) 0 78px;
    background:radial-gradient(circle at 50% 17%,rgba(255,182,72,.2),transparent 24%),linear-gradient(160deg,#fff 12%,#fff8ee 66%,#f3f5f8 100%);
  }
  .gb-hero__bg{display:none}
  .gb-hero__orb{display:block}
  .gb-hero__inner,.gb-panel{grid-template-columns:1fr}
  .gb-hero__copy{width:100%;padding:0}
  .gb-hero__art{display:grid;min-height:310px;order:-1}.gb-hero__art img{width:min(108%,620px)}
  .gb-panel__art{min-height:280px}.gb-figs{grid-column:auto}
  .gb-compare-grid,.pr-products{grid-template-columns:1fr}
  .gb-compare-card,.pr-product{min-height:0}
}
@media (max-width:1199px){
  .fv-grok-launch{top:1.2%;width:min(86%,430px);min-height:76px;grid-template-columns:minmax(155px,220px) 1fr 30px;gap:9px;padding:5px 12px 5px 7px;border-radius:28px}
  .fv-grok-launch__official{height:60px;background-size:320px auto;border-radius:22px}
  .fv-grok-launch b{font-size:20px}.fv-grok-launch em{display:none}.fv-grok-launch i{width:30px;height:30px}
}
@media (max-width:640px){
  .gb-hero{min-height:0;padding:calc(var(--header-h) + 26px) 0 62px}
  .gb-hero__inner{gap:12px}.gb-hero__art{min-height:240px}.gb-hero__art p{right:auto;bottom:0;font-size:11px}
  .gb-hero__copy h1{font-size:clamp(34px,11vw,50px)}.gb-hero__copy .lead br{display:none}
  .gb-hero__status{display:table;margin:8px 0 0}.gb-hero__facts{gap:7px}.gb-hero__facts li{padding:7px 12px;font-size:11px}
  .gb-panel{border-radius:40px;padding:34px 22px}.gb-access-levels > div{grid-template-columns:24px 76px 1fr;padding:11px}.gb-access-levels small{font-size:10.5px}
  .gb-panel__art{min-height:210px}.gb-screen{right:0;bottom:0}.gb-security-art{min-height:250px}
  .gb-compare-card{min-height:0}
  .fv-grok-launch{top:.8%;width:84%;min-height:64px;grid-template-columns:minmax(130px,180px) 1fr 28px;gap:7px;padding:4px 9px 4px 6px;border-radius:24px}
  .fv-grok-launch__official{height:52px;background-size:270px auto;border-radius:18px}
  .fv-grok-launch small{font-size:7px}.fv-grok-launch b{font-size:17px}.fv-grok-launch i{width:28px;height:28px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .gb-reference-hero__ambient,.gb-reference-hero__ambient::before,.gb-reference-hero__ambient::after,.gb-hero__bg,.gb-hero__orb,.gb-hero__art img,.gb-panel__art > img,.gb-screen span,.gb-security-art img,.pr-product--grok > img,.pr-product--dots > img{animation:none}
  .gb-space-particles{display:none}
  .gb-learning .hm-rail li,.gb-compare-card,.pr-product,.fv-grok-launch{transition:none}
  .gb-learning .hm-rail li:hover,.gb-compare-card:hover,.pr-product:hover{transform:none}
  .fv-grok-launch:hover{transform:translateX(-50%)}
}

/* トップページの4エージェントFV。
   元画像上部98pxの焼き込みヘッダーだけを切り、実ヘッダーはそのまま使う。 */
.fv-trio-arrival-center,.fv-trio-arrival-openclaw,.fv-trio-arrival-hermes,.fv-trio-arrival-grok,.fv-trio-arrival-cloud{display:none}
.fv-left-agent-field{position:absolute;pointer-events:none;isolation:isolate}
.fv-left-agent-field--desktop{display:none}
.fv-left-agent-field::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse at 35% 44%,transparent 0 35%,rgba(255,255,255,.42) 35.4% 35.8%,transparent 36.3%),
    radial-gradient(ellipse at 35% 44%,transparent 0 51%,rgba(167,211,255,.25) 51.4% 51.8%,transparent 52.3%),
    radial-gradient(ellipse at 35% 44%,transparent 0 67%,rgba(255,255,255,.22) 67.4% 67.8%,transparent 68.3%);
  -webkit-mask-image:linear-gradient(145deg,transparent 3%,#000 29%,rgba(0,0,0,.8) 72%,transparent 98%);
  mask-image:linear-gradient(145deg,transparent 3%,#000 29%,rgba(0,0,0,.8) 72%,transparent 98%);
  opacity:.64;
}
.fv-left-agent-field::after{
  content:"";position:absolute;left:15%;top:8%;width:54%;height:84%;border-radius:50%;
  background:linear-gradient(154deg,rgba(145,216,255,.18),rgba(255,255,255,.08) 48%,rgba(255,112,128,.08) 72%,transparent 88%);
  filter:blur(16px);transform:rotate(8deg);
}
.fv-agent-unit{isolation:isolate;pointer-events:none}
.fv-agent-unit__art{
  position:relative;z-index:2;display:block;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center;
}
.fv-agent-unit:not(.fv-agent-unit--dots)::before{
  content:"";position:absolute;inset:4%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.32) 0%,rgba(136,198,255,.08) 46%,transparent 72%);
  filter:blur(10px);opacity:.46;
}
.fv-agent-unit:not(.fv-agent-unit--dots)::after{
  content:"";position:absolute;inset:1%;z-index:1;border-radius:50%;
  background:radial-gradient(circle,transparent 0 63%,rgba(255,255,255,.24) 63.3% 63.7%,transparent 64.1%);
  opacity:.42;
}
.fv-dots-unit{position:absolute;isolation:isolate;pointer-events:none}
.fv-dots-unit--desktop{display:none}
.fv-dots-unit::before{
  content:"";position:absolute;inset:-10%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.7) 0%,rgba(129,202,255,.28) 34%,rgba(118,121,244,.1) 55%,transparent 72%);
  filter:blur(8px);opacity:.4;
}
.fv-dots-unit::after{
  content:"";position:absolute;inset:-8%;z-index:1;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 46%,rgba(255,255,255,.46) 46.4% 46.9%,transparent 47.4%),
    radial-gradient(circle,transparent 0 62%,rgba(159,211,255,.32) 62.4% 62.9%,transparent 63.4%);
  -webkit-mask-image:linear-gradient(135deg,transparent 4%,#000 35%,rgba(0,0,0,.72) 70%,transparent 96%);
  mask-image:linear-gradient(135deg,transparent 4%,#000 35%,rgba(0,0,0,.72) 70%,transparent 96%);
  opacity:.38;transform:rotate(-10deg);
}
.fv-dots-unit__particles{
  position:absolute;inset:-5%;z-index:1;border-radius:50%;
  background:
    radial-gradient(circle at 18% 31%,rgba(255,255,255,.9) 0 1.4px,transparent 2.2px),
    radial-gradient(circle at 81% 20%,rgba(182,226,255,.78) 0 1.2px,transparent 2px),
    radial-gradient(circle at 89% 62%,rgba(255,255,255,.74) 0 1.5px,transparent 2.3px),
    radial-gradient(circle at 25% 78%,rgba(160,211,255,.7) 0 1.1px,transparent 1.9px),
    radial-gradient(circle at 62% 91%,rgba(255,255,255,.62) 0 1px,transparent 1.8px);
  opacity:.62;filter:drop-shadow(0 0 4px rgba(123,198,255,.42));
}
.fv-dots-unit__character{
  position:relative;z-index:2;display:block;width:94%;height:auto;margin:3%;
  opacity:.96;filter:saturate(.92) contrast(.97) brightness(1.025) drop-shadow(0 12px 20px rgba(27,48,105,.11)) drop-shadow(0 0 4px rgba(255,255,255,.22));
}
.fv-dots-unit__name{
  position:absolute;left:50%;top:96%;z-index:3;white-space:nowrap;transform:translateX(-50%);
  color:#2458e8;font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:clamp(25px,2.2vw,44px);font-weight:800;line-height:1;letter-spacing:-.055em;
  text-shadow:0 2px 0 rgba(255,255,255,.68),0 8px 18px rgba(28,53,120,.16);
}
@media (min-width:1200px){
  .fv-product-hero.fv-product-hero--trio{
    min-height:0;aspect-ratio:1558 / 912;overflow:hidden;
  }
  .fv-product-hero.fv-product-hero--trio::after{
    display:none;
  }
  .fv-product-hero--trio .fv-reference-image:not(.fv-reference-image--mobile){
    display:block!important;position:absolute;left:0;top:-10.7456%;z-index:5;
    width:100%;height:110.7456%;max-width:none;object-fit:cover;object-position:center;
    pointer-events:none;
  }
  .fv-product-hero--trio .fv-animation-bg,
  .fv-product-hero--trio .fv-sequence-base{
    top:-10.7456%;width:100%;height:110.7456%;object-fit:cover;
  }
  /* 旧2エージェント版の文字・CTA・×は、現在の完成画像と座標も内容も
     異なるため使用しない。背景だけ残し、完成画像そのものを分割表示する。 */
  .fv-product-hero--trio .fv-sequence-layer,
  .fv-product-hero--trio .fv-arrival-exact{display:none}
  .fv-product-hero--trio .fv-animated-cards{height:23.5%}
  .fv-product-hero--trio .fv-cards-track{align-items:flex-start;padding-top:0}
  .fv-product-hero--trio .fv-trio-arrival-center,
  .fv-product-hero--trio .fv-trio-arrival-openclaw,
  .fv-product-hero--trio .fv-trio-arrival-hermes,
  .fv-product-hero--trio .fv-trio-arrival-grok{
    position:absolute;display:block;left:0;top:-10.7456%;z-index:4;
    width:100%;height:110.7456%;max-width:none;object-fit:cover;object-position:center;
    opacity:0;pointer-events:none;will-change:transform,opacity;
  }
  .fv-product-hero--trio .fv-trio-arrival-center--badge{
    -webkit-mask-image:
      linear-gradient(to right,transparent 27%,#000 32%,#000 67%,transparent 72%),
      linear-gradient(to bottom,transparent 9%,#000 12%,#000 22%,transparent 25%);
    mask-image:
      linear-gradient(to right,transparent 27%,#000 32%,#000 67%,transparent 72%),
      linear-gradient(to bottom,transparent 9%,#000 12%,#000 22%,transparent 25%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-center--headline{
    -webkit-mask-image:
      linear-gradient(to right,transparent 26.5%,#000 29.5%,#000 69.5%,transparent 72%),
      linear-gradient(to bottom,transparent 25%,#000 28%,#000 43%,transparent 46%);
    mask-image:
      linear-gradient(to right,transparent 26.5%,#000 29.5%,#000 69.5%,transparent 72%),
      linear-gradient(to bottom,transparent 25%,#000 28%,#000 43%,transparent 46%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-center--line-1,
  .fv-product-hero--trio .fv-trio-arrival-center--line-2,
  .fv-product-hero--trio .fv-trio-arrival-center--line-3{
    -webkit-mask-image:
      linear-gradient(to right,transparent 27%,#000 29.5%,#000 69.5%,transparent 72%),
      var(--fv-trio-line-mask);
    mask-image:
      linear-gradient(to right,transparent 27%,#000 29.5%,#000 69.5%,transparent 72%),
      var(--fv-trio-line-mask);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-center--line-1{
    --fv-trio-line-mask:linear-gradient(to bottom,transparent 43.5%,#000 45.2%,#000 49.2%,transparent 50.4%);
  }
  .fv-product-hero--trio .fv-trio-arrival-center--line-2{
    --fv-trio-line-mask:linear-gradient(to bottom,transparent 48.5%,#000 49.8%,#000 53.8%,transparent 55.1%);
  }
  .fv-product-hero--trio .fv-trio-arrival-center--line-3{
    --fv-trio-line-mask:linear-gradient(to bottom,transparent 53.2%,#000 54.5%,#000 58.1%,transparent 59.5%);
  }
  .fv-product-hero--trio .fv-trio-arrival-center--cta{
    -webkit-mask-image:
      linear-gradient(to right,transparent 27%,#000 28.2%,#000 69.5%,transparent 70.5%),
      linear-gradient(to bottom,transparent 57%,#000 60%,#000 69%,transparent 72%);
    mask-image:
      linear-gradient(to right,transparent 27%,#000 28.2%,#000 69.5%,transparent 70.5%),
      linear-gradient(to bottom,transparent 57%,#000 60%,#000 69%,transparent 72%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-openclaw{
    transform-origin:15% 43%;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,#000 2.5%,#000 25.5%,transparent 28.5%),
      linear-gradient(to bottom,transparent 8%,#000 13%,#000 70%,transparent 76%);
    mask-image:
      linear-gradient(to right,transparent 0%,#000 2.5%,#000 25.5%,transparent 28.5%),
      linear-gradient(to bottom,transparent 8%,#000 13%,#000 70%,transparent 76%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-hermes{
    transform-origin:82.5% 26%;
    -webkit-mask-image:
      linear-gradient(to right,transparent 72.5%,#000 74.5%,#000 94%,transparent 97%),
      linear-gradient(to bottom,transparent 6%,#000 10%,#000 38%,transparent 41%);
    mask-image:
      linear-gradient(to right,transparent 72.5%,#000 74.5%,#000 94%,transparent 97%),
      linear-gradient(to bottom,transparent 6%,#000 10%,#000 38%,transparent 41%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-trio-arrival-grok{
    transform-origin:82.5% 56%;
    -webkit-mask-image:
      linear-gradient(to right,transparent 72%,#000 74%,#000 94%,transparent 97%),
      linear-gradient(to bottom,transparent 43%,#000 45%,#000 74%,transparent 77%);
    mask-image:
      linear-gradient(to right,transparent 72%,#000 74%,#000 94%,transparent 97%),
      linear-gradient(to bottom,transparent 43%,#000 45%,#000 74%,transparent 77%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
  .fv-product-hero--trio .fv-dots-unit--desktop{
    display:block;left:1.4%;top:0;z-index:4;width:20.5%;height:auto;aspect-ratio:1;
    opacity:0;transform-origin:50% 55%;will-change:transform,opacity;
  }
  .fv-product-hero--trio .fv-dots-unit--desktop::before,
  .fv-product-hero--trio .fv-dots-unit--desktop::after{content:none}
  .fv-product-hero--trio .fv-dots-unit--desktop .fv-dots-unit__particles{display:none}
  .fv-product-hero--trio .fv-dots-unit--desktop .fv-agent-unit__art{
    display:block;position:relative;left:auto;top:auto;width:94%;height:auto;max-width:none;
    object-fit:contain;object-position:center;opacity:.94;
    -webkit-mask-image:none;mask-image:none;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--badge{
    animation:fvSequenceFade .58s .08s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--headline{
    animation:fvSequenceFade .52s .68s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--line-1{
    animation:fvSequenceFade .44s 1.05s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--line-2{
    animation:fvSequenceFade .44s 1.28s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--line-3{
    animation:fvSequenceFade .44s 1.51s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-center--cta{
    animation:fvSequenceFade .46s 1.76s both ease-out;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-openclaw{
    animation:fvTrioOpenclawEnter 1.12s 2.56s both cubic-bezier(.2,.82,.22,1),fvTrioCharacterFade .34s 2.56s both linear;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-hermes{
    animation:fvTrioHermesEnter 1.12s 2.64s both cubic-bezier(.2,.82,.22,1),fvTrioCharacterFade .34s 2.64s both linear;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-trio-arrival-grok{
    animation:fvTrioGrokEnter 1.12s 2.96s both cubic-bezier(.2,.82,.22,1),fvTrioCharacterFade .34s 2.96s both linear;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-dots-unit--desktop{
    animation:fvTrioOpenclawEnter 1.12s 2.24s both cubic-bezier(.2,.82,.22,1),fvTrioCharacterFade .34s 2.24s both linear;
  }
  .fv-product-hero--trio.has-static-arrival .fv-reference-image:not(.fv-reference-image--mobile){
    /* Keep the animated character layers as the final frame. Even a one-frame
       swap to the baked artwork exposes tiny raster/position differences as a
       visible twitch at the end of the entrance. */
    opacity:0;
    animation:none;
  }
  @keyframes fvTrioOpenclawEnter{
    from{transform:translate3d(-32%,22%,0)}
    to{transform:translate3d(0,0,0)}
  }
  @keyframes fvTrioHermesEnter{
    from{transform:translate3d(32%,22%,0)}
    to{transform:translate3d(0,0,0)}
  }
  @keyframes fvTrioGrokEnter{
    from{transform:translate3d(32%,22%,0)}
    to{transform:translate3d(0,0,0)}
  }
  @keyframes fvTrioCharacterFade{from{opacity:0}to{opacity:1}}
  .fv-product-hero--trio .fv-grok-launch{display:none!important}
  .fv-product-hero--trio .fv-reference-actions > a{display:none}
  .fv-product-hero--trio .fv-reference-actions > a.fv-reference-actions__primary,
  .fv-product-hero--trio .fv-reference-actions > a.fv-reference-actions__secondary,
  .fv-product-hero--trio .fv-reference-actions > a.fv-reference-actions__grok{display:block}
  .fv-product-hero--trio .fv-reference-actions__primary{left:29.4%;top:56.81%;width:20.25%;height:7.31%}
  .fv-product-hero--trio .fv-reference-actions__secondary{left:50.35%;top:56.81%;width:20.25%;height:7.31%}
  .fv-product-hero--trio .fv-reference-actions__grok{left:71.8%;top:37.5%;width:19%;height:36%}
  /* 焼き込みCTAが現れる前に透明リンクの装飾だけが見えないよう、
     完成フレームと同時に操作領域を有効化する。 */
  .fv-product-hero--trio .fv-reference-actions__primary,
  .fv-product-hero--trio .fv-reference-actions__secondary{
    opacity:0;pointer-events:none;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-reference-actions__primary{
    animation:fvTrioActionsReady .01s 3.94s linear forwards;
  }
  .fv-product-hero--trio.is-arrival-ready .fv-reference-actions__secondary{
    animation:fvTrioActionsReady .01s 1.76s linear forwards;
  }
  @keyframes fvTrioActionsReady{
    from{opacity:0;pointer-events:none}
    to{opacity:1;pointer-events:auto}
  }
}

/* Desktop hero lettering is rendered by the browser, not enlarged from the
   raster artwork. Keep the existing background and character entrance. */
.fv-trio-copy{display:none}
@media (min-width:1200px){
  .fv-product-hero--trio .fv-trio-arrival-center{display:none!important}
  .fv-product-hero--trio .fv-trio-copy{
    position:absolute;display:block;left:0;top:-10.7456%;z-index:4;
    width:100%;height:110.7456%;container-type:inline-size;
    color:#101318;text-align:center;pointer-events:none;
    font-family:'Poppins','Noto Sans JP','Hiragino Sans',sans-serif;
  }
  .fv-trio-copy__badge,
  .fv-trio-copy__headline,
  .fv-trio-copy__lead,
  .fv-trio-copy__actions{position:absolute;left:50%;margin:0;transform:translateX(-50%);white-space:nowrap}
  .fv-trio-copy__badge{
    top:16%;width:max-content;padding:.75cqw 2.4cqw;border-radius:999px;
    background:rgba(255,255,255,.88);box-shadow:0 5px 22px rgba(70,75,130,.1);
    font-size:1.24cqw;font-weight:800;letter-spacing:.01em;
  }
  .fv-trio-copy__badge strong,.fv-trio-copy__lead strong{color:#1d49db}
  .fv-trio-copy__headline{
    top:28%;width:52%;font-size:3.52cqw;font-weight:900;
    line-height:1.43;letter-spacing:-.045em;
  }
  .fv-trio-copy__headline em{
    position:relative;color:#173fce;font-style:normal;
    /* Render the Latin "AI" in the same face as the Japanese title. */
    font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  }
  .fv-trio-copy__headline em::after{
    position:absolute;content:"";left:0;right:0;bottom:-.12em;height:.085em;
    border-radius:99px;background:linear-gradient(90deg,#18a5f5,#7958e9)
  }
  .fv-trio-copy__lead{width:57%;font-size:1.18cqw;font-weight:500;line-height:1.3}
  .fv-trio-copy__lead strong{font-weight:700}
  .fv-trio-copy__lead--first{top:47.7%}
  .fv-trio-copy__lead--second{top:51.8%}
  .fv-trio-copy__lead--third{top:56%}
  .fv-trio-copy__actions{top:61%;display:flex;gap:.7cqw;width:41.2%;height:6.6%}
  .fv-trio-copy__actions > .fv-trio-copy__action{
    position:relative;display:flex;align-items:center;justify-content:center;flex:1;
    isolation:isolate;overflow:hidden;border:.12cqw solid #20242b;border-radius:999px;
    background:#fff;color:#252a32;font-size:1.15cqw;font-weight:800;
    transition:border-color .3s ease,box-shadow .3s ease;
  }
  .fv-trio-copy__action::before{
    position:absolute;inset:0;z-index:1;content:"";border-radius:999px;
    background:#1668f2;clip-path:circle(0 at 20% 40%);
    transition:clip-path .42s cubic-bezier(.2,.8,.2,1);
  }
  .fv-trio-copy__action-rest,
  .fv-trio-copy__action-hover{
    display:flex;align-items:center;justify-content:center;gap:.55em;
    transition:transform .3s ease,opacity .3s ease;
  }
  .fv-trio-copy__action-rest{position:relative;z-index:2}
  .fv-trio-copy__action-hover{
    position:absolute;inset:0;z-index:2;color:#fff;opacity:0;
    transform:translateX(3rem);
  }
  .fv-trio-copy__action b{color:#174ee9;font-size:1.25em;font-weight:400}
  .fv-trio-copy__action-hover b{color:#fff}
  .fv-product-hero--trio:has(.fv-reference-actions__primary:is(:hover,:focus-visible)) .fv-trio-copy__action:first-child,
  .fv-product-hero--trio:has(.fv-reference-actions__secondary:is(:hover,:focus-visible)) .fv-trio-copy__action:last-child{
    border-color:#1668f2;box-shadow:0 10px 22px rgba(22,104,240,.22);
  }
  .fv-product-hero--trio:has(.fv-reference-actions__primary:is(:hover,:focus-visible)) .fv-trio-copy__action:first-child::before,
  .fv-product-hero--trio:has(.fv-reference-actions__secondary:is(:hover,:focus-visible)) .fv-trio-copy__action:last-child::before{
    clip-path:circle(150% at 20% 40%);
  }
  .fv-product-hero--trio:has(.fv-reference-actions__primary:is(:hover,:focus-visible)) .fv-trio-copy__action:first-child .fv-trio-copy__action-rest,
  .fv-product-hero--trio:has(.fv-reference-actions__secondary:is(:hover,:focus-visible)) .fv-trio-copy__action:last-child .fv-trio-copy__action-rest{
    opacity:0;transform:translateX(3rem);
  }
  .fv-product-hero--trio:has(.fv-reference-actions__primary:is(:hover,:focus-visible)) .fv-trio-copy__action:first-child .fv-trio-copy__action-hover,
  .fv-product-hero--trio:has(.fv-reference-actions__secondary:is(:hover,:focus-visible)) .fv-trio-copy__action:last-child .fv-trio-copy__action-hover{
    opacity:1;transform:translateX(0);
  }
  .fv-product-hero--trio .fv-reference-actions__primary:is(:hover,:focus-visible),
  .fv-product-hero--trio .fv-reference-actions__secondary:is(:hover,:focus-visible){box-shadow:none!important}
  .fv-product-hero--trio .fv-reference-actions__primary .ibtn__hover-label,
  .fv-product-hero--trio .fv-reference-actions__primary .ibtn__hover-fill,
  .fv-product-hero--trio .fv-reference-actions__secondary .ibtn__hover-label,
  .fv-product-hero--trio .fv-reference-actions__secondary .ibtn__hover-fill{display:none!important}
  .fv-product-hero--trio.has-static-arrival .fv-trio-copy > *{opacity:0}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__badge{animation:fvTrioCopyIn .58s .08s both}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__headline{animation:fvTrioCopyIn .52s .68s both}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__lead--first{animation:fvTrioCopyIn .44s 1.05s both}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__lead--second{animation:fvTrioCopyIn .44s 1.28s both}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__lead--third{animation:fvTrioCopyIn .44s 1.51s both}
  .fv-product-hero--trio.is-arrival-ready .fv-trio-copy__actions{animation:fvTrioCopyIn .46s 1.76s both}
  @keyframes fvTrioCopyIn{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce) and (min-width:1200px){
  .fv-product-hero--trio .fv-sequence-base{display:block!important;opacity:1}
  .fv-product-hero--trio .fv-reference-image:not(.fv-reference-image--mobile){opacity:0!important}
  .fv-product-hero--trio .fv-trio-arrival-openclaw,
  .fv-product-hero--trio .fv-trio-arrival-hermes,
  .fv-product-hero--trio .fv-trio-arrival-grok,
  .fv-product-hero--trio .fv-dots-unit--desktop{display:block!important;opacity:1!important;animation:none!important}
  .fv-product-hero--trio .fv-dots-unit--desktop .fv-agent-unit__art{display:block!important;opacity:.96!important}
  .fv-product-hero--trio .fv-trio-copy > *{opacity:1!important;animation:none!important}
}
@media (max-width:1199px) and (prefers-reduced-motion:no-preference){
  .fv-product-hero--trio .fv-grok-launch{animation:fvGrokLaunchEnter .9s .32s backwards cubic-bezier(.2,.82,.22,1)}
  @keyframes fvGrokLaunchEnter{
    from{opacity:0;transform:translate3d(-50%,-24px,0) scale(.94)}
    to{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  }
}
@media (max-width:1199px){
  .fv-product-hero--trio .fv-reference-actions{display:block;pointer-events:none}
  .fv-product-hero--trio .fv-reference-actions > a{display:none}
  .fv-product-hero--trio .fv-reference-actions > a.fv-reference-actions__primary,
  .fv-product-hero--trio .fv-reference-actions > a.fv-reference-actions__secondary{
    display:block;left:15%;width:70%;height:5.9%;pointer-events:auto;
  }
  .fv-product-hero--trio .fv-reference-actions__primary{top:65%}
  .fv-product-hero--trio .fv-reference-actions__secondary{top:72.1%}
}
@media (prefers-reduced-motion:reduce){
  .fv-trio-arrival-center,.fv-trio-arrival-openclaw,.fv-trio-arrival-hermes,.fv-trio-arrival-grok{display:none!important}
  .fv-product-hero--trio .fv-grok-launch{animation:none!important}
}

/* Hero arrival: only true transparent character assets move.
   The final screenshot remains the single source of truth for the end state. */
@media (min-width:1200px){
  .fv-product-hero--trio .fv-trio-arrival-openclaw{
    top:auto;left:auto;height:auto;object-fit:contain;object-position:center;
    -webkit-mask-image:none;mask-image:none;
  }
  .fv-product-hero--trio .fv-trio-arrival-openclaw{
    left:2%;top:35%;width:19%;height:42%;
  }
  .fv-product-hero--trio .fv-trio-arrival-openclaw,
  .fv-product-hero--trio .fv-trio-arrival-hermes,
  .fv-product-hero--trio .fv-trio-arrival-grok{
    filter:drop-shadow(0 12px 20px rgba(27,48,105,.11));
  }
  .fv-product-hero--trio .fv-agent-unit--openclaw::before,
  .fv-product-hero--trio .fv-agent-unit--openclaw::after{content:none}
  .fv-product-hero--trio .fv-trio-arrival-hermes,
  .fv-product-hero--trio .fv-trio-arrival-grok{
    right:auto;object-fit:fill;object-position:center;
    -webkit-mask-image:none;mask-image:none;mix-blend-mode:normal;
  }
  .fv-product-hero--trio .fv-agent-unit--hermes .fv-agent-unit__art,
  .fv-product-hero--trio .fv-agent-unit--grok .fv-agent-unit__art{object-fit:fill}
  .fv-product-hero--trio .fv-trio-arrival-hermes{
    /* Transparent-canvas bounds are converted from the final artwork's visible
       Hermes bounds, so the final animation frame lands in the same place. */
    left:68.74%;top:-.24%;width:29.98%;height:36.07%;
    transform-origin:50% 50%;
  }
  .fv-product-hero--trio .fv-trio-arrival-grok{
    /* Same conversion for Grok Bot; only the alpha cutout moves. */
    left:66.52%;top:36%;width:29.03%;height:38.39%;
    transform-origin:50% 50%;
  }
}

@media (prefers-reduced-motion:reduce){
  .oc-architecture-panel .ochm-deco--ring,
  .oc-architecture-panel .ochm-deco--rays,
  .oc-architecture-panel .ochm-orbit::before,
  .oc-architecture-panel .ochm-orbit__img,
  .oc-architecture-panel .ochm-orbit__pin{animation:none!important}
}

/* FV artwork fallback.
   Git LFS objects or one of the animation layers may be unavailable in a local
   checkout. Keep the real heading and CTA usable instead of leaving a blank
   first viewport. The class is added by reveal.js after the active artwork
   reports an error. */
.hero2.fv.is-fv-asset-fallback{
  min-height:clamp(620px,76svh,820px);
  padding:clamp(112px,12vw,164px) 20px clamp(84px,9vw,124px);
  background:
    radial-gradient(circle at 15% 22%,rgba(22,104,240,.18),transparent 32%),
    radial-gradient(circle at 84% 72%,rgba(123,60,245,.18),transparent 34%),
    linear-gradient(145deg,#f8faff 0%,#eef2f7 52%,#f7f2ff 100%);
}
.hero2.fv.is-fv-asset-fallback > .fv-product-hero,
.hero2.fv.is-fv-asset-fallback > .mobile-hero,
.hero2.fv.is-fv-asset-fallback > .fv-ring,
.hero2.fv.is-fv-asset-fallback > .fv-agent-pair{display:none!important}
.hero2.fv.is-fv-asset-fallback > .fv-inner{
  display:flex!important;
  min-height:clamp(420px,54svh,580px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero2.fv.is-fv-asset-fallback .fv-mascots{display:none}
.hero2.fv.is-fv-asset-fallback h1{max-width:920px;margin-top:0}
.hero2.fv.is-fv-asset-fallback .hero2-lead{max-width:720px}
.hero2.fv.is-fv-asset-fallback + .fv-proof{margin-top:-40px;border-radius:40px 40px 0 0}
@media (max-width:640px){
  .hero2.fv.is-fv-asset-fallback{
    min-height:calc(100svh - var(--header-h));
    padding:calc(var(--header-h) + 56px) 18px 88px;
  }
  .hero2.fv.is-fv-asset-fallback > .fv-inner{min-height:0}
  .hero2.fv.is-fv-asset-fallback h1{font-size:clamp(36px,11vw,52px)}
  .hero2.fv.is-fv-asset-fallback .hero2-lead{font-size:14px;line-height:1.85}
  .hero2.fv.is-fv-asset-fallback .hero2-lead br{display:none}
  .hero2.fv.is-fv-asset-fallback + .fv-proof{margin-top:-32px;border-radius:32px 32px 0 0}
}

/* Homepage video library. The cards intentionally use data attributes for the
   future video URLs so real footage can be added without rebuilding layout. */
.home-video-showcase{
  --video-ink:#11172a;
  --video-blue:#1768f2;
  --video-blue-soft:#eaf3ff;
  --video-red:#ff3038;
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(78px,8vw,132px) 0 clamp(86px,9vw,148px);
  background:
    radial-gradient(circle at 13% 7%,rgba(255,130,157,.13),transparent 24%),
    radial-gradient(circle at 88% 88%,rgba(71,174,255,.17),transparent 27%),
    linear-gradient(180deg,#fff 0%,#f8fbff 38%,#f4f9ff 100%);
}
.home-video-showcase::before,.home-video-showcase::after{
  content:"";position:absolute;z-index:-1;border-radius:34%;filter:blur(1px);opacity:.72;transform:rotate(27deg);pointer-events:none;
}
.home-video-showcase::before{left:-8%;top:20%;width:24vw;height:15vw;background:linear-gradient(135deg,rgba(56,166,255,.13),rgba(255,255,255,0))}
.home-video-showcase::after{right:-6%;bottom:-2%;width:20vw;height:15vw;background:linear-gradient(135deg,rgba(133,108,255,.1),rgba(68,181,255,.14))}
.home-video-showcase__glow{position:absolute;inset:0;z-index:-2;background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.86) 48%,transparent 68%);pointer-events:none}
.home-video-showcase__inner{max-width:1680px}
.home-video-showcase__header{
  /* The global `header` rules belong to the site navigation. Reset them here
     so this semantic section header keeps its own document-flow layout. */
  position:static;
  z-index:auto;
  display:block;
  width:min(100%,820px);
  height:auto;
  min-height:0;
  padding:0;
  margin:0 auto clamp(36px,4vw,58px);
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
  animation:none;
  text-align:center;
}
.home-video-showcase__header .eyebrow{margin-bottom:12px;color:var(--video-blue);font-size:12px;font-weight:800;letter-spacing:.18em}
.home-video-showcase__header h2{max-width:100%;margin:0;color:var(--video-ink);font-size:clamp(32px,4vw,58px);line-height:1.2;letter-spacing:-.045em;overflow-wrap:anywhere;text-wrap:balance}
.home-video-showcase__header h2 em{display:inline-block;max-width:100%;color:var(--video-blue);font-style:normal}
.home-video-showcase__header > p:last-child{max-width:42rem;margin:18px auto 0;color:#596276;font-size:clamp(14px,1.2vw,17px);line-height:1.85;text-wrap:balance}
.video-carousel{position:relative;width:100%}
.video-carousel__viewport{overflow:hidden;padding:34px 10px 42px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.video-carousel__viewport img{-webkit-user-drag:none}
.video-carousel__track{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);width:max-content;transform:translate3d(0,0,0);transition:transform .58s cubic-bezier(.22,.72,.2,1);will-change:transform}
.video-card{flex:0 0 clamp(310px,31vw,540px);opacity:.67;transform:scale(.9);transition:transform .48s cubic-bezier(.22,.72,.2,1),opacity .36s ease,filter .36s ease;filter:saturate(.72)}
.video-card.is-active{z-index:2;opacity:1;transform:scale(1.045);filter:none}
.video-card__trigger{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.video-card__trigger:focus-visible{outline:3px solid var(--video-blue);outline-offset:7px;border-radius:18px}
.video-card__visual{position:relative;display:flex;aspect-ratio:16/9;overflow:hidden;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.2vw,36px);border:1px solid rgba(255,255,255,.82);border-radius:18px;background:#1f5ed5;box-shadow:0 20px 50px rgba(27,51,105,.15);color:#fff}
.video-card__visual::before{content:"";position:absolute;inset:0;background:linear-gradient(124deg,rgba(255,255,255,.18),transparent 40%),repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.055) 30px 31px),repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.045) 30px 31px);pointer-events:none}
.video-card__visual::after{content:"";position:absolute;right:-12%;top:-28%;width:58%;aspect-ratio:1;border:1px solid rgba(255,255,255,.28);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.06),0 0 0 54px rgba(255,255,255,.035)}
.video-card__visual--dots{background:linear-gradient(145deg,#42bdf7 0%,#1558e7 62%,#183477 100%)}
.video-card__visual--openclaw{background:linear-gradient(145deg,#ff6976 0%,#e31828 58%,#9c0713 100%)}
.video-card__visual--featured{background:linear-gradient(145deg,#1d2d5d 0%,#1768f2 52%,#6e4df1 100%)}
.video-card__visual--hermes{background:linear-gradient(145deg,#565b71 0%,#1d2338 56%,#080b13 100%)}
.video-card__visual--grok{background:linear-gradient(145deg,#272a33 0%,#090b10 58%,#1768f2 145%)}
.video-card__kicker,.video-card__soon,.video-card__visual strong{position:relative;z-index:1}
.video-card__kicker{position:absolute;left:clamp(22px,2.2vw,36px);top:clamp(20px,2vw,30px);font-size:11px;font-weight:800;letter-spacing:.16em;opacity:.78}
.video-card__visual strong{max-width:80%;font-family:"Poppins","Noto Sans JP",sans-serif;font-size:clamp(28px,3vw,50px);line-height:1.03;letter-spacing:-.045em;text-shadow:0 8px 28px rgba(0,0,0,.22)}
.video-card__soon{margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.14em;opacity:.68}
.video-card__play{position:absolute;z-index:3;left:50%;top:50%;width:clamp(58px,5vw,78px);height:clamp(40px,3.5vw,54px);border-radius:14px;background:var(--video-red);box-shadow:0 12px 28px rgba(111,8,16,.3);transform:translate(-50%,-50%);transition:transform .22s ease,box-shadow .22s ease}
.video-card__play::after{content:"";position:absolute;left:52%;top:50%;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff;transform:translate(-40%,-50%)}
.video-card__trigger:is(:hover,:focus-visible) .video-card__play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 14px 34px rgba(111,8,16,.4)}
.video-card__caption{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 8px 0;color:var(--video-ink)}
.video-card__caption small{color:#667085;font-size:11px;font-weight:700;letter-spacing:.05em}
.video-card__caption b{font-size:clamp(14px,1.25vw,18px);line-height:1.45;text-align:right}
.video-carousel__arrow{position:absolute;z-index:4;top:calc(50% - 18px);display:grid;width:54px;height:54px;border:1px solid rgba(23,32,53,.08);border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(28,54,99,.14);color:var(--video-ink);font-size:34px;line-height:1;place-items:center;cursor:pointer;transform:translateY(-50%);transition:transform .2s ease,background .2s ease,color .2s ease}
.video-carousel__arrow:hover,.video-carousel__arrow:focus-visible{background:var(--video-blue);color:#fff;transform:translateY(-50%) scale(1.06)}
.video-carousel__arrow:focus-visible{outline:3px solid rgba(23,104,242,.3);outline-offset:3px}
.video-carousel__arrow--prev{left:4px}.video-carousel__arrow--next{right:4px}
.video-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
.video-carousel__dot{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#d5dbe5;cursor:pointer;transition:width .25s ease,background .25s ease}
.video-carousel__dot.is-active{width:30px;background:var(--video-blue)}
.video-carousel__dot:focus-visible{outline:2px solid var(--video-blue);outline-offset:3px}
.video-showcase__status{min-height:1.6em;margin:13px 0 0;color:#697386;font-size:12px;text-align:center}
.video-player-dialog{--video-ink:#11172a;--video-red:#ff3038;width:min(960px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:24px;background:#fff;box-shadow:0 30px 100px rgba(10,22,48,.32);color:var(--video-ink)}
/* 画面中央に出す。共通リセットで margin が 0 になり、ブラウザ標準の中央寄せが効かないため明示する。 */
.video-player-dialog[open]{position:fixed;inset:0;width:min(960px,calc(100vw - 32px));height:fit-content;max-height:calc(100vh - 32px);margin:auto;overflow:auto}
.video-player-dialog::backdrop{background:rgba(8,14,29,.72);backdrop-filter:blur(8px)}
.video-player-dialog__panel{position:relative;padding:16px 16px 24px}
.video-player-dialog__close{position:absolute;z-index:4;right:24px;top:24px;display:grid;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(7,12,25,.72);color:#fff;font-size:28px;line-height:1;place-items:center;cursor:pointer}
.video-player-dialog__close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.video-player-dialog__stage{position:relative;display:grid;aspect-ratio:16/9;overflow:hidden;border-radius:15px;background:linear-gradient(145deg,#162449,#1768f2);place-items:center}
.video-player-dialog__stage iframe,.video-player-dialog__stage video{display:block;width:100%;height:100%;border:0;background:#000}
.video-player-dialog__captions{position:absolute;left:50%;bottom:7%;z-index:2;max-width:88%;padding:.32em .75em;border-radius:7px;background:rgba(0,0,0,.74);color:#fff;font-size:clamp(13px,1.55vw,22px);font-weight:600;line-height:1.5;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);transform:translateX(-50%);pointer-events:none;white-space:pre-line}
.video-player-dialog__captions:empty{display:none}
.video-player-dialog__empty{display:grid;gap:14px;color:#fff;text-align:center;place-items:center}
.video-player-dialog__empty span{display:grid;width:72px;height:52px;border-radius:15px;background:var(--video-red);font-size:22px;place-items:center}
.video-player-dialog__empty p{margin:0;font-weight:700;letter-spacing:.04em}
.video-player-dialog h3{margin:20px 8px 0;font-size:clamp(19px,2vw,26px);letter-spacing:-.025em}
body.has-video-dialog{overflow:hidden}
@media (max-width:900px){
  .home-video-showcase{padding:70px 0 86px}
  .home-video-showcase__header{padding:0 18px;margin-bottom:28px}
  .home-video-showcase__header h2{font-size:clamp(30px,8vw,44px)}
  .home-video-showcase__header h2 em{display:block}
  .video-carousel__viewport{padding:24px 0 34px}
  .video-carousel__track{gap:14px}
  .video-card{flex-basis:min(82vw,460px);transform:scale(.94)}
  .video-card.is-active{transform:scale(1)}
  .video-card__caption{padding-inline:4px}
  .video-carousel__arrow{width:46px;height:46px;font-size:29px}
  .video-carousel__arrow--prev{left:10px}.video-carousel__arrow--next{right:10px}
}
@media (max-width:560px){
  .home-video-showcase{padding:58px 0 72px}
  .home-video-showcase__header > p:last-child{font-size:13px}
  .video-card{flex-basis:84vw}
  .video-card__visual{border-radius:14px;padding:22px}
  .video-card__visual strong{font-size:clamp(27px,9vw,38px)}
  /* 「AIエージェント導入事例」が途中で折れないよう、文字数の多いカードだけ少し小さく */
  .video-card__visual--featured strong{font-size:clamp(22px,7.4vw,34px);letter-spacing:-.02em}
  .video-card__caption{display:block;padding-top:14px}
  .video-card__caption b{display:block;margin-top:5px;text-align:left}
  /* スマホはカードが低く、中央の再生ボタンと左右の矢印がタイトルに被る。
     タイトルは左下に幅を絞って置き、再生ボタンは右下、矢印はカード右上に寄せて重なりをなくす。 */
  .video-card__visual{padding:18px 18px 16px 28px}
  .video-card__kicker{left:28px;top:16px}
  .video-card__visual strong{max-width:72%;font-size:clamp(24px,7.4vw,32px)}
  .video-card__visual--featured strong{max-width:72%;font-size:clamp(20px,6.2vw,28px)}
  .video-card__soon{max-width:74%;margin-top:8px;font-size:9px;line-height:1.5;letter-spacing:.1em}
  .video-card__play{left:auto;right:16px;top:auto;bottom:16px;width:52px;height:38px;transform:none}
  .video-card__trigger:is(:hover,:focus-visible) .video-card__play{transform:scale(1.06)}
  /* 矢印は画面の左右端(6px)・縦はサムネイル(16:9, 幅84vw)の中央。
     カード内側の左余白を 28px 取り、中央に置いた矢印(右端 42px)がタイトル文字に掛からないようにする。
     left/right の calc は、中央寄せされたカルーセル内から画面端までの距離。 */
  .video-carousel__arrow{top:calc(24px + 23.6vw);width:36px;height:36px;font-size:22px;transform:translateY(-50%);background:rgba(255,255,255,.92)}
  .video-carousel__arrow:hover,.video-carousel__arrow:focus-visible{transform:translateY(-50%) scale(1.06)}
  .video-carousel__arrow--prev{left:calc(50% - 50vw + 6px)}
  .video-carousel__arrow--next{right:calc(50% - 50vw + 6px)}
  .video-player-dialog{width:calc(100vw - 20px);border-radius:18px}
  .video-player-dialog__panel{padding:10px 10px 18px}
  .video-player-dialog__close{right:16px;top:16px;width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .video-carousel__track,.video-card,.video-card__play{transition:none!important}
}