/* ARAVISTO LP
 * 配色はモノクロ。色相を一切使わず、明度と面積だけで階層をつくる。
 * 色が使えないぶん、強調は「余白・線の太さ・文字の太さ」で行うこと。
 * 外部依存は Google Fonts のみ。画像アセットは持たない(KV は SVG/キャンバス)。 */

:root {
  --bg:        #0a0a0a;   /* ページ地 */
  /* 帯の地色。以前は一段明るくして節を分けていたが、明度差が「そこだけ灰色」に
     見えたため、ページ全体を同じ黒で統一した。節の切れ目は地色ではなく
     境界線(--line-soft)と余白で示す。 */
  --bg-alt:    #0a0a0a;
  --panel:     #171717;
  --panel-2:   #1f1f1f;
  --line:      #303030;
  --line-soft: #222222;

  --text:      #f2f2f2;
  --text-mid:  #a9a9a9;
  --text-dim:  #767676;

  --accent:      #ffffff;
  --accent-soft: #e8e8e8;
  --accent-2:    #b5b5b5;
  /* 警告は赤ではなく、白+縁+太字で示す(モノクロでは色相が使えない) */
  --danger:      #ffffff;
  --on-accent:   #0a0a0a;   /* 白い面の上に載る文字 */

  --radius:    14px;
  --radius-lg: 20px;
  --shell:     1160px;

  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en), var(--font-ja);
  font-size: 16px;
  line-height: 1.85;                      /* 日本語は行間を広めに取らないと詰まる */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.4; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell-narrow { max-width: 720px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 8px;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; letter-spacing: .02em; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* 白い面に黒い文字。モノクロでは、これが一番強い「押せる」の表現になる */
.btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #ededed 70%, #d8d8d8 100%);
  color: var(--on-accent);
  box-shadow: 0 8px 24px -14px rgba(255,255,255,.5);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(255,255,255,.7);
}
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { border-color: var(--line); color: var(--text-mid); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--accent-soft); color: var(--text); background: rgba(255,255,255,.10); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 14px;
}

/* ---------------------------------------------- 背景の蜘蛛の巣(ところどころ) */
/* ページ全体の地に、隅の巣を薄く散らす。糸の濃さは color で一箇所にまとめて
   おき、増減の判断を1行で済ませられるようにする。
   z-index: -1 は「本文より奥、body の地より手前」に置くため。0 以上にすると
   位置指定のないセクションの文字より前に出て、読む邪魔になる。
   節に地色があるところ(section-alt / kv など)では隠れる ——
   それが「ところどころ」の見え方になる。 */
body { position: relative; }
.web-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.page-webs {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  color: rgba(255, 255, 255, .055);
}
.page-webs .pw { position: absolute; width: 220px; height: 220px; }
/* 隅の巣なので、右側は反転して隅の向きを合わせる。大きさと角度を少しずつ
   変えているのは、同じ図形の繰り返しに見えないようにするため。 */
.pw-1 { top:  3%; right: 0; transform: scaleX(-1); }
.pw-2 { top: 21%; left:  0; width: 168px; height: 168px; transform: rotate(-7deg); }
.pw-3 { top: 39%; right: 0; width: 262px; height: 262px; transform: scaleX(-1) rotate(9deg); }
.pw-4 { top: 57%; left:  0; width: 196px; height: 196px; transform: rotate(5deg); }
.pw-5 { top: 74%; right: 0; width: 184px; height: 184px; transform: scaleX(-1) rotate(-6deg); }
.pw-6 { top: 91%; left:  0; width: 232px; height: 232px; }
/* 狭い画面では本文に近づきすぎるので、数を減らして小さくする */
@media (max-width: 860px) {
  .page-webs .pw { width: 132px; height: 132px; }
  .pw-3, .pw-5 { display: none; }
}

