@charset "utf-8";
/* ============================================================
   DATA WARE / データウェア・ネット
   共通スタイルシート
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root{
  --bg:        #07080b;
  --bg-2:      #0d1016;
  --surface:   #12161f;
  --surface-2: #191e2a;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  --ink:       #f4f6fa;
  --ink-2:     #b9c1cf;
  --ink-3:     #7b8598;

  --accent:    #2f7bff;
  --accent-2:  #00d8c0;
  --accent-3:  #ff6a3d;
  --grad:      linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Inter", var(--font-jp);

  --max: 1200px;
  --pad: clamp(20px, 5vw, 48px);

  --ease: cubic-bezier(.22,1,.36,1);
  --util-h: 36px;      /* 上段（スクロールで畳まれる） */
  --main-h: 72px;      /* 本体 */
  --header-h: 108px;   /* = util-h + main-h。ページ余白とアンカー位置の基準 */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- 3. レイアウト ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ max-width:1440px; }
.section{ padding-block:clamp(72px,10vw,140px); position:relative; }
.section--line{ border-top:1px solid var(--line); }
.grid{ display:grid; gap:clamp(16px,2.4vw,28px); }
/* グリッドの子は既定 min-width:auto のため、中身（横スクロールする表など）が
   列を押し広げてしまう。0 にして必ず列幅に収める。 */
.grid > *, .cols > *{ min-width:0; }
.center{ text-align:center; }

/* ---------- 4. タイポグラフィ ---------- */
.eyebrow{
  font-family:var(--font-en);
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-2);
  display:inline-flex; align-items:center; gap:10px; line-height:1;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--accent-2); opacity:.7;
}
.h1{ font-size:clamp(36px,6.4vw,76px); font-weight:900; line-height:1.14; letter-spacing:-.02em; }
.h2{ font-size:clamp(28px,4.2vw,52px); font-weight:900; line-height:1.24; letter-spacing:-.01em; }
.h3{ font-size:clamp(19px,2.1vw,26px); font-weight:800; line-height:1.5; }
.lead{ font-size:clamp(15px,1.35vw,18px); color:var(--ink-2); line-height:2.05; }
.small{ font-size:13px; color:var(--ink-3); line-height:1.8; }
.num{ font-family:var(--font-en); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mt-s{ margin-top:16px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:48px; } .mt-xl{ margin-top:72px; }

/* ---------- 5. ボタン ---------- */
.btn{
  --btn-bg:var(--grad); --btn-fg:#04060a;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px;
  font-weight:800; font-size:15px; line-height:1; letter-spacing:.02em;
  background:var(--btn-bg); color:var(--btn-fg);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -10px rgba(47,123,255,.65); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); border:1px solid var(--line-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); box-shadow:none; border-color:var(--ink-3); }
.btn--lg{ padding:20px 40px; font-size:16px; }
.btn--full{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; color:var(--accent-2);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ border-color:currentColor; gap:14px; }

/* ---------- 6. ヘッダー ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.header.is-solid{
  background:rgba(7,8,11,.82); backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
}

/* 上段：資料系ページへの導線。
   ページ最上部では見えていて、スクロールすると畳まれ、ヘッダーは細いバーに戻る。
   （帯を出しっぱなしにするとヒーローの静けさが壊れるため） */
.header__util{
  height:var(--util-h); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center;
  opacity:1; transition:height .45s var(--ease), opacity .3s var(--ease);
}
.header.is-solid .header__util{ height:0; opacity:0; }
.header__util-inner{
  width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:flex-end; gap:clamp(14px,1.8vw,28px);
}
.header__util a{
  font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--ink-3); line-height:1;
  position:relative; padding-block:4px;
  transition:color .25s var(--ease);
}
.header__util a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent-2); transition:width .3s var(--ease);
}
.header__util a:hover,
.header__util a[aria-current="page"]{ color:var(--ink-2); }
.header__util a:hover::after,
.header__util a[aria-current="page"]::after{ width:100%; }

