/* =============================================================
   cero — パターン「トンマナ変更」専用スタイル（cero3 限定・正典 Cero/site/ には無い）
   style.css / electric.css の後に読み込んで上書きする。
   -------------------------------------------------------------
   踏襲元 = vlcsecurity.com（クライアント提示。狙い＝「セキュリティ系他社のシンプルな感じ」）
   ボス指示（2026-07-26）＝「Cero仕様書通りなら、もっと思いっきりレイアウトをいじっていい」

   ★仕様書の🔒（守るもの）
     3色厳守 #08153F/#FFFFFF/#CDE02E ／ ネイビー基調 ／ 指定文言 ／
     ページ構成・セクション順・掲載要素の増減なし ／ フォームの項目・文言・挙動 ／ ロゴ
   ★仕様書の🎨（自由に振ってよい＝今回いじったところ）
     レイアウト ／ 余白 ／ 動き ／ あしらい ／ フォント選定 ／ アイコン

   ★本家の実測値（一次情報＝取得した本家CSS。全て出所つきで抽出済み）
     英字見出し  Jost 700 / 80px / LH 116px(1.45) / 字間なし / **左寄せ**（text-align指定なし）
     和文ラベル  16px / LH 30px(1.875) / weight 500 ＝ 本文と同寸
     見出し→本体 margin-bottom 5.6rem            (home.css:1187-1190)
     リスト1件   grid auto 1fr / gap 2.6rem / padding 1.8rem 0 / border-bottom 1px
                 hover で下線が width 0→100% に伸びる（@keyframes moveEnd, style.css:174-189）
     全幅の帯    縦1列 flex / gap 2.4rem / 本文 padding 4rem 12rem   (home.css:2479-2529)
     コンテナ    1200px 一種類 / 左右 20px 一種類。**例外はヘッダーだけ全幅**
     装飾        影ゼロ・カードUIを使わない・使うのは 1px 罫線だけ
     出現アニメ  translateY(30px)→0 / 0.45s / 要素間 0.2秒ずらし（ぼかしは使わない）
   ============================================================= */

:root{
  /* ★欧文を Jost に（🎨フォント選定）。本家の英字がこれで、英字が主役になった今いちばん効く。
     Poppins は fallback に残す＝読み込み失敗しても崩れない。 */
  --font-en:"Jost","Poppins","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* 英字 : 和文 : 本文 ＝ 5 : 1 : 1（本家の最大の特徴） */
  --tone-en: clamp(2.4rem, .8rem + 6.4vw, 5rem);   /* 38px → 80px */
  --tone-jp: var(--step-0);                        /* 和文見出し＝本文と同寸 */
  --tone-lh-en: 1.45;
  --tone-lh-jp: 1.875;
  --tone-dur: .45s;
  --tone-y: 30px;
  --tone-step: .2s;
  --tone-head-gap: clamp(2.6rem, 1rem + 3.5vw, 5.6rem);   /* 見出し→本体（本家 5.6rem） */
  --tone-rule: 1px solid var(--line);

  /* レイアウトの数値を絞る＝本家の「判断が一度もされていないように見える」規律 */
  --gutter: 20px;
  --section-y: clamp(3.75rem, 2rem + 4vw, 6.25rem);   /* 60px → 100px */
  --container: 1200px;
  --shadow-soft: none;
}

/* -------------------------------------------------------------
   1. ヒーロー — 英字を主役に振り切る
   本家は巨大英字（"Go Beyond" 180px / italic / 字間 -0.04em）が画面を支配し、
   和文は小さく静か。Cero も同じ骨格（ロゴ→英字題字→和文サブ）なので、
   **要素は増減させず**サイズの比だけ入れ替える。
   ------------------------------------------------------------- */
.hero__mark{
  height:clamp(28px, 3.4vw, 46px);      /* 46-74px → 小さく。主役を題字へ渡す */
  margin-bottom:clamp(1.4rem, 3vw, 2.6rem);
  top:0;
}
.hero .display,
.display{
  font-family:var(--font-en);
  font-weight:700;
  font-size:clamp(2.6rem, .2rem + 9.6vw, 8.5rem);   /* 42px → 136px */
  line-height:1.02;
  letter-spacing:-.035em;
  top:0;
}
.hero__sub{
  font-size:var(--tone-jp);
  line-height:var(--tone-lh-jp);
  margin-top:clamp(1.2rem, 2.4vw, 2.2rem);
  max-width:34em;
}

/* -------------------------------------------------------------
   2. セクション見出し — 階層を反転（英字が主役・和文は静か）
   Cero は「小さい英字ラベル＋大きい和文見出し」、本家はその逆。
   マークアップが .eyebrow(英字) + .h-sec(和文) で本家と1:1に対応しているので、
   **HTMLを触らず**サイズと太さの入れ替えだけで組み替わる。
   ※本家は左寄せ（.section__title に text-align 指定なし）＝中央寄せにはしない。
   ------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-en);
  font-weight:700;
  font-size:var(--tone-en);
  line-height:var(--tone-lh-en);
  letter-spacing:0;
  gap:.3em;
  align-items:center;
}
/* 🔒ブランドの緑ドットは点のまま（em比のままだと見出しと一緒に肥大する） */
.eyebrow::before{
  width:.13em; height:.13em;
  box-shadow:0 0 0 .055em var(--green-soft);
}
.h-sec{
  font-size:var(--tone-jp);
  line-height:var(--tone-lh-jp);
  font-weight:500;
  letter-spacing:0;
}
.section-head{ max-width:none; }
.section-head .eyebrow{ margin-bottom:.35rem; }
.section-head .h-sec{ margin-top:0 !important; }
.section-head .lede{ margin-top:1.5rem; max-width:42em; }