/* ---------------------------------------------------------------- ヘッダー */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-word {
  font-family: var(--font-en); font-weight: 700; font-size: 19px; letter-spacing: .14em;
}
.brand-mark { display: grid; place-items: center; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav > a { font-size: 15px; color: var(--text-mid); transition: color .18s; }
.nav > a:hover { color: var(--text); }
.nav .nav-cta { color: var(--on-accent); }

.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: 10px; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

/* ---------------------------------------------------------------- KV */
.kv { position: relative; overflow: hidden; padding: 92px 0 100px; }
.kv-bg { position: absolute; inset: 0; z-index: 0; }
.kv-pitch { width: 100%; height: 100%; opacity: .9; }
.kv::after {                                  /* 下端をページ地へ溶かす */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(to bottom, rgba(10,10,10,0), var(--bg));
  pointer-events: none;
}
.kv-inner { position: relative; z-index: 1; }

.kv-title {
  font-size: clamp(34px, 6.2vw, 66px);
  letter-spacing: -.01em; line-height: 1.28; margin-bottom: 26px;
  font-family: var(--font-ja);
}
.kv-lead {
  max-width: 620px; color: var(--text-mid); font-size: clamp(15px, 1.5vw, 17px);
  font-family: var(--font-ja);
}
.kv-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.kv-facts {
  display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 64px 0 0; padding: 28px 0 0;
  list-style: none; border-top: 1px solid var(--line-soft);
}
/* 数字と単位は1行に固定する(nowrap)。折り返すと数字が次の語に係って
   別の意味になる(「15」+「選手を捉える」→「15選手」と読める)。 */
.kv-facts .fact-value {
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.kv-facts strong {
  font-family: var(--font-en); font-size: 34px; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kv-facts .fact-unit {
  font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--font-ja);
}
.kv-facts .fact-desc {
  font-size: 12.5px; color: var(--text-dim); font-family: var(--font-ja);
  line-height: 1.6; margin-top: 2px;
}

/* KV のアニメーションは控えめに。動きが主役になると読ませたい文が負ける */
.kv-dots circle { animation: pulse 4.2s ease-in-out infinite; }
.kv-dots circle:nth-child(2n) { animation-delay: -1.4s; }
.kv-dots circle:nth-child(3n) { animation-delay: -2.6s; }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.kv-ball { animation: drift 9s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(28px, -14px); }
}

/* ブランドページの1画面目は ARAVISTO だけ。文章を並べると、蜘蛛が書き終わる
   までのあいだ視線が二か所に散る。本文は次の画面(#intro)から出す。
   ヘッダー(72px)は追従だが場所は取るので、その分を引いてちょうど1画面。
   svh を使うのは、モバイルでURLバーが伸縮するたび高さが跳ねないようにするため
   (dvh だと中央のロゴがスクロール中に上下する)。 */
.kv-brand {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  display: grid; place-items: center; padding: 0;
}
.kv-intro .kv-lead { max-width: 660px; }
.kv-intro .kv-title { margin-bottom: 26px; }
.kv-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 40%, rgba(255,255,255,.09), transparent 70%),
    radial-gradient(40% 45% at 78% 22%, rgba(255,255,255,.05), transparent 70%);
}