.header__main{ height:var(--main-h); flex-shrink:0; display:flex; align-items:center; }
.header__inner{
  width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:24px;
}
.logo{ display:flex; align-items:center; gap:11px; margin-right:auto; flex-shrink:0; }
.logo__mark{ width:30px; height:30px; flex-shrink:0; }
.logo__text{ display:flex; flex-direction:column; line-height:1.15; }
.logo__en{ font-family:var(--font-en); font-weight:800; font-size:15px; letter-spacing:.08em; }
.logo__jp{ font-size:9.5px; color:var(--ink-3); letter-spacing:.14em; }

.gnav{ display:flex; align-items:center; gap:clamp(14px,1.6vw,28px); }
.gnav a{
  font-size:13.5px; font-weight:700; color:var(--ink-2); position:relative; padding-block:6px;
  transition:color .25s var(--ease);
}
.gnav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--accent-2); transition:width .3s var(--ease);
}
.gnav a:hover{ color:var(--ink); }
.gnav a:hover::after,
.gnav a[aria-current="page"]::after{ width:100%; }
.gnav a[aria-current="page"]{ color:var(--ink); }

.header__cta{ display:flex; align-items:center; gap:10px; }
.header__cta .btn{ padding:11px 20px; font-size:13px; }

.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  position:relative; flex-shrink:0;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:22px; }
.burger span:nth-child(3){ top:27px; }
.is-menu-open .burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2){ opacity:0; }
.is-menu-open .burger span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ドロワー */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--bg-2);
  padding:calc(var(--header-h) + 32px) var(--pad) 48px;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.is-menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer__list{ border-top:1px solid var(--line); }
.drawer__list a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; border-bottom:1px solid var(--line);
  font-size:17px; font-weight:800;
}
.drawer__list a span{ font-family:var(--font-en); font-size:10px; color:var(--ink-3); letter-spacing:.16em; }
.drawer__cta{ display:grid; gap:12px; margin-top:32px; }

/* ---------- 7. 背景演出 ---------- */
.bg-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}
.bg-glow{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px); opacity:.35;
}
.bg-glow--a{ width:52vw; height:52vw; background:var(--accent); top:-14vw; right:-10vw; }
.bg-glow--b{ width:44vw; height:44vw; background:var(--accent-2); bottom:-16vw; left:-12vw; opacity:.22; }
.bg-noise{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 8. ヒーロー（トップ） ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 48px) 96px; overflow:hidden;
}
.hero__inner{ position:relative; z-index:2; width:100%; }
/* ヒーロー背景画像。左側に見出しが乗るので、スクリムで左を落として可読性を確保する */
.hero__bg{ position:absolute; inset:-8% 0 auto 0; height:116%; z-index:0; display:block; pointer-events:none; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:70% 50%;
  transform:translate3d(0, var(--py, 0px), 0) scale(1.04);
  will-change:transform;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7,8,11,.86) 38%, rgba(7,8,11,.30) 72%, rgba(7,8,11,.55) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
}
.hero__title{ font-size:clamp(40px,8.2vw,104px); font-weight:900; line-height:1.08; letter-spacing:-.03em; }
.hero__title .l{ display:block; overflow:hidden; }
.hero__title .l > span{ display:block; }
.hero__sub{ max-width:44ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-top:clamp(48px,7vw,80px);
}
.hero__stats--3{ grid-template-columns:repeat(3,1fr); }
.hero__stat{
  background:rgba(13,16,22,.72); backdrop-filter:blur(8px); padding:24px 20px;
  position:relative; display:block;
  transition:background .35s var(--ease);
}
.hero__stat dt{ font-size:11.5px; color:var(--ink-3); letter-spacing:.1em; font-weight:700; }
.hero__stat dd{ margin:6px 0 0; font-size:clamp(24px,3vw,38px); }
.hero__stat dd small{ font-size:.5em; font-weight:700; margin-left:3px; color:var(--ink-2); }

