/* =========================================================
   Cynet LP  ―  トンマナ：wireframe/tone-manner.html パターンB
   （Cynetブランドブルー基調）の配色値を適用。
   ダーク（Navy）はCTA帯・フッターなど要所のみに使用（パターンAの実サイト検証に準拠）。
   図版（画像）は元データの色のまま変更しない
   ========================================================= */

:root{
  --paper:#FFFFFF;        /* page base */
  --paper-alt:#F4F6F9;    /* section alt（ブルー寄りの淡いグレー） */
  --paper-alt-2:#EDF1F6;  /* section alt（濃いめ） */
  --card:#FFFFFF;
  --card-alt:#F6F8FB;
  --accent:#006AFF;       /* Cynet Blue（主要アクセント） */
  --accent-soft:#2F86FF;  /* hover用 */
  --cyan:#3FD0E8;         /* Cyan Glow（差し色） */
  --pink:#E8447A;         /* Accent Pink（CTA限定） */
  --yellow:#FFE45F;       /* ポイント用（メニューアイコン差し色） */
  --navy:#0C1526;         /* Base Navy（CTA帯・フッター等ダーク要所） */
  --navy-2:#0F1F38;       /* ダークグラデーション相方 */
  --gray-mid:#6B7280;     /* ラベル等の中間グレー */
  --gray-alt:#6B7280;     /* 区別用グレー */
  --ink:#14213D;          /* 本文・見出し（ネイビー系） */
  --ink-sub:#5B6472;      /* 白カード上のサブテキスト */
  --white:#FFFFFF;
  --muted:#6B7280;        /* 補足テキスト */
  --muted-2:#83858B;      /* さらに控えめなテキスト */
  --on-dark:#FFFFFF;      /* ダーク背景上の本文 */
  --on-dark-muted:#9AA4B8;/* ダーク背景上の補足テキスト */
  --line:rgba(20,33,61,.14);
  --line-soft:rgba(20,33,61,.08);
  --radius:20px;
  --radius-sm:12px;
  --maxw:1160px;
  --header-maxw:1200px;  /* ヘッダーメニュー幅（参照：suzuki.co.jp/car/swift 実測） */
  --nav-bg:rgba(247,248,250,.88); /* ヘッダーバー背景（スクロール時） */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* 図版・画像は元データの色をそのまま使用（フィルターで色を変更しない） */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
small{font-size:12px}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- 共通：セクション ---------- */
.section{position:relative;padding:110px 0}
.section-head{max-width:820px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.wide{max-width:none}
.section-title{
  font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.35;
  letter-spacing:.01em;
}
.section-sub{margin-top:20px;color:var(--muted);font-size:clamp(15px,1.5vw,17px)}
.section-head.center .section-sub{margin-left:auto;margin-right:auto}
.section-sub-emph{font-weight:800;font-size:1.3em;color:#0045A8}

/* 「Cynetのオールインワンセキュリティ」のリード文のみ：860px上限・中央寄せ・ヒーロー概要文と同じ黒・常にopacity1 */
.overview .section-sub{max-width:860px;text-align:center;color:#000;opacity:1}
/* 「他社製品との機能比較」のリード文のみ：860px上限・左寄せテキスト・演出後も薄くならず黒を表示・ブラー演出はオールインワンと同じくopacity常時1 */
.compare-others .section-sub{max-width:860px;text-align:left;color:#000;opacity:1}
/* 親.section-headが820px上限のまま（wide修飾なし）だと子が860pxまで広がれないため、このセクションのみ上限を解除 */
.compare-others .section-head{max-width:860px}
/* 「シンプルな3つのプラン」のリード文：ブラー演出を追加、opacity常時1・黒で表示 */
.pricing .section-sub{opacity:1;color:#000}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 30px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:.02em;
  transition:transform .25s var(--ease),background .25s;
  white-space:nowrap;cursor:pointer;border:none;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-soft)}
/* ヒーローCTA：ヘッダーの .gnav-cta と同仕様（ピンク＋白スライドで反転） */
.btn-cta{position:relative;overflow:hidden;background:var(--pink);border:1.5px solid var(--pink);color:#fff}
.btn-cta::before{content:"";position:absolute;top:0;left:0;bottom:0;width:100%;z-index:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.btn-cta span{position:relative;z-index:1;transition:color .3s}
.btn-cta:hover::before{transform:scaleX(1)}
.btn-cta:hover span{color:var(--pink)}
/* ヒーローの資料ダウンロード（.btn-primary）も同じ白スライド反転に（反転色＝Cynet Blue） */
.hero-actions .btn-primary{position:relative;overflow:hidden}
.hero-actions .btn-primary span{position:relative;z-index:1;transition:color .3s}
.hero-actions .btn-primary::before{content:"";position:absolute;inset:0;z-index:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.hero-actions .btn-primary:hover::before{transform:scaleX(1)}
.hero-actions .btn-primary:hover span{color:var(--accent)}
/* CTA帯の資料ダウンロードボタン：.btn-ghost-light と対になるアクセント色スライド反転 */
.btn-white{position:relative;overflow:hidden;background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-white::before{content:"";position:absolute;inset:0;z-index:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.btn-white span{position:relative;z-index:1;transition:color .3s}
.btn-white:hover::before{transform:scaleX(1)}
.btn-white:hover span{color:#fff}
/* CTAのお問い合わせボタンだけホバー反転色をピンクに */
.btn-white.btn-hover-pink::before{background:var(--pink)}
/* CTA帯の問い合わせボタン：.btn-cta と同じ白スライド反転（反転色＝Base Navy） */
.btn-ghost-light{position:relative;overflow:hidden;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost-light::before{content:"";position:absolute;inset:0;z-index:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.btn-ghost-light span{position:relative;z-index:1;transition:color .3s}
.btn-ghost-light:hover::before{transform:scaleX(1)}
.btn-ghost-light:hover span{color:var(--navy)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--accent)}
.btn-outline:hover{background:rgba(0,0,0,.06)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent; /* ブラウザトップ時は完全透過。スクロールでscrolledが背景を付与 */
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.scrolled{
  background:var(--nav-bg);
  border-bottom-color:var(--line);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.header-inner{
  max-width:var(--header-maxw);margin:0 auto;padding:0 24px;
  height:76px;display:flex;align-items:stretch;justify-content:space-between;
}
/* ▼TEMP: ロゴ拡大演出（クライアント確認中。NGの場合は以下2ルールを削除し、
   コメントアウトしてある元のルールを戻す。対になるJSは js/script.js 内の
   同じ ▼TEMP〜▲TEMP ブロック（ヘッダーロゴ：最上部で拡大表示～）ごと削除する）
   [元のルール]
   .brand{display:flex;align-items:center}
   .brand-logo{height:26px;width:auto}
*/
/* width:104pxはロゴの等倍時の幅（height26px×実測比率872.5:218）。
   brand-logoの絶対配置における containing block になるため明示指定が必要
   （幅0のままだとbrand-logoのmax-width:100%(img{max-width:100%}の全体ルール)が0pxに解決されてしまう） */
.brand{display:flex;align-items:center;position:relative;width:104px}
/* ロゴ：最上部で拡大表示→スクロールで通常サイズへ収縮（田中フーズ www2 の
   header__logo-img 演出を移植）。絶対配置にしてヘッダー高さ・ナビ幅には影響させず、
   transform:scaleのみで見た目を拡縮する（--logo-scale/--logo-topはjs/script.jsが設定） */
.brand-logo{
  /* width:autoは絶対配置化した状態だと効かず0pxになるため固定値を指定
     （cynet_logo_navy.svgはviewBoxのみでwidth/height属性が無く、position:absolute下では
     ブラウザが縦横比から幅を解決できない。104px=height26px×実測比率872.5:218）
     max-width:noneはimg{max-width:100%}の全体ルールを打ち消すため必須 */
  height:26px;width:104px;max-width:none;
  position:absolute;top:var(--logo-top,25px);left:0;
  transform-origin:top left;
  transform:scale(var(--logo-scale,1));
}
/* ▲TEMP */

/* ---- メインアイコンナビ（参照：suzuki.co.jp/car/swift ヘッダー構造） ---- */
.gnav{display:flex;align-items:stretch;height:100%;margin-left:auto}
.gnav-item{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-width:100px;padding:0 16px;height:100%;
  font-size:12px;font-weight:500;color:var(--ink);text-align:center;line-height:1.4;
  border-left:1px solid var(--line);transition:color .2s;
}
.gnav-item::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;
  background:rgba(0,106,255,.08);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.gnav-item:hover::before{transform:translateY(0)}
.gnav-item .gnav-icon,.gnav-item .gnav-label{position:relative;z-index:1}
.gnav-icon{width:26px;height:26px;flex:none;display:block;object-fit:contain}

.gnav-cta{
  position:relative;overflow:hidden;
  align-self:center;margin-left:20px;flex:none;
  height:44px;padding:0 22px;border-radius:999px;
  background:var(--pink);border:1.5px solid var(--pink);
  color:#fff !important;font-weight:700;display:inline-flex;align-items:center;
}
.gnav-cta::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:100%;z-index:0;
  background:#fff;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.gnav-cta span{position:relative;z-index:1;transition:color .3s}
.gnav-cta:hover::before{transform:scaleX(1)}
.gnav-cta:hover span{color:var(--pink)}

.hamburger{align-self:center;display:none;flex-direction:column;gap:5px;background:none;border:none;
  width:44px;height:44px;justify-content:center;align-items:center;cursor:pointer}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;
  display:flex;align-items:center;
  padding:150px 0 90px;
  background:#fff;
}
.hero-liquid{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;touch-action:none}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none}
.hero-glow-a{width:520px;height:520px;background:rgba(0,106,255,.12);top:-120px;right:6%}
.hero-glow-b{width:420px;height:420px;background:rgba(63,208,232,.12);bottom:-140px;left:-60px}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-title{
  font-size:clamp(24px,3.4vw,42px);font-weight:900;line-height:1.3;letter-spacing:.01em;
  margin-bottom:26px;
}
.hero-title .grad{
  background:linear-gradient(100deg,var(--ink) 0%, var(--accent) 55%, var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{color:#000;font-size:clamp(14px,1.5vw,16px);max-width:560px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-visual{position:relative}

/* ヒーロー：左→右クリップ塗りリベール（text-clip-fill-left 移植）。
   同じ文字を2枚重ね、base=薄いゴースト／fill=濃色を clip-path で左から表示する。 */
.cf{position:relative}
/* 中央寄せ見出しは、塗り(clip)が文字と揃うよう文字幅に縮める */
.section-head.center .cf{display:inline-block}
.cf .cf-base{display:block;opacity:.3;color:#006AFF} /* ゴースト＝Cynet Blue系（塗り前） */
.cf .cf-base .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:#006AFF}
.cf .cf-fill{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.cf.is-filled .cf-fill{clip-path:inset(0 0 0 0);transition:clip-path .7s ease-out}
@media(prefers-reduced-motion:reduce){
  .cf .cf-base{opacity:0}
  .cf .cf-fill{clip-path:inset(0 0 0 0);transition:none}
}

/* セクション見出しの下線：スクロールで左→右に引かれる（scroll-draw-line 移植）。
   初期 width:0/opacity:0 → ビュー内で .on が付き width:100% に伸びる。 */
.draw-line{width:0;height:2px;margin-top:22px;opacity:0;background:linear-gradient(90deg,var(--accent),var(--cyan))}
.draw-line.on{width:100%;opacity:1;transition:width 1.4s ease-out,opacity 1.4s ease-out}
@media(prefers-reduced-motion:reduce){.draw-line{width:100%;opacity:1;transition:none}}
/* eval：下線をコンテナ幅いっぱいに出すため section-head の外に配置。見出し→線→本文の余白を再配分 */
.eval .section-head{margin-bottom:0}
.eval .draw-line{margin-bottom:88px}

/* セクション背景：上2隅のL字コーナーフレーム（左右のブラウザ外からスライドイン）。
   hero-frame-expand の brackets を上コーナーのみ採用。.corner-frame を持つ各セクションに適用。 */
.corner-frame{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.corner-frame path{fill:none;stroke:var(--navy);stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
.eval .container,.problems .container,.solution .container,.overview .container{position:relative;z-index:1}

/* ---- ヒーロー右側：回転オービットアイコン演出（hero-orbit-icons-sample.html 移植） ---- */
/* --viz-scale で図全体の拡大率を調整（1=等倍）。レイアウトのボックスは変えず、
   transformで見た目だけ拡大するので他要素はズレない。タブレット以下は等倍に戻す。 */
.hero-orbit{width:100%;--viz-scale:1.2;transform:scale(var(--viz-scale));transform-origin:center}
.hero-orbit svg{width:100%;height:auto;display:block}
/* 公転で移動するラベル文字のガタつき防止：ヒンティング（グリッド吸着）を無効化し、
   パスと同じ純粋な図形として描画させる（サブピクセル移動時のジャンプを解消）。 */
.hero-orbit text{text-rendering:geometricPrecision}

  /* ---- 元SVGのスタイル（フォントにフォールバック追加済み） ---- */
      .hero-orbit .st0 {
        stroke-width: 6.46px;
      }

      .hero-orbit .st0, .hero-orbit .st1, .hero-orbit .st2, .hero-orbit .st3, .hero-orbit .st4, .hero-orbit .st5, .hero-orbit .st6, .hero-orbit .st7 {
        fill: none;
        stroke: #231815;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .hero-orbit .st1 {
        stroke-width: 6.01px;
      }

      .hero-orbit .st8 {
        stroke: #c6c6c6;
        stroke-miterlimit: 10;
        stroke-width: 8.31px;
      }

      .hero-orbit .st8, .hero-orbit .st9 {
        fill: #fff;
      }

      .hero-orbit .st10 {
        fill: #006aff;
      }

      .hero-orbit .st11 {
        font-family: 'A P-OTF UD Shin Go Pr6N', 'Noto Sans JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
        font-size: 28px;
        font-weight: 700;
      }

      .hero-orbit .st12 {
        font-size: 36px;
      }

      .hero-orbit .st12, .hero-orbit .st13 {
        font-family: 'A P-OTF UD Shin Go Pr6N', 'Noto Sans JP', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
        font-weight: 800;
      }

      .hero-orbit .st2 {
        stroke-width: 6.37px;
      }

      .hero-orbit .st3 {
        stroke-width: 6.45px;
      }

      .hero-orbit .st4 {
        stroke-width: 6.79px;
      }

      .hero-orbit .st14 {
        fill: #fedc5e;
      }

      .hero-orbit .st5 {
        stroke-width: 6.69px;
      }

      .hero-orbit .st6 {
        stroke-width: 5.45px;
      }

      .hero-orbit .st13 {
        font-size: 41.36px;
      }

      .hero-orbit .st7 {
        stroke-width: 5.48px;
      }

/* =========================================================
   第三者評価
   ========================================================= */
.eval{background:linear-gradient(180deg,var(--paper),var(--paper-alt))}
.eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.eval-left{text-align:center}
.mitre-badge{
  display:inline-flex;background:#fff;border-radius:14px;padding:16px 24px;margin-bottom:14px;
}
.mitre-badge img{height:52px;width:auto}
.eval-subtitle{margin:0 0 22px;color:var(--ink);font-weight:600;font-size:15px}
.eval-heading{
  display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--ink);line-height:1.4;
}
.eval-heading__icon{width:38px;height:38px;flex:none;color:var(--accent)}
.eval-heading u{text-decoration-color:var(--accent);text-underline-offset:3px}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px}
.stat-card{
  background:linear-gradient(160deg,var(--card-alt),#EFEFF1);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:24px 12px;text-align:center;
}
.stat-num{display:block;font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink)}
.stat-card-alt .stat-num{color:var(--gray-alt)}
.stat-num small{font-size:.45em;margin-left:2px;font-weight:700}
.stat-label{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink)}
.eval-highlights{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.eval-highlights li{
  display:flex;align-items:center;gap:10px;font-size:clamp(18px,2vw,22px);font-weight:600;color:var(--ink);
}
.eval-highlights__icon{width:26px;height:26px;flex:none;color:var(--accent)}.eval-chart{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.eval-chart img{border-radius:8px;width:100%}

/* =========================================================
   課題
   ========================================================= */
.problems{background:var(--paper-alt)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.p-card{
  position:relative;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 30px 34px;overflow:hidden;
}
.p-icon{
  display:flex;align-items:center;justify-content:center;
  width:110px;height:110px;margin:0 auto 14px;
}
.p-icon-img{width:100%;height:100%;object-fit:contain;display:block}
.p-num{font-family:"Montserrat",sans-serif;font-weight:800;font-size:15px;color:var(--accent)}
.p-lead{font-size:22px;font-weight:900;margin:6px 0 4px}
.p-sub{font-size:14px;font-weight:700;color:var(--gray-alt);margin-bottom:16px}
.p-desc{font-size:14.5px;color:#000;line-height:1.9}

/* problems：ホバーで広がる横並びカード（hover-expand-cards 移植／白ベース・中身は現状のまま）。
   .grid-3 は solution と共有のため .problems スコープに限定。純粋な :hover 駆動でJS不要。 */
.problems .grid-3{display:flex;gap:16px;align-items:stretch}
.problems .p-card{flex:1 1 0;min-width:0;transition:flex-grow .45s cubic-bezier(.24,0,.2,1),box-shadow .45s ease}
.problems .p-card:hover,.problems .p-card.is-hover{flex-grow:2.2;box-shadow:0 12px 30px rgba(20,33,61,.10)}
/* 縮小時も高さを一定に：見出し/サブは折り返さず、説明文は4行クランプ（拡大で1行の情報量が増える） */
.problems .p-lead,.problems .p-sub{white-space:nowrap}
.problems .p-desc .reveal-line{display:block}
.problems .p-desc .txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
@media(max-width:820px){
  .problems .grid-3{flex-direction:column}
  .problems .p-card{flex:0 0 auto}
  .problems .p-card:hover,.problems .p-card.is-hover{flex-grow:0;box-shadow:none}
  .problems .p-lead,.problems .p-sub{white-space:normal}
  .problems .p-desc .txt{display:block;-webkit-line-clamp:none}
}

/* 帯ワイプ・テキストリベール（text-band-wipe-reveal 移植）。各行を .reveal-line で包み、
   帯(.band)が左→覆い切る→右へ抜け、覆い切った瞬間に .txt を可視化する。--i で行ごとに時差。 */
.reveal-line{position:relative;display:inline-block;overflow:hidden;vertical-align:top;max-width:100%}
.reveal-line .txt{display:block;opacity:0}
.reveal-line .band{position:absolute;inset:0;background:var(--gray-mid);transform:scaleX(0);transform-origin:left center;z-index:2}
@keyframes bandWipe{
  0%{transform:scaleX(0);transform-origin:left center}
  42%{transform:scaleX(1);transform-origin:left center}
  50%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@keyframes txtShow{0%,45%{opacity:0}46%,100%{opacity:1}}
.reveal-line.is-inview .band{animation:bandWipe .95s cubic-bezier(.76,0,.24,1) forwards;animation-delay:calc(var(--i,0) * .12s)}
.reveal-line.is-inview .txt{animation:txtShow .95s linear forwards;animation-delay:calc(var(--i,0) * .12s)}
@media(prefers-reduced-motion:reduce){
  .reveal-line .txt{opacity:1 !important;animation:none !important}
  .reveal-line .band{display:none !important}
}

/* テキスト ぼけ→鮮明 フォーカスイン（text-blur-focus-in 移植）。
   初期は強くぼけて不可視 → ビュー内で .is-focus が付き鮮明＋可視化する。 */
.blur-focus{filter:blur(24px);-webkit-filter:blur(24px);opacity:0}
.blur-focus.is-focus{
  filter:blur(0);-webkit-filter:blur(0);opacity:1;
  transition:opacity .6s ease,filter .6s ease,-webkit-filter .6s ease;
}
@media(prefers-reduced-motion:reduce){
  .blur-focus{filter:none !important;-webkit-filter:none !important;opacity:1 !important;transition:none !important}
}
.down-arrow{display:flex;justify-content:center;margin-top:44px}
.down-arrow img{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* =========================================================
   解決
   ========================================================= */
.solution{
  background:
    radial-gradient(700px 400px at 50% -5%, rgba(0,0,0,.03), transparent 60%),
    var(--paper);
}
.s-card{
  background:linear-gradient(165deg,#F8F8F9,#FFFFFF);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 32px;text-align:center;
  transition:transform .3s var(--ease),border-color .3s;
}
.s-card:hover{transform:translateY(-6px);border-color:rgba(0,0,0,.3)}
.s-badge{
  display:inline-block;margin:0 auto 18px;padding:7px 18px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));color:#fff;
  font-size:13px;font-weight:800;letter-spacing:.02em;
}
.s-illust{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:200px;aspect-ratio:1/1;margin:0 auto 22px;padding:10px;
  background:#fff;border-radius:var(--radius-sm);overflow:hidden;
  box-sizing:border-box;
}
.s-illust-img{width:100%;height:100%;object-fit:contain;display:block}
.s-title{font-size:20px;font-weight:800;margin-bottom:14px}
.s-desc{color:#000;font-size:14.5px;text-align:left}

/* =========================================================
   全体像（アーキテクチャ）
   ========================================================= */
.overview{background:var(--paper-alt)}
.arch-card{
  /* 右側だけ.containerの右paddingぶん(24px)食い込ませ、右端を.containerの外枠＝
     ヘッダーCTA付近・01〜08カード（.service-item）の右端と揃える */
  margin:0;width:calc(100% + 24px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;
}
.arch-card img{width:100%;border-radius:8px}

/* =========================================================
   機能：各領域（スクロール連動：左固定インジケーター＋右スクロール）
   ========================================================= */
.section-service{background:var(--paper-alt)}
.section-service .content{position:relative}
.section-service .bg-left{
  position:absolute;top:0;left:0;width:22%;height:100%;
  background:var(--ink);z-index:0;
}
.section-service .left{
  position:absolute;top:0;left:0;width:22%;height:100%;z-index:1;
}
.section-service .current{
  position:sticky;top:76px;height:calc(100vh - 76px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:0 20px;
}
.cur-num{
  display:flex;gap:.02em;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(40px,5vw,64px);
  line-height:1;margin-bottom:18px;
}
/* 番号：3Dフリップ演出（text-outline-draw-flip 移植）。塗り（fill）の通常テキストで表示。
   1文字ずつ span+svg+text を生成し、番号が切り替わるたびに再生する（JS側で構築）。 */
.cur-num-ch{
  display:block;
  transform:perspective(600px) skewX(20deg) rotateY(-120deg) translate3d(10px,40px,0);
  transform-origin:bottom;opacity:0;backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s cubic-bezier(.4,0,.2,1);
  transition-delay:calc(.06s * var(--char-index));
}
.cur-num-ch svg{display:block;height:1em;overflow:visible}
.cur-num-ch svg text{fill:rgba(255,255,255,.92);stroke:none}
.cur-num.is-flip .cur-num-ch{transform:perspective(600px) skewX(0) rotateY(0) translate3d(0,0,0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .cur-num-ch{transform:none !important;opacity:1 !important;transition:none !important}
}
.cur-title{
  font-size:clamp(15px,1.4vw,18px);font-weight:700;letter-spacing:.04em;line-height:1.7;
  transition:opacity .2s;
}
.cur-icon{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:clamp(140px,13vw,200px);height:clamp(140px,13vw,200px);margin-top:26px;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.35);border-radius:16px;
  font-size:13px;color:rgba(255,255,255,.7);line-height:1;transition:opacity .2s;
}
/* 01〜08すべて実アイコンSVGを表示（JSがdata-numで出し分け） */
.cur-icon-img{width:56%;height:56%;object-fit:contain;display:none}
.cur-icon.has-icon .cur-icon-img{display:block}
.cur-icon.has-icon .cur-icon-ph{display:none}
.section-service .right{position:relative;width:78%;left:22%;padding:90px 0 90px 56px}
.service-list{display:flex;flex-direction:column;gap:26px}
.service-item{
  /* 他セクション（.container、max-width:var(--maxw)=1160px、中央寄せ）の右端＝
     ヘッダーCTA付近と揃う幅。中央寄せ幅Mの右端は「50vw + M/2」（M=1160なら50vw+580px）。
     .rightの左端はleft:22vw、そこにpadding-left:56pxが加わるため、
     カード幅 = (50vw+580px) − (22vw+56px) = 28vw + 524px。
     （1024px以下は下の@mediaでmax-width:noneに上書き） */
  max-width:clamp(720px,28vw + 524px,1200px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 40px 36px;
}
.service-item .domain-cat{margin-top:8px}
.service-item .tag-row{margin-top:18px}
.service-item .domain-desc{margin-top:16px}
.service-item .diagram{margin-top:24px}

/* 01〜08共通：右上に大きな番号を背景装飾として配置（仮配置・目視調整用） */
.service-item{position:relative}
.service-item::before{
  content:attr(data-num);
  position:absolute;
  top:8px;right:24px;
  font-family:"Montserrat",sans-serif;
  font-size:clamp(80px,9vw,130px);
  font-weight:800;
  line-height:1;
  color:#E7E9EE;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.service-item>*{position:relative;z-index:1}
.diagram{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
}
.diagram img{width:100%;border-radius:6px}
.domain-title{font-size:clamp(22px,2.6vw,28px);font-weight:900;line-height:1.3}
.domain-cat{color:var(--gray-mid);font-size:14px;font-weight:700}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag-row li{
  font-size:12.5px;font-weight:700;color:var(--ink-sub);
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.15);
  padding:5px 12px;border-radius:999px;
}
.domain-desc{color:#000;font-size:15px}

/* 機能図：画像をHTML化したカードグリッド（01エンドポイント〜07統合基盤）。
   領域ごとのドット色は各 .fx-diagram の --fx で指定（元画像の配色を実測反映）。 */
.fx-diagram{background:var(--paper-alt);padding:20px}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.fx-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:12px;
  padding:18px 20px;box-shadow:0 1px 3px rgba(20,33,61,.05);
}
.fx-card__title{
  display:flex;gap:9px;font-size:15px;font-weight:800;line-height:1.55;color:var(--ink);
}
.fx-card__title .fx-dot{
  flex:0 0 auto;width:7px;height:7px;margin-top:.5em;border-radius:50%;
  background:var(--fx,var(--accent));
}
.fx-card__desc{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--muted)}
@media (max-width:900px){.fx-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-grid{grid-template-columns:1fr}}

/* 04メールセキュリティ等：ドットの代わりに上部アイコン（グローバルMDRサービスのfx-step__iconと同じ大きさ＝カード幅の50%） */
.fx-card__icon-ph{width:40%;margin:0 auto 14px}
.fx-card__icon-ph img{width:100%;height:auto;display:block;object-fit:contain}
.fx-card--icon .fx-card__title{display:block;text-align:center}

/* 01 エンドポイントセキュリティ：カテゴリ行＋チップ一覧
   （クライアント提供 Cynetサイトイメージ_20260703.pptx シーン6 準拠） */
.cat-diagram{display:flex;flex-direction:column;gap:18px;background:#F1F1F1}
.cat-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cat-row__label{
  flex:none;display:flex;flex-direction:row;align-items:center;gap:8px;
  background:#002D5C;border-radius:999px;padding:8px 20px;
}
.cat-row__title{font-size:16px;font-weight:900;letter-spacing:.02em;color:#fff;text-align:center}
.cat-row__sub{font-size:12.5px;color:#fff;text-align:center}
.cat-row__chips{
  flex:1;width:100%;display:flex;flex-wrap:wrap;gap:10px;margin:0;
  background:#fff;border-radius:12px;padding:18px 20px;
}
.cat-row__chips li{
  background:var(--paper-alt);border:1px solid var(--line-soft);border-radius:8px;
  padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;
}
@media(max-width:820px){
  .cat-row__chips li{white-space:normal}
}
/* 05 クラウドセキュリティ：SSPM/CSPMの2カラム比較カード */
.fx-grid--2col{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.fx-grid--2col{grid-template-columns:1fr}}

/* 06 モバイルセキュリティ：画像プレースホルダー（左半分）＋項目リスト（右） */
.mobile-diagram{display:flex;flex-direction:row;gap:24px;align-items:stretch}
.mobile-diagram__visual{
  flex:0 0 50%;display:flex;align-items:center;justify-content:center;
  min-height:220px;
}
.mobile-diagram__visual img{width:100%;height:auto;display:block}
.mobile-diagram__list{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;margin:0}
.mobile-diagram__list li{
  background:#fff;border:1px solid var(--line-soft);border-radius:10px;
  padding:12px 18px;font-size:13.5px;font-weight:700;color:var(--ink);text-align:center;
  box-shadow:0 1px 3px rgba(20,33,61,.05);
}
@media(max-width:820px){
  .mobile-diagram{flex-direction:column}
  .mobile-diagram__visual{flex:none;width:100%}
}

/* グローバルMDRサービス：4ステップのフロー型カード（domain_mdr.png のHTML化） */
.fx-mdr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0}
.fx-step{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-soft);border-radius:12px;
  padding:20px 18px;box-shadow:0 1px 3px rgba(20,33,61,.05);
}
.fx-step__icon{width:50%;margin:10px auto 14px}
.fx-step__icon svg{width:22px;height:22px;fill:none;stroke:var(--fx,var(--accent));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-step__icon img{width:100%;height:auto;display:block;object-fit:contain}
.fx-step__title{font-size:15px;font-weight:800;line-height:1.4;color:var(--ink);text-align:center}
.fx-step__desc{margin-top:8px;font-size:13px;line-height:1.8;color:var(--muted)}
.fx-step__list{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.fx-step__list li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--ink-sub)}
.fx-step__list li::before{
  content:"";position:absolute;left:2px;top:.61em;width:6px;height:6px;
  border-top:2px solid var(--fx,var(--accent));border-right:2px solid var(--fx,var(--accent));
  transform:rotate(45deg);
}
@media (max-width:1024px){.fx-mdr-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-mdr-grid{grid-template-columns:1fr}}

/* 07 統合基盤：CyAIの特長（赤ボーダー・番号付き2×2カード） */
.feat-num-grid__visual{width:100%;margin:0 auto 24px;display:block}
.feat-num-grid__lead{font-size:13px;font-weight:800;color:var(--muted-2);margin-bottom:14px}
.feat-num-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0}
.feat-num-card{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--pink);
  border-radius:10px;padding:18px 20px;box-shadow:0 1px 3px rgba(20,33,61,.05);
}
.feat-num-card__num{flex:0 0 auto;font-family:"Montserrat",sans-serif;font-size:24px;font-weight:900;color:var(--pink);line-height:1.2}
.feat-num-card__title{font-size:14.5px;font-weight:800;color:var(--ink)}
.feat-num-card__desc{margin-top:6px;font-size:13px;line-height:1.8;color:var(--muted)}
@media(max-width:700px){.feat-num-grid{grid-template-columns:1fr}}

/* =========================================================
   ライセンス
   ========================================================= */
.pricing{background:var(--paper-alt)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 30px;
  transition:transform .3s var(--ease);
}
.plan:hover{transform:translateY(-6px)}
.plan-featured{
  border-color:var(--accent);
  transform:scale(1.03);
}
.plan-featured:hover{transform:scale(1.03) translateY(-6px)}
.plan-featured::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:linear-gradient(120deg,
    rgba(0,106,255,0) 0%,
    rgba(255,255,255,.28) 45%,
    rgba(0,106,255,.07) 60%,
    rgba(0,106,255,0) 100%);
  background-size:260% 260%;
  animation:plan-sheen 16s ease-in-out infinite;
  pointer-events:none;
}
@keyframes plan-sheen{
  0%,100%{background-position:0% 30%}
  50%{background-position:100% 70%}
}
.plan-featured>*:not(.plan-badge){position:relative;z-index:1}
.plan-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.08em;padding:7px 20px;border-radius:999px;
  white-space:nowrap;
}
.plan-head{border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:20px;margin-bottom:20px}
.plan-name{font-family:"Montserrat",sans-serif;font-size:30px;font-weight:800;color:var(--accent)}
.plan-featured .plan-name{color:var(--accent)}
.plan-target{margin-top:12px;font-size:13.5px;color:#000;line-height:1.7}
.plan-mdr{font-size:13px;font-weight:800;color:var(--gray-alt);margin-bottom:10px}
.plan-cat{font-size:15px;font-weight:900;margin-bottom:16px}
.plan-feats{display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
.plan-feats li{position:relative;padding-left:26px;font-size:14px;color:var(--ink-sub);line-height:1.6}
.plan-feats li::before{
  content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
/* ---------- プランカード：穴から出てくる演出 ----------
   引用元：ページ演出サンプル/hole-emerge-objects-sample.html の「左側（スロット型）」。
   奥(z1)穴の奥縁 → 中(z2)カード → 手前(z3)穴の手前縁 の3層サンドイッチで
   「床の穴を貫通している」錯覚を作る。色はCynetブルーに置き換え。
   ---- 縦の寸法（数字を触るときはここを見る）----
   穴svg: viewBox 0 0 400 20 ／ 奥縁y=2・中心線y=9・手前縁y=18
   ・穴要素は bottom:7px / height:20px → 中心線は .plan-hole 下端から18px
   ・カード下端（=クリップ下端）は 12px → 中心線より 6px 下で切る
   ・手前縁の底線は 9px → カード切断面より 3px 下（＝床の線として見える）
   これで手前縁の斜線がカードの根元を横切る。
   ---- 横の寸法 ----
   穴はグリッドのセル幅ぴったり（left/right:0）に収め、カード側を --card-inset
   だけ内側に狭める。こうすると隣の穴との間隔＝カード間gapがそのまま残り、
   穴どうしがくっつかない。張り出し量＝--card-inset（手前縁）。            */
.plan-hole{
  --card-inset:14px; /* 穴の内側にカードを追い込む量＝穴が横に張り出して見える量 */
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding-bottom:12px;               /* 手前縁が出る床スペース */
}
/* 発火（.in の付与）は js/script.js の checkPlanHoles が担当。
   汎用の .reveal はブロック上端で発火してしまい、下端にある穴が
   画面に入る前に演出が終わるため、専用判定に分けている。 */

.plan-hole__clip{
  position:relative;z-index:2;
  flex:1;display:flex;
  padding:36px 0 0;                  /* 上＝おすすめバッジ・ホバー浮きの逃がし */
  margin:-36px 0 0;                  /* 逃がした分を打ち消し、カード上端の位置は元のまま */
  overflow:hidden;                   /* 穴の中心線より下でカードを切り落とす */
}
/* 左右の --card-inset ぶんカードを狭める。1.03拡大のはみ出しもこの内側に収まる。
   沈める量が 100%（カード高さ）ちょうどだと、おすすめカードは scale(1.03) で
   上に伸びる分（高さの1.5%≒10px）と .plan-badge（top:-14px）が穴から顔を出す。
   その逃げしろとして 40px 余分に沈める。※planRise の from と必ず同じ値にすること */
.plan-hole__rise{
  flex:1;display:flex;padding:0 var(--card-inset);
  will-change:transform;transform:translateY(calc(100% + 40px));
}
.plan-hole__rise>.plan{flex:1}

.plan-hole__mouth{
  position:absolute;left:0;right:0;   /* 穴＝セル幅ぴったり。隣の穴との間隔はgapがそのまま残る */
  bottom:7px;height:20px;
  transform:scale(0);
  transform-origin:50% 45%;          /* 穴の中心線(y=9/20)を軸に開閉させる */
  pointer-events:none;
}
.plan-hole__mouth--back {z-index:1}
.plan-hole__mouth--front{z-index:3}
.plan-hole__mouth svg{display:block;width:100%;height:100%}
.plan-hole__mouth path{
  fill:none;stroke:#000;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;  /* preserveAspectRatio="none" の横伸びで線が太らないように */
}
/* 奥・手前とも同じ濃さ（不透明度1）。奥行きは重ね順だけで見せる */

@keyframes planHoleOpen{from{transform:scale(0)}   to{transform:scale(1)}}
@keyframes planRise    {from{transform:translateY(calc(100% + 40px))}to{transform:translateY(0)}}

/* 穴が開く → 少し遅れてカードがせり上がる（サンプルのオフセット .35s を踏襲） */
.plan-hole.in .plan-hole__mouth{
  animation:planHoleOpen .55s cubic-bezier(.34,1.56,.64,1) both var(--hole-delay,0s);
}
.plan-hole.in .plan-hole__rise{
  animation:planRise 1s cubic-bezier(.215,.61,.355,1) both calc(var(--hole-delay,0s) + .25s);
}
.plan-hole:nth-child(2){--hole-delay:.16s}
.plan-hole:nth-child(3){--hole-delay:.32s}

/* 穴svgは preserveAspectRatio="none" で横に伸びるため、奥縁の斜線の幅（px）は
   穴の幅に比例して広がる（＝穴幅/40 px）。カードが奥縁より外にはみ出すと
   貫通して見えなくなるので、1カラムに落ちて穴が広くなる幅では inset も広げる。 */
@media(max-width:820px){.plan-hole{--card-inset:24px}}
@media(max-width:560px){.plan-hole{--card-inset:18px}}

@media (prefers-reduced-motion:reduce){
  .plan-hole__mouth,.plan-hole__rise{animation:none!important;transform:none!important}
}

/* ---------- 機能一覧（クライアント提供pptx スライド15 を忠実に転載） ---------- */
.compare-wrap{margin-top:56px}
.compare-title{font-size:20px;font-weight:900;margin-bottom:20px;text-align:center}
.compare-scroll{
  overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.compare-table th,.compare-table td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line)}
.compare-table thead th{
  font-weight:800;color:var(--ink);background:var(--card-alt);
  position:sticky;top:0;white-space:nowrap;
}
.compare-table thead tr.compare-subhead th{
  position:static;font-weight:600;font-size:12px;color:var(--ink-sub);
  white-space:normal;line-height:1.4;padding-top:0;
}
.compare-table thead tr:first-child th{border-bottom:none}
.compare-table thead tr.compare-subhead th:first-child{text-align:center}
.compare-table td:first-child,.compare-table th:first-child{
  text-align:left;min-width:300px;font-weight:700;color:var(--ink);
}
.compare-table td:not(:first-child),.compare-table th:not(:first-child){white-space:nowrap}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table .yes{font-weight:800;color:var(--ink)}
.compare-table .no{color:var(--muted-2)}
.compare-table .note{font-size:12.5px;font-weight:700;color:var(--ink-sub)}

/* All-in-One列（おすすめプラン）を強調 */
.compare-table th:nth-child(4),.compare-table td:nth-child(4){background:rgba(0,106,255,.05)}
.compare-table thead tr:first-child th:nth-child(4){color:var(--accent)}
.compare-table thead tr.compare-subhead th:nth-child(4){color:var(--accent);font-weight:800}
.compare-table td:nth-child(4).yes{color:var(--accent)}
.compare-recommend-badge{
  display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:middle;
}
.compare-foot{margin-top:16px;font-size:12.5px;color:var(--muted-2);text-align:center;line-height:1.7}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0 28px;transition:border-color .25s,box-shadow .25s;
}
.faq-item[open]{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,106,255,.08)}
.faq-q{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:22px 40px 22px 0;position:relative;
  font-size:16px;font-weight:800;color:var(--ink);line-height:1.6;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q-mark{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.faq-q-text{flex:1;padding-top:3px}
.faq-q::after{
  content:"";position:absolute;right:4px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .3s;
}
.faq-item[open] .faq-q::after{transform:rotate(-135deg);top:32px}
/* details標準の開閉(display:none)をグリッド行の0fr⇔1frに置き換えてゆっくり開閉させる。
   author側の display:grid が details のUAデフォルト非表示を上書きするため常に描画され、
   grid-template-rows のトランジションだけで高さが滑らかに変化する（要素はoverflow:hiddenで隠す） */
.faq-a{
  display:grid;grid-template-columns:28px 1fr;column-gap:16px;grid-template-rows:0fr;
  padding:0 40px 0 0;color:var(--ink-sub);font-size:14.5px;line-height:1.9;
  transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
}
.faq-item[open] .faq-a{grid-template-rows:1fr}
.faq-a-mark{
  overflow:hidden;min-height:0;
  width:28px;height:28px;border-radius:50%;
  background:var(--card-alt);color:var(--accent);
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.faq-a-body{overflow:hidden;min-height:0;padding-bottom:26px}
.faq-a-body p+p{margin-top:14px}
.faq-reasons{display:flex;flex-direction:column;gap:18px}
.faq-reason-title{font-weight:800;color:var(--ink);margin-bottom:6px}
.faq-compare-wrap{margin-top:18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.faq-compare-table{width:100%;min-width:440px;border-collapse:collapse;font-size:13.5px}
.faq-compare-table th,.faq-compare-table td{padding:10px 14px;text-align:center;border-bottom:1px solid var(--line)}
.faq-compare-table thead th{font-weight:800;color:var(--ink);background:var(--card-alt);white-space:nowrap}
.faq-compare-table td:first-child,.faq-compare-table th:first-child{text-align:left;font-weight:700;color:var(--ink)}
.faq-compare-table tbody tr:last-child td{border-bottom:none}
.status-icon{display:inline-block;width:22px;height:22px;background-repeat:no-repeat;background-position:center;background-size:contain;vertical-align:middle}
.status-icon--yes{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23006AFF'/%3E%3Cpolyline points='7,12.5 10.5,16 17,8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.status-icon--no{width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='%2383858B' stroke-width='2.8' stroke-linecap='round'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='%2383858B' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.status-icon--note{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 L22.5 21 L1.5 21 Z' fill='%23FFE45F'/%3E%3Cline x1='12' y1='9' x2='12' y2='14.5' stroke='%2314213D' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.1' fill='%2314213D'/%3E%3C/svg%3E")}
.faq-compare-table td.yes,.faq-compare-table td.no,.faq-compare-table td.note{padding-top:8px;padding-bottom:8px}
.faq-compare-note{margin:0 0 10px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:14px;font-size:13px;font-weight:600;color:var(--ink-sub)}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.legend-icon.status-icon--yes,.legend-icon.status-icon--note{width:14px;height:14px}
.legend-icon.status-icon--no{width:11px;height:11px}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:80px 0;
}
.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:rgba(63,208,232,.14);filter:blur(90px);top:-160px;right:-80px}
.cta-plane-deco{
  position:absolute;z-index:1;left:-150px;bottom:-60px;
  width:360px;height:360px;
  pointer-events:none;
}
.cta-plane-deco.reveal{
  opacity:0;
  transform:none;
  transition:none;
}
.cta-plane-deco.reveal.in{
  animation:cta-plane-fly 18s linear infinite;
}
@keyframes cta-plane-fly{
  0%{transform:translate(0,0) rotate(-6deg);opacity:0}
  10%{opacity:.14}
  80%{opacity:.14}
  100%{transform:translate(780px,-360px) rotate(-16deg);opacity:0}
}
@media(max-width:560px){
  .cta-plane-deco{display:none}
}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-title{font-size:clamp(24px,3vw,36px);font-weight:900;margin-bottom:14px;color:var(--on-dark)}
.cta-lead{color:var(--on-dark-muted);font-size:15px;max-width:620px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* =========================================================
   TOPへ戻るバー
   ========================================================= */
.back-to-top{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;background:var(--paper);border-top:1px solid var(--line);
  padding:22px 0;text-align:center;
  color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;
  transition:color .35s,background .5s,letter-spacing .35s,border-color .35s;
}
.back-to-top::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,transparent 0%, rgba(63,208,232,.4) 50%, transparent 100%);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.back-to-top::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--cyan);opacity:0;box-shadow:0 0 14px 2px var(--cyan);
  transition:opacity .35s;
}
.back-to-top:hover{
  background:var(--navy);color:#fff;letter-spacing:.18em;border-color:transparent;
}
.back-to-top:hover::before{transform:translateX(120%)}
.back-to-top:hover::after{opacity:1}
.bt-arrow{display:block;transition:transform .3s,filter .3s}
.back-to-top:hover .bt-arrow{animation:bt-bounce 1.1s ease-in-out infinite;filter:drop-shadow(0 0 6px var(--cyan))}
@keyframes bt-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* =========================================================
   スクロールリベール
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:1024px){
  .hero{align-items:flex-start}
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-visual{order:-1;max-width:1000px;margin:60px auto 0}
  .hero-orbit{--viz-scale:1.8}
  .hero-copy{margin-top:75px}
  /* オールインワンセキュリティの概要文：ぼかし演出がis-focus未発火のまま残ると
     灰色の背景・影のように見えるため、iPad以下ではぼかし自体を無効化 */
  .overview .section-sub{filter:none;-webkit-filter:none}
  /* PCでは右24pxはみ出させて右端を揃えているが、iPad以下では中央に収める */
  .arch-card{width:100%;margin:0 auto}
  .eval-grid{grid-template-columns:1fr;gap:32px}
  .section-service .bg-left,.section-service .left{width:22%}
  .section-service .right{width:78%;left:22%;padding-left:32px}
  .service-item{max-width:none;padding:32px 28px 28px}
}
@media(max-width:820px){
  .gnav{
    position:fixed;top:76px;right:0;width:min(78vw,320px);height:calc(100vh - 76px);
    flex-direction:column;align-items:stretch;gap:0;padding:26px 24px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
    border-left:1px solid var(--line-soft);
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .gnav.open{transform:translateX(0)}
  .gnav-item{
    flex-direction:row;justify-content:flex-start;gap:12px;
    width:100%;min-width:0;height:auto;padding:14px 2px;
    font-size:17px;text-align:left;border-left:none;border-bottom:1px solid var(--line-soft);
  }
  .gnav-icon{display:none}
  .gnav-cta{align-self:stretch;margin:14px 0 0;width:100%;justify-content:center;height:50px;border-bottom:none}
  .hamburger{display:flex}
  .grid-3,.plan-grid{grid-template-columns:1fr;gap:20px}
  .stat-row{gap:10px}
  .plan-featured{transform:none}
  .plan-featured:hover{transform:translateY(-6px)}
  .section{padding:76px 0}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .section-service .bg-left,.section-service .left{width:15%}
  .section-service .right{width:85%;left:15%;padding:56px 0 56px 20px}
  .section-service .current{padding:0 6px}
  .cur-num{font-size:24px;margin-bottom:10px}
  .cur-title{writing-mode:vertical-rl;text-orientation:mixed;font-size:12.5px;letter-spacing:.08em}
  .cur-icon{width:40px;height:40px;margin-top:14px;font-size:9px;border-radius:8px}
  .service-item{padding:26px 20px}
  .corner-frame{display:none}
}
@media(max-width:560px){
  .container{padding:0 18px}
  .header-inner{padding:0 18px;height:64px}
  /* ▼TEMP: ロゴ拡大演出（上のブロックと対。削除時はこの1行のみ削除でよい） */
  .brand-logo{--logo-top:19px}
  /* ▲TEMP */
  .site-header.scrolled{}
  html{scroll-padding-top:72px}
  .gnav{top:64px;height:calc(100vh - 64px)}
  .section-service .current{top:64px;height:calc(100vh - 64px)}
  .stat-row{grid-template-columns:1fr;}
  .stat-card{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px}
  .stat-num{font-size:38px}
  .stat-label{margin-top:0}
  .hero{padding:120px 0 70px}
  .hero-visual{max-width:400px;margin-top:0}
  .hero-orbit{--viz-scale:1.1}
  /* エンドポイント等の紺背景タイトルバッジ：スマホでは楕円ではなく四角形に */
  .cat-row__label{border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;width:100%}
  .cat-row__title,.cat-row__sub{text-align:left}
  /* 04メールセキュリティのアイコン枠：スマホでは幅100%に */
  .fx-card__icon-ph{width:100%}
  /* スマホ幅のみ：各セクションの見出し・概要文を左寄せに */
  .section-head.center{margin-left:0;margin-right:0;text-align:left}
  .section-head.center .section-sub{margin-left:0;margin-right:0}
  .overview .section-sub{text-align:left}
  .btn{height:52px;padding:0 24px}
  /* 横長ダイアグラムはモバイルで横スクロール可 */
  .diagram{padding:14px;overflow-x:auto}
  .diagram img{width:auto;height:190px;max-width:none}
  .arch-card{padding:14px}
  .arch-card img{width:100%;height:auto;max-width:100%}
  /* 04メールセキュリティのアイコン：.diagram img の190px固定を打ち消し幅100%に */
  .fx-card__icon-ph img{width:100%;height:auto;max-width:100%}
  /* 06モバイルセキュリティの画像：同様に.diagram imgの190px固定を打ち消し幅100%に */
  .mobile-diagram__visual img{width:100%;height:auto;max-width:100%}
  /* 08グローバルMDRのアイコン：同様に.diagram imgの190px固定を打ち消し幅100%に */
  .fx-step__icon{width:100%}
  .fx-step__icon img{width:100%;height:auto;max-width:100%}

  /* 機能一覧テーブルはスマホでカード化。列見出しはProtect/Elite/All-in-Oneのラベルとして各値の前に表示 */
  .compare-scroll{overflow-x:visible;background:none;border:none;border-radius:0}
  .compare-table{min-width:0;width:100%}
  .compare-table thead{display:none}
  .compare-table tbody{display:block}
  .compare-table tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:16px;margin-bottom:12px;
  }
  .compare-table tbody tr:last-child{margin-bottom:0}
  .compare-table td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .compare-table tbody tr td:last-child{border-bottom:none}
  .compare-table td:first-child{
    display:block;min-width:0;font-weight:800;color:var(--ink);
    padding:0 0 10px;margin-bottom:4px;border-bottom:2px solid var(--ink);
  }
  .compare-table td:not(:first-child)::before{font-weight:700;font-size:12.5px;color:var(--muted-2)}
  .compare-table td:nth-child(2)::before{content:"Protect"}
  .compare-table td:nth-child(3)::before{content:"Elite"}
  .compare-table td:nth-child(4)::before{content:"All-in-One（おすすめ）"}

  /* All-in-One行（おすすめプラン）はカード内でも一段強調 */
  .compare-table td:nth-child(4){
    background:rgba(0,106,255,.08);border-radius:8px;
    padding-left:10px;padding-right:10px;margin:2px -10px 0;
  }
  .compare-table td:nth-child(4)::before{color:var(--accent);font-weight:800}
  .compare-table td:nth-child(4).yes{color:var(--accent)}

  /* FAQ内比較表（他社EDR/XDR製品との違い）もスマホでカード化。列見出しはCynet All-in-One/一般的なEDR/XDR製品のラベルとして各値の前に表示 */
  .faq-compare-wrap{overflow-x:visible;background:none;border:none;border-radius:0}
  .faq-compare-table{min-width:0;width:100%;font-size:13px}
  .faq-compare-table thead{display:none}
  .faq-compare-table tbody{display:block}
  .faq-compare-table tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;margin-bottom:10px;
  }
  .faq-compare-table tbody tr:last-child{margin-bottom:0}
  .faq-compare-table td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
  .faq-compare-table tbody tr td:last-child{border-bottom:none}
  .faq-compare-table td:first-child{
    display:block;font-weight:800;color:var(--ink);
    padding:0 0 8px;margin-bottom:2px;border-bottom:2px solid var(--ink);
  }
  .faq-compare-table td:not(:first-child)::before{font-weight:700;font-size:11.5px;color:var(--muted-2)}
  .faq-compare-table td:nth-child(2)::before{content:"Cynet All-in-One"}
  .faq-compare-table td:nth-child(3)::before{content:"一般的なEDR/XDR製品"}
  .faq-compare-table td:nth-child(2)::before{color:var(--accent);font-weight:800}

  /* FAQ */
  .faq-item{padding:0 18px}
  .faq-q{padding:18px 32px 18px 0;gap:12px;font-size:14.5px}
  .faq-a{grid-template-columns:24px 1fr;column-gap:12px;padding:0 32px 0 0;font-size:13.5px}
  .faq-a-body{padding-bottom:20px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;transition:none}
  .cta-plane-deco.reveal{opacity:.14;transform:none;transition:none;animation:none}
  .plan-featured::before{animation:none;background-position:20% 40%}
  .faq-a{transition:none}
  .down-arrow svg{animation:none}
  .back-to-top:hover .bt-arrow{animation:none}
  .back-to-top::before{transition:none}
  .gnav-item::before{transition:none}
  .gnav-cta::before{transition:none}
}

/* =========================================================
   余白リズム（index.html / index2.html 共通の標準）
   参照：rikyu-home.com（実機測定：セクション上下150px／見出し→
   コンテンツ110〜140px／項目間80〜100px の広めエディトリアル型）。
   余白は変数化し「もっと広く／狭く」に1行で応答できるようにする。
   ========================================================= */
:root{
  --sec-pad:150px;   /* セクション上下 padding */
  --head-gap:110px;  /* 見出しブロック → コンテンツ */
  --card-gap:40px;   /* カード・項目どうしの間隔 */
}
.section{padding:var(--sec-pad) 0}
.section-head{margin-bottom:var(--head-gap)}
.section-sub{margin-top:26px}
.grid-3{gap:var(--card-gap)}
.plan-grid{gap:var(--card-gap)}
.service-list{gap:var(--card-gap)}
.down-arrow{margin-top:64px}
.compare-wrap{margin-top:88px}
.cta{padding:120px 0}

/* 画面幅に応じて段階的に詰める（既存ブレークポイントに整合） */
@media(max-width:1024px){
  :root{--sec-pad:120px; --head-gap:88px; --card-gap:34px}
}
@media(max-width:820px){
  :root{--sec-pad:96px; --head-gap:64px; --card-gap:24px}
  .cta{padding:100px 0}
}
@media(max-width:560px){
  :root{--sec-pad:76px; --head-gap:52px}
  .cta{padding:90px 0}
}