/* ---- 蜘蛛が糸で ARAVISTO を書く ---- */
.silk {
  position: relative; width: 100%; height: clamp(170px, 24vw, 280px);
  margin: 4px 0 30px;
}
.silk-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* 糸。細く、わずかに光を含ませる */
.silk-svg .stroke {
  stroke: #ffffff; stroke-width: 2.6;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.45));
}
/* 降下・退出のときに垂れる縦糸 */
.dragline { stroke: #ffffff; stroke-width: 1; opacity: 0; }
/* 字画から字画へ渡るときの、たるんだ糸 */
.thread-travel { stroke: rgba(255,255,255,.28); stroke-width: 1; }

.spider { fill: #ffffff; }
.spider-legs path {
  fill: none; stroke: #ffffff; stroke-width: 1.15; stroke-linecap: round;
  transform-origin: 0 0;
  animation: crawl .42s ease-in-out infinite alternate;
}
.spider-legs path:nth-child(2n) { animation-delay: -.21s; }
@keyframes crawl {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}

/* 文字の実体。SVG が動いているあいだは見せない(二重に見えるため)が、
   DOM からは外さない。JS 無効・SVG 非対応のときはこれが出る。 */
.silk-word {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(38px, 8.6vw, 104px); letter-spacing: .06em; line-height: 1;
  display: flex; align-items: center; height: 100%;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.silk.is-drawn .silk-word {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- スクロールで文字が転がって消える ---- */
/* ヒーローを留めるのは、JS が動いていて、かつ動きを減らす設定でないときだけ
   (印は spider.js が付ける)。印が無ければ .kv-pin はただの入れ物のままで、
   高さも付かないので、通常のスクロールでそのまま次の節へ進める。
   固定区間の長さは視口の高さで決まるため、高さは JS が px で入れる。 */
.js-roll .kv-brand { position: sticky; top: 72px; }

/* 転がりが始まったら蜘蛛と糸は引く(文字だけが転がって見えるように)。
   透明度そのものは JS が入れる。ここでは、書き終えたあとに限って
   変化に時間を持たせる — 執筆中に掛けると、糸の濃さの切り替わりが
   遅れて滲む。 */
.silk.is-still .spider,
.silk.is-still .dragline,
.silk.is-still .thread-travel { transition: opacity .35s ease; }

/* ---- スクロールで現れる ---- */
/* 隠すのは、html に .js-reveal が付いているときだけ。この印は
   IntersectionObserver がある場合に限って head で付く。JS が落ちた・
   読み込まれなかった・非対応、のいずれでも本文はそのまま見える。
   初期状態は必ず「見える」側に倒しておく(隠したまま出せなくなるのが最悪)。 */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
}
/* 動きを減らす設定では、位置ずらしを使わず即座に出す。冒頭の全体規則で
   transition は無効化されるので、is-in が付いた瞬間に不透明になる。 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { transform: none; }
}

.scroll-cue {
  /* 転がりが始まると JS が透明度を下げる。促す必要がもう無いのに残ると、
     転がっている文字と目線を取り合う。 */
  transition: opacity .3s ease;
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 14px;
  display: grid; justify-items: center; padding-top: 8px; z-index: 2;
}
.scroll-cue span {
  display: block; width: 3px; height: 8px; border-radius: 2px; background: var(--accent-soft);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } }

/* ---------------------------------------------------------------- セクション */
.section { padding: 104px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.section-title {
  font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 20px; font-family: var(--font-ja);
}
.section-lead {
  max-width: 720px; color: var(--text-mid); font-family: var(--font-ja);
  font-size: clamp(15px, 1.4vw, 16.5px);
}
.section-lead strong { color: var(--text); font-weight: 600; }

/* 主張を1つだけ置く引用ブロック。ビジョンの締めに使う */
.statement {
  margin: 64px 0 0; padding: 36px 0 0; border-top: 1px solid var(--line-soft);
  font-family: var(--font-ja); font-size: clamp(17px, 2.2vw, 23px); line-height: 2;
  font-weight: 500; color: var(--text); max-width: 860px;
}

/* ---------------------------------------------------------------- プロダクト */
.products {
  display: grid; gap: 24px; margin-top: 52px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.product {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 34px 30px 30px; overflow: hidden;
}
.product::before {                            /* 上辺のアクセントライン */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .8;
}
.product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.product-kicker {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 6px;
}
.product-name { font-family: var(--font-en); font-size: 26px; letter-spacing: .06em; }
.product-name em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.badge {
  flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  letter-spacing: .04em;
}
.badge-live { background: rgba(255,255,255,.12); color: #e8e8e8; border: 1px solid rgba(255,255,255,.28); }

.product-desc {
  color: var(--text-mid); font-size: 14.5px; margin: 18px 0 24px; font-family: var(--font-ja);
}

.feature-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
.feature-list li {
  position: relative; padding-left: 26px; font-size: 14px; color: var(--text-mid);
  font-family: var(--font-ja); line-height: 1.75;
}
.feature-list li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px;
  border-radius: 2px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.feature-list strong { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

/* ---- ブランドページの概要カード(詳細は各プロダクトページへ) ---- */
/* 左右2カラムをやめて上下に積む。行の外側に巣ぶんの列を取り、そこが蜘蛛の
   通り道になる(LAB は右、EYE は左)。カードは1枚が横長になる。 */
.products-brief { grid-template-columns: 1fr; gap: 30px; }
.product-brief {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 38px 32px 32px; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.product-brief:hover { transform: translateY(-4px); border-color: var(--line); }
.product-brief:hover .arrow { transform: translateX(4px); }
.product-brief .product-name { margin-bottom: 16px; }
.product-brief-lead {
  color: var(--text-mid); font-size: 15px; font-family: var(--font-ja); margin-bottom: 28px;
}
.product-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-soft); font-size: 14.5px; font-weight: 600; font-family: var(--font-ja);
}
.product-link .arrow { transition: transform .2s ease; }

/* ---- ブロックの外側に MacBook 風の画面を並べる ---- */
/* 画像は本番アプリの実画面。枠は CSS だけで作る(画像アセットを増やさない)。
   出し入れは main.js の .reveal に任せているので、ここに動きは持たせない。 */
.product-row { display: grid; gap: 32px; align-items: center; }
.product-row[data-media-side="right"] { grid-template-columns: minmax(0, 1fr) 420px; }
.product-row[data-media-side="left"]  { grid-template-columns: 420px minmax(0, 1fr); }
/* 画面は DOM 上つねにカードより先。どちらの列に置くかは側で決める
   (装飾で aria-hidden なので、読み上げ順はカードから始まる)。 */
.product-row[data-media-side="right"] .device        { grid-column: 2; grid-row: 1; }
.product-row[data-media-side="right"] .product-brief { grid-column: 1; grid-row: 1; }
.product-row[data-media-side="left"]  .device        { grid-column: 1; grid-row: 1; }
.product-row[data-media-side="left"]  .product-brief { grid-column: 2; grid-row: 1; }

.device { width: 100%; }
/* 画面。枠は上下で太さを変える(下辺が厚いのがノートPCの見え方) */
.device-screen {
  border: 9px solid #2b2b2e; border-bottom-width: 13px;
  border-radius: 13px; background: #000; overflow: hidden;
  box-shadow: 0 22px 44px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
}
.device-shot { display: block; width: 100%; height: auto; }
/* 実画面が入るまでの仮。真っ黒だと壊れて見えるので、字だけ置く */
/* 天板の手前側。画面より横に張り出させると、閉じた面が見えて厚みが出る */
.device-base {
  position: relative; height: 11px; margin: 0 -5.5%;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(#3a3a3d, #202023);
}
.device-base::after {                        /* 開口部のくぼみ */
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 13%; height: 4px; border-radius: 0 0 4px 4px; background: #17171a;
}


/* ---- 本文の節で、蜘蛛が振り子のように揺れて何度も顔を出す ---- */
/* 節を切り抜くのは、右へ振り切ったときに蜘蛛が節の外へ出るため
   (切り抜かないと画面に横スクロールが生まれる)。 */
.kv-intro { position: relative; overflow: hidden; }
.intro-swing {
  /* 本文コピー(最大 660px、.shell 1160px の左寄せ)の右端から外へ離す。
     こちらも割合ではなく距離で決めて、幅によらず間隔を保つ。 */
  position: absolute; top: 0; right: max(2%, calc(50% - 580px + 40px)); z-index: 1;
  transform-origin: 50% 0;              /* 糸の結び目(上端中央)を軸に振る */
  pointer-events: none;
  animation: intro-swing 6.6s cubic-bezier(.42, 0, .58, 1) infinite;
}
/* 右へ振り切った位置では節の外に隠れ、左へ戻るときに顔を出す。
   両端で少し粘るのは、振り子が折り返しで遅くなるのと同じ。 */
@keyframes intro-swing {
  0%, 100% { transform: rotate(64deg); }
  44%, 56% { transform: rotate(-15deg); }
}
/* 対になる左側。振れる向きが逆なので、回転も絵柄も反転させる。
   本文側と同じ周期にすると左右が同時に顔を出して落ち着かないので、
   周期を少しずらしてある。 */
.cta-band { position: relative; overflow: hidden; }
/* 置き場所は割合ではなく**本文の列からの距離**で決める。CTA の本文は
   .shell-narrow(720px) が中央にあるので、その左端(50% - 360px)からさらに
   外へ 190px 出す。こうすると画面幅が変わっても本文との間隔が一定に保たれる
   (割合指定だと、幅が狭いほど本文が中央へ寄って間隔が詰まり、文字に掛かる)。
   糸を短くしたぶん振れ幅も小さくなるので、この距離で文字とは十分に離れる。 */
.intro-swing.swing-left {
  right: auto;
  left: calc(50% - 360px - 240px);
  animation-name: intro-swing-left;
  animation-duration: 7.4s;
}
.intro-swing.swing-left svg { transform: scaleX(-1); }
@keyframes intro-swing-left {
  0%, 100% { transform: rotate(-64deg); }
  44%, 56% { transform: rotate(15deg); }
}

.swing-thread { stroke: rgba(255,255,255,.30); stroke-width: 1.1; }
.swing-spider { fill: #ffffff; }
.swing-spider .spider-legs path {
  fill: none; stroke: #ffffff; stroke-width: 1.15; stroke-linecap: round;
  transform-origin: 0 0;
  animation: crawl .42s ease-in-out infinite alternate;   /* ヒーローと同じ脚 */
}
.swing-spider .spider-legs path:nth-child(2n) { animation-delay: -.21s; }

/* 本文に重ねる装飾なので、読む邪魔になる幅では出さない。
   動きを減らす設定でも出さない(止まった蜘蛛が本文に被るだけになる)。 */
@media (max-width: 1080px) { .intro-swing { display: none; } }
/* CTA 側は本文が中央 720px なので、左右の余白が本文側より小さい。
   left の計算値が負に回り込む幅では出さない。 */
@media (max-width: 1200px) { .intro-swing.swing-left { display: none; } }
@media (prefers-reduced-motion: reduce) { .intro-swing { display: none; } }

/* ---------------------------------------------------------------- 製品ページ */
.product-hero { padding: 76px 0 84px; border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 120% at 20% 0%, rgba(255,255,255,.16), transparent 65%),
    var(--bg);
}
.crumbs {
  display: flex; gap: 10px; align-items: center; font-size: 13px;
  color: var(--text-dim); margin-bottom: 22px; font-family: var(--font-ja);
}
.crumbs a { color: var(--text-mid); }
.crumbs a:hover { color: var(--accent-soft); }

.product-hero-title {
  font-family: var(--font-en); font-size: clamp(34px, 5.6vw, 58px);
  letter-spacing: .04em; margin: 6px 0 22px;
}
.product-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.product-hero-lead {
  max-width: 680px; color: var(--text-mid); font-family: var(--font-ja);
  font-size: clamp(15px, 1.5vw, 17px);
}
.product-hero .kv-facts { margin-top: 52px; }

/* 現在地のナビ項目 */
.nav > a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- 機能ブロック ---- */
.feature-blocks { margin-top: 52px; display: grid; gap: 2px; }
.feature-block {
  display: grid; grid-template-columns: 92px 1fr; gap: 8px;
  padding: 34px 0; border-top: 1px solid var(--line-soft);
}
.feature-block:last-child { border-bottom: 1px solid var(--line-soft); }
.feature-num {
  font-family: var(--font-en); font-size: 15px; font-weight: 700; letter-spacing: .08em;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 5px;
}
.feature-block h3 { font-size: 19px; margin-bottom: 12px; font-family: var(--font-ja); }
.feature-block p {
  color: var(--text-mid); font-size: 15px; font-family: var(--font-ja); max-width: 720px;
}
.feature-block p strong { color: var(--text); font-weight: 600; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.tag-list li {
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-ja);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); color: var(--text-mid);
}

/* ---- 使い方のステップ ---- */
.flow-steps {
  list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  counter-reset: step;
}
.flow-steps li {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px 24px;
}
.flow-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25);
  color: var(--accent-soft); font-family: var(--font-en); font-weight: 700; font-size: 15px;
  margin-bottom: 18px;
}
.flow-steps h3 { font-size: 16px; margin-bottom: 10px; font-family: var(--font-ja); }
.flow-steps p { color: var(--text-mid); font-size: 14px; font-family: var(--font-ja); }

/* ---- 相互送客・CTA ---- */
.cross-sell {
  background: linear-gradient(180deg, var(--panel) 0%, rgba(23,23,23,.5) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 46px 40px;
}
.cross-sell .section-title { font-size: clamp(22px, 2.6vw, 30px); }
.cross-sell .section-lead { margin-bottom: 26px; }

.cta-band { border-top: 1px solid var(--line-soft); }
.cta-inner { text-align: center; }
.cta-inner .section-lead { margin: 0 auto 30px; }

/* ---------------------------------------------------------------- フォーム */
.contact-form { margin-top: 44px; display: grid; gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; color: var(--text); font-family: var(--font-ja); }
.req { color: var(--danger); margin-left: 4px; }

.field input, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--radius);
  /* 地と同色にすると入力できる場所か分からなくなるので、面はパネル色にする */
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-family: var(--font-en), var(--font-ja);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.8; }
.field input::placeholder, .field textarea::placeholder { color: #6a6a6a; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }

.hint { font-size: 12.5px; color: var(--text-dim); font-family: var(--font-ja); }
.counter { text-align: right; }

.form-error {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.32);
  color: #f0f0f0; border-radius: var(--radius); padding: 13px 16px; font-size: 14px;
  font-family: var(--font-ja);
}
.form-note { font-size: 12.5px; color: var(--text-dim); text-align: center; font-family: var(--font-ja); }
.form-note a { color: var(--accent-soft); text-decoration: underline; }

.form-done {
  margin-top: 44px; text-align: center; padding: 52px 28px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
}
.done-mark {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #e8e8e8;
  border: 1px solid rgba(255,255,255,.3);
}
.form-done h3 { font-size: 19px; margin-bottom: 10px; font-family: var(--font-ja); }
.form-done p { color: var(--text-mid); font-size: 14.5px; margin-bottom: 26px; font-family: var(--font-ja); }

/* フォームのラベルに添える英語。日本語話者以外でも欄の意味が分かるように
   併記するが、主にする言語は日本語なので一段落とした見え方にする。 */
.label-en { color: var(--text-dim); font-weight: 400; font-size: .92em; }

/* ---------------------------------------------------------------- 法務ページ */
/* 規約・ポリシー類。読み通す文書なので、行間を広めに取り、見出しの前だけ
   大きく空ける。本文の最大幅は shell-narrow に任せる。 */
.legal-updated {
  color: var(--text-dim); font-size: 13px; font-family: var(--font-ja); margin-top: 12px;
}
.legal h2 {
  font-size: 17px; font-family: var(--font-ja); color: var(--text);
  margin: 44px 0 14px; padding-top: 4px;
}
.legal > .shell > section:first-of-type h2 { margin-top: 0; }
.legal h3 {
  font-size: 14.5px; font-family: var(--font-ja); color: var(--text);
  font-weight: 600; margin: 22px 0 8px;
}
.legal p, .legal li {
  color: var(--text-mid); font-size: 14.5px; font-family: var(--font-ja); line-height: 1.95;
}
.legal p + p { margin-top: 10px; }
.legal ol, .legal ul { margin: 10px 0 0; padding-left: 1.5em; display: grid; gap: 9px; }
.legal ol { list-style: decimal; }
.legal ul { list-style: disc; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-ja); font-size: 14.5px; line-height: 1.9;
}
.legal-table th {
  width: 30%; color: var(--text); font-weight: 600; padding-right: 24px; white-space: nowrap;
}
.legal-table td { color: var(--text-mid); }
.legal-table ul { margin: 8px 0 0; padding-left: 1.4em; list-style: disc; display: grid; gap: 6px; }
/* 表の中でプロダクトを分ける見出し。項目が増えたときに区切りが要る */
.legal-product { color: var(--text); font-weight: 600; margin-bottom: 6px; }
.legal-table td > p + p { margin-top: 10px; }
@media (max-width: 560px) {
  /* 狭い画面では見出し列を上に積む(横に並べると値が1文字ずつ折り返す) */
  .legal-table th, .legal-table td { display: block; width: auto; white-space: normal; }
  .legal-table th { border-bottom: 0; padding: 16px 0 4px; }
  .legal-table td { padding: 0 0 16px; }
}