/* 数字タイルがリンクのとき：普段は静かに、ホバーで行き先を出す */
a.hero__stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
a.hero__stat:hover{ background:rgba(19,24,34,.86); }
a.hero__stat:hover::before{ transform:scaleX(1); }
.hero__stat__go{
  display:block; margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--accent-2); opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hero__stat__go::after{ content:" →"; }
a.hero__stat:hover .hero__stat__go,
a.hero__stat:focus-visible .hero__stat__go{ opacity:1; transform:none; }
/* タッチ端末はホバーが無いので常時出す */
@media (hover:none){
  .hero__stat__go{ opacity:1; transform:none; }
}
.hero__scroll{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2;
  font-family:var(--font-en); font-size:10px; letter-spacing:.2em; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(to bottom, var(--accent-2), transparent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* マーキー */
.marquee{
  overflow:hidden; border-block:1px solid var(--line); padding-block:18px;
  background:var(--bg-2); position:relative; z-index:2;
}
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 38s linear infinite; }
.marquee__track > span{
  font-family:var(--font-en); font-size:clamp(20px,2.6vw,32px); font-weight:800;
  letter-spacing:.04em; color:transparent; -webkit-text-stroke:1px var(--line-2);
  padding-inline:24px; white-space:nowrap;
}
.marquee__track > span em{ font-style:normal; color:var(--accent-2); -webkit-text-stroke:0; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 9. 下層ページヘッダー ---------- */
.phead{
  position:relative; overflow:hidden;
  padding-block:calc(var(--header-h) + clamp(64px,9vw,120px)) clamp(56px,8vw,96px);
  border-bottom:1px solid var(--line);
}
.phead__inner{ position:relative; z-index:2; }
.phead__en{
  font-family:var(--font-en); font-weight:900; letter-spacing:-.02em;
  font-size:clamp(52px,11vw,150px); line-height:.92;
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  position:absolute; right:var(--pad); bottom:-.14em; z-index:1; pointer-events:none;
  user-select:none; white-space:nowrap; opacity:.55;
}
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--accent-2); }
.breadcrumb li:not(:last-child)::after{ content:"／"; margin-left:8px; opacity:.5; }
.breadcrumb li{ display:inline-flex; align-items:center; }

/* ---------- 10. カード ---------- */
.card{
  position:relative; isolation:isolate;
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:clamp(24px,3vw,36px); overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.card > *{ position:relative; z-index:1; }
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:var(--grad); opacity:0; transition:opacity .4s var(--ease);
}
/* カーソル追従のグロー（JSが --mx / --my を更新する） */
.card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(47,123,255,.20), rgba(0,216,192,.07) 40%, transparent 68%);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); background:var(--surface-2); }
.card:hover::before{ opacity:1; }
.card:hover::after{ opacity:1; }
.card__no{
  font-family:var(--font-en); font-size:12px; font-weight:800; letter-spacing:.14em;
  color:var(--accent-2);
}
.card__icon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:rgba(47,123,255,.12); border:1px solid rgba(47,123,255,.28); color:var(--accent-2);
  margin-bottom:22px;
}
.card__icon svg{ width:24px; height:24px; }
.card p{ color:var(--ink-2); font-size:14.5px; line-height:1.95; }

.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.cards-4{ grid-template-columns:repeat(4,1fr); }

/* 2カラムの組み（本文＋図など）。インラインstyleで書くとメディアクエリに
   勝ってしまいモバイルで潰れないので、必ずこのクラスを使う。 */
.cols{ display:grid; gap:clamp(32px,5vw,72px); }
.cols--2{ grid-template-columns:1fr 1fr; }
.cols--wide-l{ grid-template-columns:1.7fr 1fr; }
.cols--hero{ grid-template-columns:1.1fr .9fr; }
.cols--3{ grid-template-columns:repeat(3,1fr); }
.cols--top{ align-items:start; }
.cols--center{ align-items:center; }
@media (max-width:860px){
  .cols--2, .cols--wide-l, .cols--hero, .cols--3{ grid-template-columns:1fr; }
}