/* -------------------------------------------------------------
   3. ★レイアウトの解体 — 2カラムをやめて「全幅の縦積み」へ
   本家は横に並べない。見出しが全幅で立ち、その下に本体が全幅で続く。
   Cero の .split（1fr 1fr）を1カラムにするだけで、この骨格になる。
   ※セクションの順番・掲載要素は一切変えていない（🔒）。並び方だけ。
   ------------------------------------------------------------- */
.split,
.split--wide-text{
  grid-template-columns:1fr;
  gap:var(--tone-head-gap);
  align-items:start;
}
/* SERVICE は「ビジュアル→コピー」の並びなので、見出しが先に来るよう入れ替える */
.split > .svc-copy{ order:1; }
.split > .svc-visual{ order:2; }

/* ビジュアルは本家の「全幅の帯」に（縦横比を横長へ、幅いっぱい） */
.svc-visual{
  aspect-ratio:auto;
  min-height:clamp(200px, 26vw, 340px);
  width:100%;
}

/* 見出しブロックの直後は本家と同じ間隔を空ける */
.section-head + *{ margin-top:var(--tone-head-gap); }

/* -------------------------------------------------------------
   4. ★カードをやめて「1px罫線のリスト」へ
   本家はトップページでカードUIの語彙を一切使っていない（角丸も影もゼロ、1px罫線だけ）。
   Cero の4カラム/2カラムのカードを、罫線区切りの縦リストに置き換える。
   ＝ここが「シンプルな他社っぽさ」を一番大きく作る。
   ------------------------------------------------------------- */
.pillars,
.feature-grid{
  /* ★.pillars は HTML に grid-template-columns:1fr 1fr が直書きされている（app/index.html:72）
     ＝インラインは通常のCSSより強いので、ここだけ !important で剥がす。
     HTML を触らない方針を保つための最小限の例外。 */
  grid-template-columns:1fr !important;
  gap:0;
  margin-top:var(--tone-head-gap);
}
.pillar,
.feature{
  background:transparent;
  border:0;
  border-bottom:var(--tone-rule);
  border-radius:0;
  padding:1.8rem 0;
  position:relative;
  transition:none;
}
.pillar:first-child,
.feature:first-child{ padding-top:0; }
.pillar:hover,
.feature:hover{ transform:none; border-color:transparent; border-bottom-color:var(--line); }

/* 番号＋見出し＋本文を本家のリスト型（左に見出し・右に本文）へ */
@media (min-width:769px){
  .pillar,
  .feature{
    display:grid;
    grid-template-columns:14rem 1fr;
    gap:2.6rem;
    align-items:start;
  }
  .pillar__no,
  .feature__no{ margin:0; }
  .feature__ic{ margin:0 0 .8rem; }
}

/* NEWS の行も本家の型に（日付は英字・下線1px・hoverで線が伸びる） */
.news-row{
  gap:2.6rem;
  padding:1.8rem 0;
  transition:none;
}
.news-row:hover{ padding-left:0; }
.news-row__date{ font-size:1rem; letter-spacing:0; }

/* -------------------------------------------------------------
   5. hover は「下線が 0 → 100% に伸びる」
   本家 @keyframes moveEnd（width 0%→100%）の翻案。
   色が変わる・浮き上がる ではなく、線が引かれる。
   ------------------------------------------------------------- */
.pillar::after,
.feature::after,
.news-row::after,
.link-arrow::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  height:1px; width:0;
  background:var(--green);
  transition:width .3s var(--ease);
}
.pillar:hover::after,
.feature:hover::after,
.news-row:hover::after,
.link-arrow:hover::after{ width:100%; }

.news-row{ position:relative; }
.link-arrow{
  position:relative;
  font-family:var(--font-en);
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:0;
  border-bottom:1px solid var(--line) !important;
  padding-bottom:.35em;
}
.link-arrow:hover{ gap:.5em; }

/* -------------------------------------------------------------
   6. ヘッダーだけコンテナ幅の例外＝全幅（本家の唯一の例外）
   ------------------------------------------------------------- */
.site-header .container{
  max-width:none;
  padding-inline:clamp(20px, 3vw, 40px);
}
.nav__link,
.nav__cta{ font-family:var(--font-en); letter-spacing:.02em; }

/* -------------------------------------------------------------
   7. フッター — 列見出しは英字 uppercase ＋ 下に 1px 線（本家の型）
   ------------------------------------------------------------- */
.footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(1.6rem,4vw,6.7rem); }
.col-h{
  font-family:var(--font-en);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:var(--step-0);
  padding-bottom:.7rem;
  border-bottom:var(--tone-rule);
  margin-bottom:1.1rem;
}
@media (max-width:768px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------
   8. 本文まわり — 行送りを広く、段落間はちょうど1行分
   ------------------------------------------------------------- */
body{ line-height:var(--tone-lh-jp); }
.lede{
  font-size:var(--tone-jp);
  line-height:var(--tone-lh-jp);
  font-weight:400;
}
.prose p + p,
.legal p + p,
.article p + p{ margin-top:1.875em; }

/* -------------------------------------------------------------
   9. 装飾を落とす — 「シンプル」の実体は "何も足していない" こと
   影を消し、hover で持ち上がるのをやめる。
   ※角丸は残す（ボス指定の範囲外であり、④角ばり版と見分けがつかなくなるため）
   ------------------------------------------------------------- */
.card:hover,
.pillar:hover,
.feature:hover,
.store-badge:hover,
.btn:hover,
.btn:active,
.nav__cta:hover{ transform:none; }
.card,
.card:hover,
.nav__cta:hover{ box-shadow:none; }

/* -------------------------------------------------------------
   10. 文字アニメーション
   本家のトップページに「1文字ずつ」のアニメーションは存在しない（実測：.char 0件、
   それを生成するJSも、順送りの刻みを作るCSSも取得ファイルのどこにも無い）。
   実際に動いているのは **要素単位の順送りフェードアップ**なので、そちらに合わせる。
   ★ electric.js 自体は残す：プリローダーの解除役であり、ヒーロー題字の表示ゲート
     （html.is-ready.fonts-loaded）も担っている。外すと画面が開かない／題字が消える。
   ------------------------------------------------------------- */
[data-hero-title] .split-word,
[data-electric] .split-char,
[data-char-rise] .split-char{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  color:inherit !important;
}

html.js [data-rise],
html.js [data-electric],
html.js [data-char-rise]{
  opacity:0;
  transform:translateY(var(--tone-y));
  filter:none !important;
  transition:opacity var(--tone-dur) var(--ease-out-power2),
             transform var(--tone-dur) var(--ease-out-power2);
  transition-delay:var(--rise-delay,0s);
}
html.js [data-rise].is-inview,
html.js [data-electric].is-inview,
html.js [data-char-rise].is-inview{ opacity:1; transform:none; }

/* 見出しブロックの中は 0.2秒ずつ順送り（本家 breadcrumb-fade-1/2/3 の刻み） */
.section-head > *:nth-child(2){ --rise-delay:var(--tone-step); }
.section-head > *:nth-child(3){ --rise-delay:calc(var(--tone-step) * 2); }
.section-head > *:nth-child(4){ --rise-delay:calc(var(--tone-step) * 3); }

/* main.js 側の .reveal も同じ動きに揃える（下層ページはこちらが使われている） */
html.js .reveal{
  transform:translateY(var(--tone-y));
  transition:opacity var(--tone-dur) var(--ease-out-power2),
             transform var(--tone-dur) var(--ease-out-power2);
}
.reveal-d1{ transition-delay:var(--tone-step); }
.reveal-d2{ transition-delay:calc(var(--tone-step) * 2); }
.reveal-d3{ transition-delay:calc(var(--tone-step) * 3); }
.reveal-d4{ transition-delay:calc(var(--tone-step) * 4); }

/* ヒーロー題字：電流をやめて、同じフェードアップにする */
html.js body.home [data-hero-title]{
  opacity:0;
  transform:translateY(var(--tone-y));
}
@media (prefers-reduced-motion:no-preference){
  html.is-ready.fonts-loaded body.home [data-hero-title]{
    opacity:1; transform:none;
    transition:opacity var(--tone-dur) var(--ease-out-power2),
               transform var(--tone-dur) var(--ease-out-power2);
  }
  html.is-ready.fonts-loaded body.home .hero__mark{
    transition:opacity var(--tone-dur) var(--ease-out-power2);
  }
  html.is-ready.fonts-loaded body.home [data-hero-sub]{
    filter:none;
    transition:opacity var(--tone-dur) var(--ease-out-power2),
               transform var(--tone-dur) var(--ease-out-power2);
    transition-delay:var(--tone-step);
  }
}
@media (prefers-reduced-motion:reduce){
  html.js body.home [data-hero-title]{ opacity:1; transform:none; }
}

/* -------------------------------------------------------------
   11. 下層ページのヒーローは既に本家型（英字大＋和文小）＝太さと字間だけ寄せる
   ここの .eyebrow は h1 と同じ語なので、大きくすると同語が2回巨大に出る → 小さいまま。
   ------------------------------------------------------------- */
.page-hero .eyebrow{
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.22em;
  line-height:1.6;
}
.page-hero .eyebrow::before{ width:.5em; height:.5em; box-shadow:0 0 0 4px var(--green-soft); }
.page-hero__title{
  font-family:var(--font-en);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  font-size:var(--tone-en);
  text-transform:uppercase;
}
.page-hero__jp{
  font-size:var(--tone-jp);
  line-height:var(--tone-lh-jp);
  font-weight:500;
  margin-top:.4rem;
}