/* ══ 欧文：支給フォント SBOAI Sans（Static 5ウェイト）══
   CSSのウェイト値とフォントを1対1で対応させる。和文の Noto Sans JP と
   同じ番号が同じ太さになるので、見出しに混ざる英字だけが浮かない。 */
@font-face{font-family:"SBOAI Sans";src:url("../fonts/SBOAISans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"SBOAI Sans";src:url("../fonts/SBOAISans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SBOAI Sans";src:url("../fonts/SBOAISans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"SBOAI Sans";src:url("../fonts/SBOAISans-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"SBOAI Sans";src:url("../fonts/SBOAISans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* ══════════════════════════════════════════════════════════════
   構成：260827_LP構成 のワイヤーフレーム
   体裁：openai.com/business/solutions/cybersecurity の作法に寄せる
         ・見出しもリードもボタンも中央寄せ
         ・見出しは大きくウェイト500、行間は詰める
         ・アイキャッチは黒帯ではなくグレー面 #F1F1F1
         ・アイブロウ（小見出しラベル）は置かない
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#000000; --muted:#666666;
  --line:rgba(13,13,13,.12); --surface:rgba(13,13,13,.035); --surface2:rgba(13,13,13,.07);
  --band:#F2F2F2; --panel:#F6FBFF; --panel-blue:#EAF0F7;
  --accent:#7893FF; --cta:#7893FF; --accent-weak:rgba(120,147,255,.12); --accent-line:rgba(120,147,255,.42);
  --tag:#E9EDFF; --req:#E11D28; --cyan:#5EC5DE; --grad:linear-gradient(90deg,#7A96FC 0%,#C296DF 100%);
  --pill:999px; --card:12px; --r:8px; --maxw:1080px;
  --formw:338px; --headh:62px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 和文はWebフォントで固定しない指定。端末標準のゴシックを使い、
   Noto Sans JP が入っている端末ではそれを優先する（制作ルール 2）。 */
body{
  background:#fff;color:var(--ink);
  font-family:"SBOAI Sans","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
              "Yu Gothic",system-ui,-apple-system,sans-serif;
  font-weight:400;font-size:16px;line-height:1.75;letter-spacing:-.008em;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}

section{padding:60px 0}
@media(max-width:860px){section{padding:76px 0}}
.grey{background:var(--band)}
/* 右に固定のフォームを置くぶん、本文を左へ寄せる */
main{margin-right:var(--formw)}
/* フォームナシ版：右サイドバー分の余白をなくして本文を画面中央に */
body.noform{--formw:0}

/* header — 右のフォームの上には乗らない。メイン領域だけの幅で敷く */
.hd{position:sticky;top:0;z-index:40;margin-right:var(--formw);
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hd-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:var(--headh);
  display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center}
.logo img{height:19px;width:auto}
.nav{display:flex;gap:24px;margin-left:10px;font-size:14px;color:var(--muted)}
.nav a{white-space:nowrap}
.nav a:hover{color:var(--ink)}
/* 右サイドバーぶん幅が狭い帯（〜1100px）はナビと間隔を詰めて折り返さない */
@media(max-width:1100px){.nav{gap:15px;font-size:13px;margin-left:4px}.hd-in{gap:14px}}
@media(max-width:1000px){.nav{display:none}}
.hd .btn{margin-left:auto}
@media(max-width:640px){.hd-in{padding:0 22px}}

/* ── buttons ─────────────────────────────────────────────────
   既定は黒。申込につながるものだけ青。二次はテキストに矢印。   */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  height:52px;padding:0 30px;border-radius:var(--pill);
  font-size:15px;font-weight:500;letter-spacing:-.01em;
  transition:transform .12s ease,background .16s ease,opacity .16s ease;cursor:pointer;border:none}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2a2a2a}
.btn-primary:disabled{background:rgba(13,13,13,.2);cursor:not-allowed}
.btn-accent{background:var(--cta);color:#fff}
.btn-accent:hover{background:#6A81E0}
/* 押せないときは白抜きだと読めない。青系のグレー地に濃い文字を置いて、
   ラベルが読めて、かつ有効時（青地に白）と取り違えない見た目にする */
.btn-accent:disabled{background:#D6DEEA;color:#4A5260;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{height:38px;padding:0 18px;font-size:13.5px}
/* ボタンの下に注記が付くので、行の頭で揃える */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.cta-unit{display:flex;flex-direction:column;align-items:center;gap:9px}
/* 赤は必須マークと同じ色。薄いままだと赤が濁って見えるので、少しだけ太くする */
.cta-note{font-size:13px;line-height:1.4;color:var(--req);font-weight:500;letter-spacing:-.01em}

/* ── type ────────────────────────────────────────────────────── */
.display{font-size:64px;line-height:1.06;letter-spacing:-.032em;font-weight:500}
.h2{font-size:44px;line-height:1.18;letter-spacing:-.03em;font-weight:500}
.h3{font-size:19px;line-height:1.4;letter-spacing:-.02em;font-weight:500}
.lead{font-size:17px;line-height:1.8;color:var(--muted);letter-spacing:-.008em}
.small{font-size:13.5px;line-height:1.7;color:var(--muted)}
@media(max-width:860px){.display{font-size:40px}.h2{font-size:30px}.lead{font-size:15.5px}}
@media(max-width:520px){.display{font-size:33px}.h2{font-size:26px}}

/* セクションの頭。中央に寄せて、下に余白をとる。
   .sub は原稿でいうサブ見出し（見出しの下の太字1行） */
.sec-head{text-align:center;max-width:800px;margin:0 auto 56px}
.sec-head .sub{font-size:18px;font-weight:500;letter-spacing:-.022em;margin-top:20px}
.sec-head .lead{margin-top:16px}
@media(max-width:860px){.sec-head{margin-bottom:40px}.sec-head .sub{font-size:16px}}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding:131px 0 100px}
.hero .display{max-width:none;margin:0}
.hero .lead{max-width:500px;margin:22px 0 0;font-size:18px;line-height:1.89}
.hero .btn-row{margin-top:46px;flex-direction:column;align-items:flex-start;gap:8px}
/* メインコピーは上に全幅で置く。その下を2カラム（リード+ボタン / ロックアップ）に */
.hero-top{text-align:left;margin-bottom:14px}
.hero-inner{display:grid;grid-template-columns:1fr 0.78fr;align-items:start;gap:0;margin-bottom:72px}
/* 見出しSVGやロックアップがカラム幅を押し広げてサイドバー下にはみ出さないよう、
   グリッド子を縮められるようにする */
.hero-left,.hero-lockup{min-width:0}
.hero-left{text-align:left}
.hero-left .btn{width:246px;height:56px;font-size:18px;padding:0}
.hero-left .cta-unit{align-items:flex-start}
.hero-title-svg{display:block;width:300px;max-width:100%;height:auto;margin:0 0 22px}
/* ボタンの下に小さく。支給のキャラは黒地のGIFだったので、
   黒を抜いて透過のアニメーションWebPにしてある */
/* 上下に文字を添えた一組。文字の大きさは絵の幅に合わせてあり、
   3行がだいたい同じ幅で積まれるようにしている。
   下のマージンは隣の .facts-h の margin-top（72px / 狭いとき52px）と
   相殺されるので、それより大きい値を書かないと効かない */
/* 文字の大きさは組幅 --lw から出す。狭いときは --lw を変えるだけで
   3行の比率が保たれる（実測して合わせた係数） */
.hero-lockup{--lw:500px;width:var(--lw);max-width:100%;margin:10px auto 0;text-align:center}
/* 絵との間は文字側に持たせる。数値は組幅から出して、縮んでも比率が保たれるようにする */
.hero-lockup .lk-top{font-size:18px;font-weight:700;line-height:1.2;
  letter-spacing:-.03em;margin-bottom:7px}
.hero-lockup .lk-btm{font-size:28px;font-weight:500;line-height:1.15;
  letter-spacing:-.025em;color:var(--muted);margin-top:7px}
.hero-char{display:block}
.hero-char img{width:100%;height:auto}
/* 締めにも同じ絵を小さく。ただし地色がグレーなので、白地に焼いた絵を
   そのまま置くと白い四角が出る。multiply で地に馴染ませる
   （白は完全に透け、絵は地色ぶん 5% ほど沈むだけ） */
.end-char{display:block;width:132px;margin:26px auto 0}
.end-char img{width:100%;height:auto;mix-blend-mode:multiply}
@media(max-width:520px){.end-char{width:112px;margin-top:22px}}
/* 横並びに戻すとき、「最短1分！」がボタンの上にあるぶん青いボタンだけ下がる。
   高さの同じボタン同士なので、下ぞろえにして上下とも揃える */
@media(max-width:860px){.hero{padding:80px 0 80px}.hero-top{text-align:center}.hero-inner{grid-template-columns:1fr;text-align:center;gap:40px;align-items:start}.hero-left{text-align:center}.hero .lead{max-width:none;margin:22px auto 0;font-size:16px}.hero .btn-row{flex-direction:row;justify-content:center;align-items:flex-end;gap:12px;margin-top:32px}.hero-left .btn{width:auto;height:52px;font-size:15px;padding:0 24px}.hero-lockup{--lw:300px;margin:0 auto}}
@media(max-width:520px){.hero-lockup{--lw:220px}.hero-lockup .lk-top{font-size:16px}.hero-lockup .lk-btm{font-size:22px}}
/* 実績。装飾ではなく情報で厚みを出す */
.facts-h{max-width:900px;margin:72px auto 0;padding-top:44px;border-top:1px solid var(--line);
  font-size:16px;font-weight:500;letter-spacing:-.02em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
  max-width:960px;margin:34px auto 0}
.facts .sub{display:inline-block;margin-right:0.5em;}
/* 数字が主役。ラベルはできるだけ引いて、桁の見え方に振る */
.facts b{display:block;font-size:58px;font-weight:500;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
/* 数字のラベル。数字と同じくらい読ませたいので、他の補足文より大きく濃くする */
.facts span{display:block;font-size:14px;color:rgba(13,13,13,.74);margin-top:14px;line-height:1.65}
/* ページ内でいちばん小さい文字。faint(40%)だと 2.67:1 しかないので muted(58%) に上げる */
.facts-note{max-width:960px;margin:24px auto 0;font-size:12px;line-height:1.7;color:var(--muted)}
@media(max-width:1100px){.facts b{font-size:48px}}
@media(max-width:860px){.facts{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .facts-h{margin-top:52px}.facts b{font-size:44px}}
@media(max-width:520px){.facts b{font-size:36px}}

/* ── 2カラム（図版＋本文） ───────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:960px;margin:0 auto 72px}
.duo:last-child{margin-bottom:0}
.duo figure{border-radius:var(--card);overflow:hidden;background:var(--band)}
.duo figure img{width:100%}
/* 正方形の絵は、隣の動画サムネ（745×412）と同じ比率に切って高さを揃える */
.duo figure.crop{aspect-ratio:745/412}
.duo figure.crop img{height:100%;object-fit:cover}
.duo .h3{margin-bottom:12px}
.duo p{font-size:15px;line-height:1.85;color:var(--muted)}
.play:hover img{opacity:.92}
/* YouTube ファサード：クリックでその場に埋め込み再生 */
.ytfacade{position:relative;aspect-ratio:16/9;background:#000}
.ytfacade .play{display:block;width:100%;height:100%}
.ytfacade img{width:100%;height:100%;object-fit:cover}
.ytfacade iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:820px){.duo{grid-template-columns:1fr;gap:22px;margin-bottom:52px}}

/* ── カード ──────────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cell{border:1px solid var(--line);border-radius:var(--card);padding:28px;background:#fff}
.grey .cell{background:#fff;border-color:transparent}
.cell h4{font-size:17px;font-weight:500;letter-spacing:-.02em;margin-bottom:10px;line-height:1.55}
.cell p{font-size:14.5px;line-height:1.8;color:var(--muted)}
/* アイコンは「セキュリティワークフロー全体に対応」に合わせ、
   囲みタイルを付けず線画だけをカードの左上に置く */
.cell .ic{color:var(--ink);margin-bottom:20px}
/* 番号は「チームの作業環境を問わない Codex Security」の ❶❷❸ に合わせる */
.cell .num{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:0;
  margin-bottom:18px;font-variant-numeric:tabular-nums}
.cell ul{list-style:none;font-size:14.5px;line-height:2;color:var(--muted);margin-top:12px}
/* 「こんなシステムにおすすめ」だけ、カードの頭に支給素材の帯を置く。
   3枚とも青系で揃える。色を変えると③だけ別カテゴリに見えて、
   並列に3つ並べているという関係が崩れる */
.cell.band{padding:0;overflow:hidden}
.cell.band figure{aspect-ratio:16/7;overflow:hidden;background:var(--band)}
.cell.band figure img{width:100%;height:100%;object-fit:cover}
.cell.band .body{padding:24px 28px 28px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}

/* ── 2サービス（原稿のフロー図を、囲みとテキストで組み直したもの） ── */
/* 中身の量が違う2枚なので、align-items は既定の stretch にして高さを揃える */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.svc{border:1px solid var(--line);border-radius:var(--card);background:#fff;overflow:hidden}
.svc-hd{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line)}
/* 中のアイコンを48pxにするので、丸もそれに合わせて広げる */
.svc-hd .ic{width:80px;height:80px;border-radius:50%;background:var(--surface2);color:var(--ink);
  display:grid;place-items:center;flex:none}
.svc-hd h3{font-size:19px;font-weight:500;letter-spacing:-.024em;line-height:1.4}
.svc-body{padding:26px}
.flowbox{background:var(--surface);border-radius:10px;padding:18px 20px;text-align:center;
  font-size:15px;font-weight:500;line-height:1.6;letter-spacing:-.015em}
.flowarrow{display:grid;place-items:center;padding:9px 0;color:rgba(13,13,13,.2)}
.svc-note{margin-top:22px;font-size:13px;line-height:1.85;color:var(--muted)}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ── 業界別ケース ────────────────────────────────────────────── */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* 業種アイコン ＋ 名称 ＋ 右端の矢羽根。押せるものだと分かる形にする */
.case{background:var(--band);border-radius:var(--card);padding:22px 22px;font-size:15px;
  display:flex;align-items:center;gap:14px;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.case:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(13,13,13,.08);background:#fff}
.case .ic{flex:none;color:var(--ink);display:grid;place-items:center}
.case .lbl{flex:1;font-weight:500;letter-spacing:-.018em;line-height:1.5}
.case .chev{flex:none;color:var(--muted);transition:transform .14s ease,color .14s ease}
.case:hover .chev{transform:translateX(3px);color:var(--ink)}
@media(max-width:860px){.cases{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cases{grid-template-columns:1fr}}

/* ── 成果物 ──────────────────────────────────────────────────── */
.report{border-radius:var(--card);padding:44px;background:var(--band);text-align:center}
/* 中身を読ませる絵ではなく「レポートが出る」ことを示す絵なので、小さく置く */
.report img{margin:0 auto;border-radius:6px;width:100%;max-width:500px}
.contents{border:1px solid var(--line);border-radius:var(--card);padding:30px 34px 32px;margin-top:16px}
.contents h4{font-size:15.5px;font-weight:500;letter-spacing:-.02em;margin-bottom:18px;text-align:center}
.contents ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 34px;list-style:none;font-size:14.5px;line-height:1.7}
.contents li{position:relative;padding-left:16px;color:var(--muted)}
.contents li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
@media(max-width:640px){.contents ul{grid-template-columns:1fr}}

/* ── steps ───────────────────────────────────────────────────── */
.steps{counter-reset:s;max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.step{display:flex;gap:30px;padding:26px 0;border-bottom:1px solid var(--line);align-items:flex-start}
/* 番号は「こんなシステムにおすすめ」と同じ、黒丸に白抜き */
.step::before{counter-increment:s;content:counter(s);
  flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:0;
  margin-top:5px;font-variant-numeric:tabular-nums}
.step-b h4{font-size:18px;font-weight:500;letter-spacing:-.022em;margin-bottom:6px}
.step-b p{font-size:14.5px;line-height:1.8;color:var(--muted)}
@media(max-width:640px){.step{gap:18px}}

/* ── FAQ（＋／− のアコーディオン） ──────────────────────────── */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:17px;font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;
  background:var(--muted);transition:transform .22s ease,opacity .22s ease}
.faq summary::before{width:15px;height:1.5px;margin-top:-.75px}
.faq summary::after{width:1.5px;height:15px;margin-top:-7.5px;right:12.75px}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0}
.faq p{padding:0 44px 26px 0;font-size:15px;line-height:1.95;color:var(--muted)}

/* ── 申込フォーム（右固定パネル） ────────────────────────────
   Figma（33:16）の実測に合わせる。
   幅338 / 上端から / 地色 #F6FBFF / 必須バッジは黒 /
   入力欄は白＋薄い枠 / 「次へ」は青の角丸ボタン。          */
.fp{position:fixed;top:0;right:0;width:var(--formw);height:100vh;
  overflow-y:auto;z-index:45;overscroll-behavior:contain;
  /* 斜めのストライプ＋粒子。画像は使わず、繰り返しグラデーションと
     SVGのfeTurbulenceで描く。粒子は overlay で重ねているので、
     明るい面では白く、青い帯の上では暗く出る（見本と同じ出方） */
  --st-a:#FAFCFE; --st-b:var(--panel-blue); --st-w:62px;
  background-color:var(--st-a);
  background-image:
    url("../images/noise.svg"),
    repeating-linear-gradient(119deg,
      var(--st-b) 0 calc(var(--st-w)*.38),
      var(--st-a) calc(var(--st-w)*.38) var(--st-w));
  background-size:160px 160px, auto;
  background-blend-mode:overlay, normal;
  padding:12px}
/* 縞地の上に半透明白のカードを重ねて、縞だけの印象をやわらげる */
.fp-inner{background:rgba(255,255,255,.5);border-radius:8px;padding:12px;min-height:calc(100vh - 24px)}
.fp-banner{position:relative;text-align:center;background:var(--accent-weak);
  border-radius:8px;padding:20px 16px;margin:12px 0 26px}
/* CTAの「最短1分！」と同じ赤。フォームの頭でも同じことを言っている */
.fp-banner span{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--req)}
.fp-banner b{display:block;font-size:20px;font-weight:700;letter-spacing:-.024em;margin:0}
.fld{margin-bottom:19px}
/* ラベルは Medium。和文は Regular / Medium / Bold の3ウェイトなので、
   500 は合成ではなく実体のあるウェイトが当たる */
.fld label{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:500;margin-bottom:8px}
/* 必須は赤いアスタリスク。字面が上に寄るので少し下げて行に揃える */
.req{color:var(--req);font-size:16px;font-weight:700;line-height:1;letter-spacing:0;
  position:relative;top:2px}
.fld input,.fld select,.fld textarea{width:100%;background:#fff;border:1px solid #D3D7DC;
  border-radius:6px;padding:11px 13px;font-size:14px;line-height:1.5;outline:none;
  transition:border-color .14s ease,box-shadow .14s ease}
.fld input::placeholder,.fld textarea::placeholder{color:#8C9198}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 2px rgba(13,13,13,.08)}
.fld textarea{min-height:104px;resize:vertical}
.fld textarea[name=addr]{min-height:64px}
.fld .two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fld .hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.65}
.fp-actions{display:flex;gap:8px;margin-top:26px;justify-content:center}
/* Figmaの「次へ」はピルではなく角丸の長方形。ここだけ形を変える */
.fp-actions .btn{height:42px;padding:0 20px;font-size:15px;font-weight:700;min-width:120px;
  border-radius:var(--r)}
.fp-actions .back{min-width:84px}
.agree{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid #D3D7DC;
  border-radius:6px;padding:12px 13px;font-size:12px;line-height:1.7;margin-top:14px}
.agree input{margin-top:3px;flex:none;accent-color:var(--ink);width:15px;height:15px}
.privacy{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px}
.privacy a{color:var(--ink);text-decoration:underline}
/* ステップ表示。番号の丸を線でつなぎ、進んだぶんだけ線を黒く塗る。
   パネル幅が狭いので、ラベルは2行に折り返る前提で高さを確保する */
/* 「お問い合わせ内容」を1行に収めたいので、パネルの左右余白ぶん外へ広げて
   1列あたりの幅を稼ぐ（284px → 322px）。ラベルは字間を詰めて折り返さない */
.steps-bar{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;
  margin:72px -19px 0;position:relative;--step:1}
.steps-bar::before,.steps-bar::after{content:"";position:absolute;top:13px;height:2px}
.steps-bar::before{left:12.5%;right:12.5%;background:rgba(13,13,13,.14)}
.steps-bar::after{left:12.5%;width:calc((var(--step) - 1) * 25%);
  background:var(--ink);transition:width .3s ease}
.stp{position:relative;text-align:center}
.stp i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  margin:0 auto;background:#DEE0E4;color:rgba(13,13,13,.62);
  font-size:13px;font-weight:700;font-style:normal;line-height:1;
  position:relative;z-index:1;transition:background .2s ease,color .2s ease}
.stp span{display:block;margin-top:9px;font-size:11.5px;line-height:1.4;
  white-space:nowrap;color:var(--muted);letter-spacing:-.05em}
.stp.done i{background:var(--ink);color:#fff}
.stp.on i{background:var(--ink);color:#fff}
.stp.on span{color:var(--ink);font-weight:700}
.fp-done{text-align:center;padding:20px 0}
/* チェックは文字（✓）だと端末のフォント任せで細さも位置も揃わない。
   線で描いて、太さと大きさをこちらで決める */
.fp-done .tick{width:56px;height:56px;border-radius:50%;background:var(--cta);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px}
.fp-done .tick svg{width:27px;height:27px}
.fp-done b{display:block;font-size:16px;font-weight:700;margin-bottom:8px}
.fp-done p{font-size:13px;color:var(--muted);line-height:1.8}

/* SPは追従フォームなし。フォームはページ最下部に通常フローで表示し、
   CTAはそこへスクロールさせる（LP内フォームをSPでも機能させる） */
@media(max-width:800px){
  :root{--formw:0px}
  main{margin-right:0}
  .fp{position:static;width:100%;height:auto;overflow:visible;z-index:auto;padding:0}
  .fp-inner{min-height:0;background:transparent;border-radius:0;padding:24px 20px}
}

/* ── footer ──────────────────────────────────────────────────── */
/* フッターは main の外なので、右のフォームぶんの余白を自分で持つ */
.ft{background:#000;color:rgba(255,255,255,.72);padding:40px 0 30px;
    margin-right:var(--formw)}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font-size:12.5px}
.ft-logo{margin-bottom:24px}
.ft-logo img{height:20px;width:auto}
.ft a:hover{color:#fff}
.ft .cp{margin-left:auto;color:rgba(255,255,255,.48)}
@media(max-width:640px){.ft-in{padding:0 22px}}

/* ── 見出しのドットアニメーション（sb-oai.co.jp の dotFuwaFuwa） ── */
@keyframes dotFuwaFuwa{
  0%{transform:translate(-50%,-50%) scale(1)}
  25%{transform:translate(-50%,-50%) scale(1.18)}
  50%{transform:translate(-50%,-50%) scale(.9)}
  75%{transform:translate(-50%,-50%) scale(1.07)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.dcwrap{position:relative}
.dc{display:inline-block;white-space:pre}
.dc>.ch{opacity:0}
.dc.on>.ch{opacity:1}
.caret{position:absolute;width:.66em;height:.66em;border-radius:50%;background:currentColor;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  animation:dotFuwaFuwa 1s ease-in-out infinite;transition:opacity .16s ease}
.caret.on{opacity:1}
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .dc>.ch{opacity:1}.caret{display:none}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   merged from alt.css (index-b / A type design)  2026-09-01
   ============================================================ */
/* ============================================================
   index-b.html 専用スタイル（Figma 別案）
   対象：成果物サンプル／導入までの流れ の2セクションのみ。
   style.css の :root 変数を利用しつつ .alt- にスコープする。
   ============================================================ */

.alt-sec{background:#fff}
.alt-sec .sec-head{text-align:center}

/* 共通カード（薄グレーの角丸） */
.alt-card{background:var(--band);border-radius:8px;
  padding:clamp(22px,3.2vw,44px)}
.alt-seikabutu .alt-card{padding-top:clamp(18px,2.4vw,32px);
  padding-bottom:clamp(18px,2.4vw,32px)}

/* ---- 成果物サンプル ---- */
.alt-report{background:url("../images/seikabutu-bg.png") center/cover no-repeat;
  border-radius:8px;width:100%;
  padding:clamp(28px,3.6vw,48px) clamp(24px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden}
.alt-report__label{color:#fff;text-align:center;font-weight:700;
  font-size:clamp(18px,2.2vw,24px);line-height:1.5;letter-spacing:.01em;flex:1}
.alt-report__label span{display:block;font-size:.7em;font-weight:500;opacity:.9;margin-top:4px}
.alt-report__img{flex:0 0 auto;width:clamp(240px,40%,340px);height:auto;display:block;border-radius:8px}
@media(max-width:1100px){
  .alt-report{flex-direction:column;text-align:center;gap:18px;padding:28px 20px}
  .alt-report__label{text-align:center}
  .alt-report__img{width:min(340px,86%)}
}

.alt-card__title{text-align:center;font-size:15.5px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin:26px 0 18px}

.alt-checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:0 40px}
.alt-checklist li{position:relative;padding:13px 6px 13px 36px;
  border-bottom:1px dashed rgba(13,13,13,.22);
  font-size:14.5px;line-height:1.7;color:var(--ink)}
.alt-checklist li::before{content:"";position:absolute;left:0;top:14px;
  width:22px;height:22px;
  background:url("../images/checkmark.svg") no-repeat center/contain}
.alt-checklist li .note{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* ---- 導入までの流れ ---- */
.alt-flow .alt-card{padding:clamp(22px,3vw,40px) clamp(20px,4vw,64px)}
.alt-steps{list-style:none;max-width:820px;margin:0 auto}
.alt-step{display:grid;grid-template-columns:108px 1fr;gap:28px;
  align-items:start;padding-bottom:76px;position:relative}
.alt-step:last-child{padding-bottom:0}
.alt-step__icon{position:relative;width:108px;height:108px}
.alt-step__icon img{width:108px;height:108px;display:block}
/* ステップ間の下向き矢印（アイコン列の中央下・支給 arrow-down.svg） */
.alt-step:not(:last-child) .alt-step__icon::after{content:"";
  position:absolute;left:50%;top:116px;transform:translateX(-50%);
  width:38px;height:44px;opacity:.55;
  background:url("../images/flow/arrow-down.svg") no-repeat center/contain}
.alt-step__body{padding-top:22px}
.alt-step__body h4{font-size:18px;font-weight:500;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:6px}
.alt-step__body p{font-size:14.5px;line-height:1.8;color:var(--muted)}
.alt-flow .alt-note{max-width:760px;margin:18px auto 0;text-align:right;
  font-size:12px;line-height:1.7;color:var(--muted)}

@media(max-width:640px){
  .alt-checklist{grid-template-columns:1fr;gap:0}
  .alt-step{grid-template-columns:72px 1fr;gap:18px;padding-bottom:56px}
  .alt-step__icon{width:72px;height:72px}
  .alt-step__icon img{width:72px;height:72px}
  .alt-step__body{padding-top:8px}
  .alt-step:not(:last-child) .alt-step__icon::after{top:80px;width:28px;height:32px}
}

/* ============================================================
   0901 デザイン改修（index-b 専用の追加分）
   ============================================================ */

/* --- 実績 facts：!アイコン＋数字下の区切り線 --- */
.facts-h-b{display:flex;align-items:center;gap:8px}
.facts-ic{width:22px;height:22px;flex:0 0 auto;display:inline-block}
.facts-b > div > span{display:block;border-top:1px solid var(--line);margin-top:16px;padding-top:12px}

/* --- Patching as a Service タイトル拡大 --- */
.h2-xl{font-size:clamp(40px,6vw,64px);line-height:1.14}

/* --- SB OAI Japan：本文左寄せ＋背景画像 --- */
.sboai-body{position:relative;max-width:900px;margin:14px auto 0;text-align:left;
  background:url("../images/bg-sboai.png") no-repeat bottom center;background-size:contain;
  padding-bottom:clamp(20px,3.5vw,60px)}
.sboai-body p{font-size:16px;line-height:1.95;color:rgba(13,13,13,.74);letter-spacing:-.006em}
.sboai-tagline{margin-top:22px}
@media(max-width:760px){.sboai-body{background-size:150%;padding-bottom:44px}}

/* --- 選ばれる理由：画像3枚横並び（SPで縦） --- */
.reasons{display:flex;justify-content:center;align-items:flex-start;max-width:1040px;margin:0 auto}
.reason{position:relative;width:34%;max-width:360px;aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(13,13,13,.32);background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 clamp(14px,2vw,34px)}
.reason + .reason{margin-left:-34px}
.reason__no{font-size:clamp(28px,2.8vw,44px);font-weight:800;letter-spacing:.02em;line-height:1;margin-bottom:12px;position:relative;top:-22px;color:#7A96FC}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .reason__no{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.reason__hd{font-size:clamp(14px,1.4vw,19px);font-weight:700;line-height:1.5;margin-bottom:12px}
.reason__desc{font-size:clamp(11px,1vw,13.5px);color:var(--muted);line-height:1.8}
/* スクロールで薄いブルーのマーカーを左→右に引く（見出し＝リード文） */
.reason__desc .mark{background-image:linear-gradient(transparent 58%,var(--accent-line) 58%);
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.4s ease}
.reasons.in .reason:nth-child(1) .mark{background-size:100% 100%;transition-delay:.35s}
.reasons.in .reason:nth-child(2) .mark{background-size:100% 100%;transition-delay:.95s}
.reasons.in .reason:nth-child(3) .mark{background-size:100% 100%;transition-delay:1.55s}
@media(prefers-reduced-motion:reduce){.reason__desc .mark{transition:none;background-size:100% 100%}}
@media(max-width:1100px){
  .reasons{flex-direction:column;align-items:center;max-width:340px}
  .reason{width:88%}
  .reason + .reason{margin-left:0;margin-top:-18px}
}

/* --- 業界別／提供サービス：支給アイコン（img）サイズ --- */
.case .ic img{width:32px;height:32px;object-fit:contain;display:block}
.svc-hd .ic{width:auto;height:auto;background:none;border-radius:0}
.svc-hd .ic img{width:40px;height:40px;object-fit:contain;display:block}

/* --- こんなシステムにおすすめ：カード再設計 --- */
.sysgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.syscard{background:#fff;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;padding-bottom:22px;
  box-shadow:0 1px 2px rgba(13,13,13,.04)}
.syscard__title{font-size:15px;font-weight:700;color:var(--ink);text-align:center;
  padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.syscard__img{background:var(--band);margin:16px 16px 0;border-radius:8px;
  padding:14px;display:flex;justify-content:center}
.syscard__img img{width:100%;max-width:220px;height:auto;display:block}
.syscard__list{list-style:none;margin:16px 18px 0;font-size:14px;line-height:1.95;color:var(--ink)}
.syscard__reason{margin:18px 18px 0;text-align:center}
.syscard__rlabel{display:inline-block;position:relative;font-size:12px;color:var(--muted);margin-bottom:8px;padding:0 40px}
.syscard__rlabel::before,.syscard__rlabel::after{content:"";position:absolute;top:50%;width:28px;height:1px;background:var(--line)}
.syscard__rlabel::before{left:0}
.syscard__rlabel::after{right:0}
.syscard__reason p{font-size:13px;line-height:1.8;color:var(--muted)}
@media(max-width:760px){.sysgrid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* --- 実施までの流れ：リード文 --- */
.flow-lead{text-align:center;max-width:680px;margin:0 auto 34px;
  font-size:15px;line-height:1.95;color:var(--muted)}
.flow-lead b{color:var(--ink);font-weight:700}

/* facts：約40% の % を小さく */
.facts-b .pct{display:inline;font-size:.6em;font-weight:inherit;margin:0 0 0 1px;color:#000}
/* 「約」は inline-block だとこのセルだけ行が高くなり、下線が他3つより下がる。
   inline＋baseline にして高さの膨らみを消し、小さめの前置き文字にする */
.facts-b .sub{display:inline;font-size:.5em;font-weight:inherit;vertical-align:baseline;letter-spacing:0;margin:0 .12em 0 0;color:#000}
/* 実績の数字をグラデ文字に（約・% は黒のまま） */
.facts-b b{color:#7A96FC}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  .facts-b b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .facts-b .sub,.facts-b .pct{-webkit-text-fill-color:#000}
}

/* Patching：見出しを動画/画像の上に、本文は左寄せ */
.duo-wrap{max-width:960px;margin:0 auto 72px}
.duo-wrap:last-child{margin-bottom:0}
.duo-wrap .h3{text-align:left;margin-bottom:20px}
.duo-wrap .duo{margin:0 auto}
.duo-wrap p{text-align:left}
@media(max-width:820px){.duo-wrap{margin-bottom:52px}}

/* 業界別ケース：枠内でアイコン＋ラベルを中央寄せ（chevは右端固定） */
.cases .case{justify-content:center;position:relative;padding-left:40px;padding-right:40px}
.cases .case .lbl{flex:0 1 auto;text-align:center}
.cases .case .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.cases .case:hover .chev{transform:translateY(-50%) translateX(3px)}

/* 提供サービス：診断名を太字に */
.svc-hd h3{font-weight:700}

/* 実施までの流れ：ステップ群を中央寄りに */
.alt-flow .alt-steps{max-width:600px}

/* 背景色：白／グレーの指定 */
#about{background:#fff}          /* Patchingセクション 白 */
#why{background:#fff}            /* 選ばれる理由 白 */
.usecase-sec{background:#fff}    /* こんなシステム 白 */
.faq-sec{background:#fff}        /* よくあるご質問 白 */
.alt-flow{background:var(--band)}    /* 実施までの流れ 全体グレー */
/* 「かんたん3ステップ！」：見出し右の大きな丸（3を強調） */
.alt-flow .wrap{position:relative}
.flow-head-row{display:flex;align-items:center;justify-content:center;gap:20px}
.flow-circle{flex:0 0 auto;z-index:2;
  width:120px;height:120px;border-radius:50%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1}
.flow-circle .fc-top{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.flow-circle .fc-main{display:flex;align-items:baseline;gap:1px;color:var(--accent);font-weight:800}
.flow-circle .fc-main b{font-size:40px;font-weight:800;letter-spacing:-.02em}
.flow-circle .fc-main em{font-size:16px;font-style:normal;font-weight:700}
@media(max-width:860px){
  .flow-head-row{display:block}
  .flow-circle{position:absolute;top:-100px;right:20px;width:92px;height:92px}
  .flow-circle .fc-top{font-size:12px;margin-bottom:2px}
  .flow-circle .fc-main b{font-size:30px}
  .flow-circle .fc-main em{font-size:13px}
}
.alt-flow .alt-card{background:transparent}
.alt-flow .sec-head{margin-bottom:20px}

/* Patching：本文を画像と上揃えに */
.duo-wrap .duo{align-items:start}

/* facts：約40% を折り返さない＆下線を4つで揃える。
   数字ブロックを font-size ぶん(1em)の固定高にし、中身をベースライン揃えで置く。
   高さを明示することで、カンマや小書き文字(約/%)による行ボックスの伸びに影響されず、
   直後のラベル（上罫線）が必ず同じ位置から始まる */
.facts-b > div b{white-space:nowrap;display:flex;align-items:baseline;
  justify-content:center;height:1em;line-height:1}

/* 提供サービス：ブラックボックス診断アイコンを一回り大きく */
.two .svc:nth-child(2) .svc-hd .ic img{width:48px;height:48px}

/* 成果物：チェックリスト上マージンを拡大 */
.alt-checklist{margin-top:30px}

/* こんなシステム：白背景でもカードが分かるよう境界を付与 */
.syscard{border:1px solid var(--line)}

/* PaaS画像は幅に応じて縮小（最大320px・原寸より拡大しない） */
.hero-char img{width:clamp(170px,23vw,320px);max-width:100%;margin:0 auto}

/* 締め：PaaS画像を320pxで表示（FVと統一） */
.end-char{width:240px;max-width:100%}

/* --- 提供サービス：比較表（PC通常／スマホ横スクロール） --- */
.cmp-wrap{margin-top:56px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* border-collapse だと角丸が途切れるため、separate+border-spacing:0 で
   外周は表(左・上)、内側はセル(右・下)に線を引き、四隅のセルだけ角丸にする */
.cmp{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;
  font-size:14px;line-height:1.7;background:#fff;
  border-radius:8px;border-top:1px solid #B9D0E6;border-left:1px solid #B9D0E6}
.cmp th,.cmp td{border:none;border-right:1px solid #B9D0E6;border-bottom:1px solid #B9D0E6;
  padding:14px 16px;vertical-align:middle;text-align:left}
.cmp thead tr:first-child>*:first-child{border-radius:8px 0 0 0}
.cmp thead tr:first-child>*:last-child{border-radius:0 8px 0 0}
.cmp tbody tr:last-child>*:first-child{border-radius:0 0 0 8px}
.cmp tbody tr:last-child>*:last-child{border-radius:0 0 8px 0}
.cmp tr{height:100px}
.cmp thead th{text-align:center;font-weight:700;background:#fff;color:var(--ink)}
.cmp th.cmp-paas{background:#7893FF;color:#fff}
.cmp .cmp-corner{background:#fff;border-color:#B9D0E6}
.cmp tbody th{font-weight:700;color:var(--ink);white-space:normal;
  width:200px;background:#fff}
.cmp .cmp-old{color:var(--muted)}
.cmp .cmp-new{font-weight:700;color:var(--ink)}
.cmp tr.row-paas td{background:var(--cta);color:#fff}
.cmp-wrap:focus{outline:2px solid var(--accent-line);outline-offset:2px}
@media(max-width:640px){
  .cmp-wrap{overflow-x:visible}
  .cmp{font-size:11px;min-width:0;width:100%}
  .cmp th,.cmp td{padding:8px 6px}
  .cmp tbody th{width:74px}
  .cmp tr{height:auto}
  .cmp .cmp-hd{font-size:12px;gap:4px}
  .cmp .cmp-hd img{width:14px;height:14px}
  .cmp th.cmp-paas .paas-abbr{font-size:16px}
  .cmp th.cmp-paas .paas-full{font-size:9.5px}
}

/* --- 角丸を8pxに統一（ボタン=pill・円形アイコンは除く） --- */
:root{--card:8px}          /* .svc/.cell/.contents/.case/.report/.duo figure 等を8pxに */
.flowbox{border-radius:8px}

/* --- 比較表：微調整 --- */
.cmp tbody th{vertical-align:middle}        /* 診断名を上下中央に */
.cmp th.cmp-paas{font-size:16px}            /* サービス名の表頭を大きく */
/* 列見出し：提供サービスと同じアイコンを名前の前に */
.cmp-hd{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:700}
.cmp-ic{flex:0 0 auto;display:block}
/* PaaSセル：略称を大きく強調＋正式名を下に */
.cmp th.cmp-paas .paas-abbr{display:block;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:.02em}
.cmp th.cmp-paas .paas-full{display:block;font-size:11.5px;font-weight:600;line-height:1.35;margin-top:3px;opacity:.92}

/* ヘッダーCTA：スマホは短い文言に切替 */
.hd .cta-short{display:none}
@media(max-width:1100px){
  .hd .cta-full{display:none}
  .hd .cta-short{display:inline}
}

/* 白背景セクションの見出し上の余白を詰める（実施までの流れ以降は対象外） */
#about,.sboai-sec,#why,.cases-sec,.usecase-sec,#service,.alt-seikabutu{padding-top:56px}
@media(max-width:860px){
  #about,.sboai-sec,#why,.cases-sec,.usecase-sec,#service,.alt-seikabutu{padding-top:40px}
}

/* FV：見出しSVGを大きく（PC 440px） */
/* メインコピーは上に全幅で置くので常に540pxで大きく（狭い端末のみ100%で頭打ち） */
.hero-title-svg{width:540px}

/* ── CTA上の白フキダシ「最短1分で完了！」 ────────────────── */
.cta-bubble{position:relative;display:inline-block;background:#fff;
  border:1.5px solid var(--accent);color:var(--req);
  font-size:11px;font-weight:500;line-height:1;letter-spacing:-.01em;
  padding:7px 14px;border-radius:var(--pill);margin-bottom:13px}
.cta-bubble::before,.cta-bubble::after{content:"";position:absolute;left:50%;
  transform:translateX(-50%);width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent}
.cta-bubble::before{bottom:-10px;border-top:10px solid var(--accent)}
.cta-bubble::after{bottom:-7px;border-top:8px solid #fff}
/* 締めボタンをFVの青ボタンと同じくらい大きく */
.cta-lg{height:64px;font-size:20px;padding:0 120px}
@media(max-width:520px){.cta-lg{padding:0 40px;font-size:18px}}
/* 締めエリアのフキダシだけ字を大きく */
#footerpaas .cta-bubble{font-size:14px}

/* サイドバーの申込フォーム見出しをフキダシ化 */
.fp-banner span{display:inline-block;position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:#fff;border:1.5px solid var(--accent);color:var(--req);
  font-size:11px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  padding:7px 14px;border-radius:var(--pill);margin:0}
.fp-banner span::before,.fp-banner span::after{content:"";position:absolute;left:50%;
  transform:translateX(-50%);width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent}
.fp-banner span::before{bottom:-9px;border-top:9px solid var(--accent)}
.fp-banner span::after{bottom:-6px;border-top:7px solid #fff}

/* FV・締め：フキダシをボタンに重ねる（単に上下に並べない） */
.cta-unit{gap:0}
.cta-unit .cta-bubble{margin-bottom:-5px;z-index:2}
/* フォームの「戻る」：白塗り＋左右コンパクト */
.fp-actions .back{background:#fff;min-width:auto;padding:0 14px}

/* 締め：PaaS画像の下に「Patching as a Service」（FVの lk-btm と同じ体裁） */
.end-cap{font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-.025em;
  color:var(--muted);margin-top:7px;text-align:center}
@media(max-width:520px){.end-cap{font-size:22px}}

/* フッター：ページ上部へ戻る（黒い■＋白↑） */
.to-top{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:#000;border:1px solid rgba(255,255,255,.4);
  border-radius:6px;color:#fff;transition:background .16s ease}
.to-top:hover{background:#222}

/* フォーカス中の合図：テキスト入力欄の背景を淡い黄色に（select等は対象外） */
/* テキスト入力のフォーカス時は薄黄色で強調（常時） */
.fld input:focus,.fld textarea:focus,.fld select:focus{background:#FFF8D6}
/* 揺れはCTAボタン押下で自動フォーカスした時だけ（JSが .wob を付与） */
.fld .wob{animation:fldWobble .42s ease}
@keyframes fldWobble{0%,100%{transform:translateX(0)}18%{transform:translateX(-4px)}38%{transform:translateX(4px)}58%{transform:translateX(-3px)}78%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.fld .wob{animation:none}}

/* フォーム送信時のエラーメッセージ（reCAPTCHA未完了など） */
.fp-error{color:var(--req);font-size:12.5px;line-height:1.6;margin-top:10px;text-align:center}

/* ── 業界別リスク（事例カード） ─────────────────────────────── */
.ind-list{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ind{background:#fff;border:1px solid var(--line);border-radius:var(--card);overflow:hidden;display:grid;grid-template-columns:150px 1fr}
.ind__img{margin:0;align-self:stretch;background:var(--panel-blue);overflow:hidden}
.ind__img img{width:100%;height:100%;object-fit:cover;display:block}
.ind__body{padding:20px 20px}
.ind__ttl{display:flex;align-items:baseline;gap:11px;margin:0 0 12px}
.ind__ttl strong{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.ind__body p{font-size:12.5px;line-height:1.85;color:var(--ink);margin:0}
.ind__risks{margin-top:18px;background:var(--surface);border-radius:var(--r);padding:16px 18px}
.ind__body .ind__rlabel{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent);margin:0 0 10px}
.ind__rlabel svg{flex:none;width:18px;height:18px}
.ind__risks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ind__risks li{font-size:11.5px;line-height:1.6;color:var(--ink);padding-left:14px;position:relative}
.ind__risks li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--accent)}
@media(max-width:960px){
  .ind-list{grid-template-columns:1fr;max-width:840px}
}
@media(max-width:560px){
  .ind{grid-template-columns:1fr}
  .ind__img{aspect-ratio:auto;width:100%;height:130px;max-height:none}
  .ind__body{padding:22px 20px}
  .ind__body .ind__ttl strong{font-size:16px}
}