/* ---------- 11. 特徴（大） ---------- */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center;
}
.feature + .feature{ margin-top:clamp(64px,9vw,130px); }
.feature:nth-child(even) .feature__media{ order:-1; }
.feature__media{
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--surface); aspect-ratio:4/3;
}
.feature__media picture{ display:block; width:100%; height:100%; }
/* 枠より画像を大きく取り、スクロール量に応じて枠の中で動かす（JSが --py を更新） */
.feature__media img{
  width:100%; height:120%; object-fit:cover;
  position:absolute; inset:-10% 0 auto 0;
  transform:translate3d(0, var(--py, 0px), 0) scale(var(--pz, 1));
  transition:scale .8s var(--ease);
  will-change:transform;
}
.feature__media:hover img{ --pz:1.06; }
.feature__no{
  font-family:var(--font-en); font-weight:900; font-size:13px; letter-spacing:.16em;
  color:var(--accent-2); margin-bottom:14px; display:block;
}

/* 画像プレースホルダ */
.ph{
  position:absolute; inset:0; display:grid; place-items:center; gap:6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--surface-2);
  color:var(--ink-3); text-align:center; padding:20px;
}
.ph__code{ font-family:var(--font-en); font-size:11px; letter-spacing:.14em; color:var(--accent-2); }
.ph__label{ font-size:12px; }

/* ---------- 12. テーブル ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.tbl{ min-width:520px; font-size:14.5px; }
.tbl th,.tbl td{ padding:16px 20px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl thead th{
  background:var(--surface-2); font-size:12px; letter-spacing:.1em; color:var(--ink-2);
  font-weight:800; white-space:nowrap; position:sticky; top:0;
}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .25s; }
.tbl tbody tr:hover{ background:rgba(255,255,255,.03); }
.tbl--info th{ width:30%; color:var(--ink-2); font-weight:700; white-space:nowrap; background:rgba(255,255,255,.02); }
.tbl .price{ font-family:var(--font-en); font-weight:800; font-variant-numeric:tabular-nums; }
.tbl .price em{ font-style:normal; color:var(--accent-2); }

/* ---------- 13. アコーディオン ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; display:flex; align-items:flex-start; gap:16px; text-align:left;
  padding:24px 4px; font-size:16px; font-weight:800; line-height:1.7;
  transition:color .25s;
}
.acc__q:hover{ color:var(--accent-2); }
.acc__q .qmark{ font-family:var(--font-en); color:var(--accent-2); font-weight:900; flex-shrink:0; }
.acc__q .sign{ margin-left:auto; position:relative; width:14px; height:14px; flex-shrink:0; margin-top:8px; }
.acc__q .sign::before,.acc__q .sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease);
}
.acc__q .sign::after{ transform:rotate(90deg); }
.acc__item.is-open .sign::after{ transform:rotate(0); }
.acc__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.acc__item.is-open .acc__a{ grid-template-rows:1fr; }
.acc__a > div{ overflow:hidden; }
.acc__a p{
  color:var(--ink-2); font-size:14.5px; padding:0 4px 26px 34px; line-height:1.95;
}

/* ---------- 14. ステップ ---------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px);
  padding-block:clamp(28px,4vw,44px); border-bottom:1px solid var(--line); position:relative;
}
.steps .step:first-child{ border-top:1px solid var(--line); }
.step__no{
  font-family:var(--font-en); font-weight:900; font-size:clamp(30px,4vw,50px);
  line-height:1; color:transparent; -webkit-text-stroke:1px var(--line-2);
  transition:-webkit-text-stroke-color .4s;
}
.step__no::before{ content:"0" counter(s); }
.step:hover .step__no{ -webkit-text-stroke-color:var(--accent-2); }

/* ---------- 14.5 全幅の写真帯 ---------- */
.band{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(320px, 46vw, 560px);
  display:flex; align-items:center;
  border-block:1px solid var(--line);
}
.band__media{ position:absolute; inset:0; z-index:0; display:block; }
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* 左にコピーが乗るので、左側を落として可読性を確保する */
.band__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(7,8,11,.90) 34%, rgba(7,8,11,.42) 62%, rgba(7,8,11,.20) 100%),
    linear-gradient(to bottom, rgba(7,8,11,.55) 0%, transparent 30%, rgba(7,8,11,.55) 100%);
}
.band__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(48px,7vw,88px); }
.band__copy{ max-width:34ch; }
.band__lead{ max-width:40ch; }
@media (max-width:860px){
  .band{ min-height:0; }
  .band__media img{ object-position:72% 50%; }
  .band__media::after{
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(7,8,11,.88) 55%, rgba(7,8,11,.55) 100%),
      linear-gradient(to bottom, rgba(7,8,11,.6) 0%, transparent 40%, rgba(7,8,11,.6) 100%);
  }
}