/* ---------------------------------------------------------------- フッター */
/* コンパクト。見出し付きの3列をやめ、屋号・リンク列・著作権表示を1段に流す。
   リンクは折り返す前提なので、行が2段になっても読み順が崩れない並びにしてある。 */
.site-footer {
  background: var(--bg-alt); border-top: 1px solid var(--line-soft);
  padding: 16px 0 14px;
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px;
}
/* 屋号もリンク列に混ぜて1行にする。行を1つ減らすのが縦幅に一番効く */
.footer-inner .brand-word { font-size: 13px; letter-spacing: .16em; }
.footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 20px;
}
.footer-links a {
  font-size: 13px; color: var(--text-dim); font-family: var(--font-ja);
  transition: color .18s;
}
.footer-links a:hover { color: var(--accent-soft); }
.copyright { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-ja); }

/* ---------------------------------------------------------------- 応答 */
@media (max-width: 860px) {
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,10,10,.97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 22px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav > a { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .nav .nav-cta { margin-top: 16px; border-bottom: 0; justify-content: center; }
  .nav-toggle { display: flex; }

  .kv { padding: 64px 0 76px; }
  /* .kv-brand の1画面ぶんの高さと .scroll-cue は、スマホでも残す。
     ここだけ本文が続けて見えると、TOP を分けた意味がなくなる。 */
  .kv-brand { padding: 0; }
  .kv-facts { gap: 20px 32px; margin-top: 48px; }
  .section { padding: 76px 0; }

  /* 画面ぶんの列を取ると本文が読めない幅になるので、画面はカードの上に置く。 */
  .product-row,
  .product-row[data-media-side="right"],
  .product-row[data-media-side="left"] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* 側の指定(data-media-side つき)と**同じ詳細度**で上書きすること。
     詳細度が低いと基本レイアウトの grid-column: 2 が残り、1列にしたつもりの
     グリッドに暗黙の2列目ができてカードが潰れる(実測: 125px まで縮んだ)。 */
  .product-row[data-media-side="right"] .device,
  .product-row[data-media-side="left"]  .device { grid-column: 1; grid-row: 1; }
  .product-row[data-media-side="right"] .product-brief,
  .product-row[data-media-side="left"]  .product-brief { grid-column: 1; grid-row: 2; }

  .product-hero { padding: 56px 0 64px; }
  .feature-block { grid-template-columns: 1fr; gap: 0; padding: 28px 0; }
  .feature-num { padding-top: 0; margin-bottom: 10px; }
  .cross-sell { padding: 34px 26px; }
  .statement { margin-top: 48px; padding-top: 30px; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .br-sp { display: none; }
  .kv-facts li { width: 100%; }
  .btn { width: 100%; }
  .kv-actions .btn, .product-actions .btn { flex: 1 1 100%; }
}