/* ---------- 14.8 コンテンツ一覧 ----------
   箱を並べると目録のようになり重いので、サイトの基調である細い罫線で組む。 */
.idx{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,56px); }
.idx__h{
  font-size:12.5px; font-weight:800; color:var(--ink-2); letter-spacing:.06em;
  display:flex; align-items:baseline; gap:9px;
}
.idx__h i{
  font-family:var(--font-en); font-style:normal; font-size:11px; font-weight:800;
  color:var(--accent-2); letter-spacing:.08em;
}
.idx__list{ margin-top:14px; border-top:1px solid var(--line); }
.idx__item{
  position:relative; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  padding:17px 2px; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.idx__item::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--accent-2); transition:width .4s var(--ease);
}
.idx__item:hover{ padding-left:12px; }
.idx__item:hover::before{ width:100%; }
.idx__item h3{ font-size:15px; font-weight:800; line-height:1.5; transition:color .3s var(--ease); }
.idx__item:hover h3{ color:var(--accent-2); }
.idx__item p{ font-size:12px; color:var(--ink-3); line-height:1.75; margin-top:5px; }
.idx__item .arw{ color:var(--ink-3); transition:color .3s var(--ease), transform .3s var(--ease); }
.idx__item:hover .arw{ color:var(--accent-2); transform:translateX(4px); }
.idx__num{
  font-family:var(--font-en); font-size:10.5px; font-weight:800; color:var(--accent-2);
  letter-spacing:.06em; display:block; margin-bottom:5px;
}
@media (max-width:960px){ .idx{ grid-template-columns:1fr; gap:36px; } }

/* ---------- 15. CTA帯 ---------- */
.cta{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
.cta__inner{ position:relative; z-index:2; text-align:center; padding-block:clamp(72px,10vw,128px); }
.cta__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.cta__note{ font-size:12px; color:var(--ink-3); margin-top:22px; }

/* ---------- 16. フッター ---------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,88px) 32px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 2.6fr; gap:clamp(32px,5vw,64px); }
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer__h{
  font-family:var(--font-en); font-size:11px; font-weight:800; letter-spacing:.16em;
  color:var(--ink-3); margin-bottom:16px;
}
.footer__nav li + li{ margin-top:11px; }
.footer__nav a{ font-size:13.5px; color:var(--ink-2); transition:color .25s, padding-left .25s var(--ease); }
.footer__nav a:hover{ color:var(--accent-2); padding-left:5px; }
.footer__info{ font-size:13px; color:var(--ink-3); line-height:1.9; }
.footer__tel{
  font-family:var(--font-en); font-size:24px; font-weight:800; color:var(--ink);
  letter-spacing:.02em; display:inline-block; margin-top:6px;
}
.footer__bottom{
  margin-top:clamp(40px,6vw,64px); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:20px; font-size:12px; color:var(--ink-3); }
.footer__legal a:hover{ color:var(--accent-2); }
.copy{ font-family:var(--font-en); font-size:11px; color:var(--ink-3); letter-spacing:.06em; }

/* ---------- 16.5 全幅の帯（フルブリード画像） ---------- */
.band{
  position:relative; overflow:hidden;
  min-height:clamp(340px, 54vw, 640px);
  display:flex; align-items:center;
  border-block:1px solid var(--line);
}
.band picture{ position:absolute; inset:0; display:block; z-index:0; }
.band img{
  position:absolute; inset:-12% 0 auto 0;
  width:100%; height:124%; object-fit:cover;
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
.band::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.72) 45%, rgba(7,8,11,.30) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}
.band__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(56px,8vw,90px); }
.band__inner .h2{ max-width:18ch; }
.band__inner .lead{ max-width:46ch; }
@media (max-width:640px){
  .band::after{
    background:
      linear-gradient(90deg, rgba(7,8,11,.90) 0%, rgba(7,8,11,.74) 100%),
      linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
  }
}

/* ---------- 16.6 スクロール進捗バー（JSが挿入） ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:101; pointer-events:none;
}
.progress__bar{
  display:block; height:100%; width:100%; background:var(--grad);
  transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 12px rgba(0,216,192,.5);
}

/* ---------- 17. その他パーツ ---------- */
.tag{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
  border:1px solid var(--line-2); color:var(--ink-2); line-height:1.6;
  transition:border-color .3s, color .3s;
}
.tag:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.tag--free{ border-color:var(--accent-2); color:#04060a; background:var(--accent-2); font-weight:800; }
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(0,216,192,.10); border:1px solid rgba(0,216,192,.3); color:var(--accent-2);
  font-size:12.5px; font-weight:700; line-height:1;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-2); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.notes li{
  position:relative; padding-left:20px; font-size:13px; color:var(--ink-3); line-height:1.9;
}
.notes li::before{ content:"※"; position:absolute; left:0; color:var(--accent-2); }
.notes li + li{ margin-top:6px; }

.checklist li{
  position:relative; padding-left:30px; font-size:14.5px; color:var(--ink-2); line-height:1.9;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.6em; width:16px; height:9px;
  border-left:2px solid var(--accent-2); border-bottom:2px solid var(--accent-2);
  transform:rotate(-45deg);
}
.checklist li + li{ margin-top:12px; }

.divider{ height:1px; background:var(--line); border:0; margin-block:clamp(40px,6vw,72px); }

/* 定義リスト（会社概要など） */
.deflist{ border-top:1px solid var(--line); }
.deflist__row{
  display:grid; grid-template-columns:clamp(120px,22%,220px) 1fr; gap:16px;
  padding:20px 4px; border-bottom:1px solid var(--line);
}
.deflist__row dt{ font-size:13px; font-weight:800; color:var(--ink-3); letter-spacing:.06em; }
.deflist__row dd{ margin:0; font-size:15px; color:var(--ink); }

/* ---------- 18. スクロール演出 ---------- */
/* JSが有効なときだけ隠す。JS停止・エラー時は最初から表示されたままになる */
.js [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js [data-reveal="mask"]{ opacity:1; transform:none; overflow:hidden; }
.js [data-reveal="mask"] > *{
  display:block; transform:translateY(105%);
  transition:transform 1s var(--ease); transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="mask"].is-in > *{ transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js [data-reveal="mask"] > *{ transform:none; }
}

/* ---------- 19. レスポンシブ ---------- */
@media (max-width:1080px){
  :root{ --header-h:var(--main-h); }   /* 上段を隠すぶん低くなる */
  .header__util{ display:none; }       /* 中身はドロワーに入っている */
  .gnav{ display:none; }
  .burger{ display:block; }
  .header__cta{ display:none; }
  .cards-4{ grid-template-columns:repeat(2,1fr); }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .cards-3{ grid-template-columns:1fr; }
  .feature{ grid-template-columns:1fr; }
  .feature:nth-child(even) .feature__media{ order:0; }
}
@media (max-width:640px){
  :root{ --header-h:64px; }
  body{ font-size:15px; }
  .cards-2,.cards-4{ grid-template-columns:1fr; }
  .footer__nav{ grid-template-columns:1fr 1fr; }
  .deflist__row{ grid-template-columns:1fr; gap:4px; }
  .step{ grid-template-columns:1fr; gap:8px; }
  .btn{ width:100%; }
  .hero__cta .btn{ width:100%; }
  .phead__en{ font-size:64px; opacity:.35; }
}