/* ==========================================================================
   VSSスターターキット / EVAIS — ランディングページ
   文言の正本: ../copy.md   意匠の正本: キービジュアル（濃紺＋シアン）
   ダーク固定（KVの世界観に合わせる。ライトテーマは設けない）
   ========================================================================== */

:root {
  --navy:      #0B111A;
  --navy-2:    #111A26;
  --surface:   #131D2A;
  --ink:       #E8EEF4;
  --ink-2:     #C3D0DC;
  --muted:     #93A3B4;
  --cyan:      #2FD4DC;
  --cyan-dim:  #1F8E96;
  --cyan-soft: rgba(47, 212, 220, .09);
  --line:      rgba(147, 163, 180, .22);
  --line-cyan: rgba(47, 212, 220, .38);
  --red:       #D9483C;

  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;

  --wrap: 1080px;
  --pad: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto は必須。width/height 属性を持つ画像で CSS が width だけ上書きすると、
   属性の height が生きて縦に引き伸ばされる（object-fit を使う箇所は個別に height を指定）。 */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* --------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 17, 26, .78);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-head { background: var(--navy); backdrop-filter: none; }
}
.site-head .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 66px;
}
/* ロゴはハイブリッド構成。
   アイコン＝ラスタ（金属質感とグローはベクター化しても得がない）＝EVAISの識別を担う
   文字＝「EXR Vision AI Suite」のみ。EVAISの語はアイコンと重複するため置かない
   （KV側にロゴを置く場合に二重になるのを避ける） */
/* アイコンはヒーローのロックアップと重複するため、ヘッダーはテキストのみ。
   アイコン素材（icon.png）は他用途のために残置。 */
.brand { display: flex; align-items: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-text .pn { font-size: 13.5px; font-weight: 600; color: #D3DCE4; letter-spacing: .04em; }
.brand-text .sw {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  color: var(--cyan); margin-top: 2px;
}
@media (max-width: 520px) {
  .brand-text .pn { font-size: 11.5px; }
  .brand-text .sw { font-size: 8.5px; letter-spacing: .16em; }
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-nav a { color: var(--ink-2); font-size: 13.5px; }
.site-nav a:hover { color: var(--cyan); text-decoration: none; }
.site-nav .btn-sm {
  border: 1.5px solid var(--cyan); color: var(--cyan);
  padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px;
}
.site-nav .btn-sm:hover { background: var(--cyan-soft); }
@media (max-width: 780px) { .site-nav .hide-sp { display: none; } }

/* ----------------------------------------------------------------- hero */
/* section { padding-block } はヒーローには不要。
   入っているとヘッダーとKVの間に余白（帯）が見えてしまう。 */
.hero { position: relative; overflow: hidden; padding-block: 0; }
.hero-media { position: relative; }
.hero-media > img { width: 100%; }   /* KV本体のみ。子孫セレクタだと .panel img を上書きしてしまう */
/* KVの黒地を紙面（サイト地）になじませ、左側にコピーの下地を作る */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,17,26,.94) 0%, rgba(11,17,26,.62) 34%, rgba(11,17,26,0) 62%),
    linear-gradient(to bottom, rgba(11,17,26,.55) 0%, transparent 22%, transparent 62%, var(--navy) 100%);
}
/* 天面のリング位置に重ねる発光（＝思考）。KV座標に対する比率で配置 */
.ring-pulse {
  position: absolute; left: 63.4%; top: 40%;
  width: 13.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 1;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    rgba(47,212,220,.5), rgba(47,212,220,.1) 56%, transparent 74%);
  animation: ringBreathe 5.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes ringBreathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.97); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-pulse { animation: none; opacity: .8; }
}

/* 浮遊するUIパネル。KV上の相対位置で置き、それぞれ違う周期で漂わせる。
   狭い画面では非表示（コピーと干渉するため） */
.panels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.panel {
  position: absolute;
  opacity: .95;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
  will-change: transform;
}
/* パネルは全てKVのアイソメ角で書き出し済み・背景透過。
   よってCSSでの傾き補正は不要（枠・影も画像側が持っている）。 */
/* 配置は参照KV（evais_keyvisual_4ev.png）の実測値。
   KV本体の描画領域を基準に % 換算した値:
     VMS 50.4/6.5 w22.3 ／ チャット 80.8/17.6 w16.3 ／ PLATFORM 46.0/45.5 w13.2
     Z1-4 61.9/69.2 w10.0 ／ Knowledge Base 78.0/61.6 w18.4
   VMSはラベルに崩れ文字が残るため、不透明度を落として奥に見せる。 */
.p-vms  { left: 49%;   top: 12%;  width: 21%;   opacity: .72; animation: float1 7.5s ease-in-out infinite; }
.p-chat { left: 76.5%; top: 20%;  width: 14.5%; animation: float2 9.1s ease-in-out infinite; }
.p-plat { left: 44%;   top: 48%;  width: 13%;   animation: float3 6.2s ease-in-out infinite; }
.p-zone { left: 59%;   top: 72%;  width: 11.5%; animation: float4 8.4s ease-in-out infinite; }
.p-rag  { left: 73.5%; top: 61%;  width: 17%;   animation: float5 7.0s ease-in-out infinite; }

@keyframes float1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-4px,-11px);} }
@keyframes float2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-3px,-9px);} }
@keyframes float3 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(3px,-7px);} }
@keyframes float4 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-3px,8px);} }
@keyframes float5 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(4px,-10px);} }
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}
/* パネルは狭い画面でも表示する。
   1100px以下ではヒーローが上下に積む形になり、コピーと重ならないため隠す必要がない。
   ごく狭い画面では点数を絞って、密集による煩雑さを避ける。 */
@media (max-width: 1100px) {
  /* モバイル専用のパネル位置。画面座標 = -98% + left×2（.panels が幅200%・left -98% のため）。
     実機で調整: VMSは左に振って切れさせ、チャットは右へ、Z1-4はデータ帯に重ねる。 */
  .p-vms  { left: 44%; top: 4%; }   /* 画面 -10% … 左端で切れる。上に寄せる */
  .p-chat { left: 81%; }   /* 画面 +64% … 右へ寄せる */
  .p-zone { left: 53%; }   /* 画面  +8% … 青いデータ帯に重なる */
}

@media (max-width: 560px) {
  .p-plat { display: none; }          /* 最小のパネルは判読できないので落とす */
  .p-vms  { width: 30%; opacity: .8; }
  .p-chat { width: 13%; }
  .p-zone { width: 17%; }
  .p-rag  { width: 25%; }
}

.hero-copy {
  position: absolute; z-index: 2; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
}
.hero-copy .inner { max-width: 620px; }
/* 参照KV（evais_keyvisual_4ev.png）と同じく、見出しの上にロックアップを置く。
   参照での比率は KV幅の約35%。ヘッダーはアイコン＋タグラインのみに留めており、
   「EVAIS」の文字はここが唯一の出現箇所。 */
.hero-lockup {
  width: clamp(210px, 24vw, 400px); height: auto;
  margin: 0 0 20px;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.55));
}
@media (max-width: 1100px) { .hero-lockup { width: clamp(180px, 30vw, 300px); margin-bottom: 16px; } }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--cyan); margin: 0 0 14px; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(26px, 4.4vw, 52px);
  font-weight: 800; line-height: 1.34; letter-spacing: -.02em;
  margin: 0 0 16px; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.hero h1 .k { color: var(--cyan); }
.hero .sub {
  font-size: clamp(14px, 1.6vw, 18px); color: var(--ink-2);
  margin: 0 0 12px; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero .lead {
  font-size: clamp(13px, 1.3vw, 15px); color: var(--muted);
  margin: 0 0 26px; max-width: 46ch; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero .lead b { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: 15px; transition: transform 110ms ease-out, background-color 160ms;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.975); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn-primary { background: var(--cyan); color: #04282A; }
.btn-primary:hover { background: #58E2E8; }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cyan-dim); background: var(--cyan-soft); }

/* 1100px以下: KVを背景に敷かず、上下に積む（パネル表示条件と境界を揃える） */
@media (max-width: 1100px) {
  .hero-copy { position: static; transform: none; padding-block: 32px 40px; }
  /* KVの構図は横長のヒーロー用。狭い帯に全体を収めると箱（主役）が豆粒になるため、
     4:3 の枠に対して画像を 134.4% に広げ、箱（画像の74%位置）を中央へ寄せて切り出す。
     .panels も同じ座標系にずらすので、リングとパネルの位置は自動的に追従する。
     ▼ 守るべき条件が2つある
     ① **left + width >= 100%** … 画像の右端を画面の右端に一致（または外に出す）。
        崩すと原画の切れ目が画面内に出る。
     ② **枠の縦横比 = 1.792 × 100 / width** … object-fit:cover が縦を切らない条件。
        崩すとパネルが画像に対して縦にずれる（例: 枠4/3 と width150% では約5%ずれていた）。
     現在の値は「VMSパネルの左端を画面の左端に合わせる」設計:
        width 200% / left -98%（= -0.49×200。VMSは画像の49%位置） / 枠 0.896:1
     なお width は `max-width: none` が無いと グローバルの img{max-width:100%} に
     100% へ抑えられ、「左は画面外・右に隙間」という状態になる。 */
  .hero-media { position: relative; aspect-ratio: 0.896 / 1; overflow: hidden; }
  .hero-media > img {
    position: absolute; top: 0; left: -98%;
    width: 200%; height: 100%; object-fit: cover;
    /* グローバルの img{max-width:100%} が width:150% を 100% に抑えてしまうため解除。
       これが無いと「左は画面外・右に隙間」という状態になる。 */
    max-width: none;
  }
  .panels { left: -98%; right: auto; width: 200%; }

  /* モバイルはコピーを重ねないので、上部を暗くする必要がない。
     上に色を乗せると縁が帯として見えてしまうため、下端を地になじませるだけにする。 */
  .hero-media::after {
    background: linear-gradient(to bottom, transparent 78%, var(--navy) 100%);
  }
  .hero h1 { text-shadow: none; }
  .hero .sub, .hero .lead { text-shadow: none; }
}

/* --------------------------------------------------------------- spec bar */
.specbar {
  border-block: 1px solid var(--line-cyan);
  background: linear-gradient(var(--cyan-soft), transparent);
}
.specbar .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 22px;
}
.sb { text-align: center; padding-inline: 8px; border-right: 1px solid var(--line); }
.sb:last-child { border-right: none; }
.sb .n {
  font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--cyan);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.sb .n small { font-size: .48em; font-weight: 700; margin-left: 2px; }
.sb .l { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
@media (max-width: 620px) {
  .specbar .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .sb:nth-child(2) { border-right: none; }
}

/* ------------------------------------------------------------- sections */
section { padding-block: clamp(56px, 8vw, 104px); }
section + section { border-top: 1px solid rgba(147,163,180,.1); }

.sec-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--cyan); margin: 0 0 12px; text-transform: uppercase;
}
.sec-head h2 {
  font-size: clamp(21px, 2.8vw, 32px); font-weight: 700; line-height: 1.42;
  letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance;
}
.sec-head p { color: var(--muted); font-size: 15px; margin: 0; }

/* 3つの特長 */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px;
  background: var(--surface);
}
.card h3 {
  font-size: 17px; font-weight: 700; margin: 0 0 12px; color: var(--cyan);
  line-height: 1.45;
}
.card p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.card .fine {
  font-size: 12.5px; color: var(--muted); margin: 0;
  padding-top: 12px; border-top: 1px solid rgba(147,163,180,.16);
}
@media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } }

/* 導入3ステップ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.step figure { margin: 0; height: 200px; overflow: hidden; background: #080D14; }
.step figure img { width: 100%; height: 100%; object-fit: cover; }
.step[data-k="ask"] figure img { object-position: center top; }
.step[data-k="conn"] figure img { object-position: 58% 55%; }
.step .body { padding: 20px 22px 24px; }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--cyan); }
.step h3 { font-size: 19px; font-weight: 700; margin: 4px 0 8px; }
.step p { font-size: 13.5px; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step figure { height: 220px; } }

/* 図版つき機能節（アラート・ドメイン知識） */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.feature.flip .shot { order: 2; }
.feature .shot {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #080D14; box-shadow: 0 18px 44px rgba(0,0,0,.36);
}
.feature h2 {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.42;
  margin: 0 0 16px; letter-spacing: -.01em; text-wrap: balance;
}
.feature .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--cyan); margin: 0 0 12px; text-transform: uppercase;
}
.feature p { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; }
.feature p b { color: var(--ink); }
.feature .fine {
  font-size: 13px; color: var(--muted); margin: 0;
  padding-top: 14px; border-top: 1px solid rgba(147,163,180,.16);
}
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature.flip .shot { order: 0; }
}

/* セキュリティ4層 */
.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.layers { display: flex; flex-direction: column-reverse; gap: 8px; }
.layer {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px;
  font-size: 14.5px;
}
.layer .lv { font-family: var(--mono); font-size: 11px; color: var(--cyan); flex: none; }
.layer .nm { font-weight: 700; }
.layer .ds { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
.layer.l1 { background: rgba(47,212,220,.04); }
.layer.l2 { background: rgba(47,212,220,.08); }
.layer.l3 { background: rgba(47,212,220,.13); }
.layer.l4 { background: rgba(217,72,60,.14); border-color: rgba(217,72,60,.45); }
@media (max-width: 860px) { .sec-grid { grid-template-columns: 1fr; gap: 24px; } }

/* 機能リスト */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
.two-col h3 {
  font-size: 17px; font-weight: 700; margin: 0 0 18px;
  padding-left: 12px; border-left: 3px solid var(--cyan);
}
.flist { display: flex; flex-direction: column; gap: 16px; }
.frow { display: flex; gap: 14px; }
.frow .ic {
  width: 26px; height: 26px; flex: none; border: 1px solid var(--cyan);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--cyan); font-family: var(--mono); font-size: 12px; margin-top: 2px;
}
.frow .t { font-weight: 700; font-size: 14.5px; }
.frow p { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.note-sm { font-size: 12.5px; color: var(--muted); margin: 18px 0 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ユースケース */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.use {
  border: 1px solid var(--line); border-radius: 12px; padding: 24px 20px;
  background: var(--surface);
}
.use h3 { font-size: 15.5px; font-weight: 700; color: var(--cyan); margin: 0 0 10px; }
.use p { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .uses { grid-template-columns: 1fr; } }

/* 仕様表 */
.spec-table {
  border: 1px solid var(--line-cyan); border-radius: 12px; overflow: hidden;
  background: linear-gradient(var(--cyan-soft), transparent);
}
.spec-table dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; }
.spec-table dt, .spec-table dd {
  padding: 16px 24px; margin: 0; border-top: 1px solid rgba(147,163,180,.14);
  font-size: 14px;
}
.spec-table dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: var(--cyan); background: rgba(0,0,0,.16);
}
.spec-table dd { color: var(--ink-2); }
.spec-table dt:first-of-type, .spec-table dl > dt:first-child + dd { border-top: none; }
@media (max-width: 720px) {
  .spec-table dl { grid-template-columns: 1fr; }
  .spec-table dt { padding-bottom: 4px; border-top: 1px solid rgba(147,163,180,.14); }
  .spec-table dd { padding-top: 4px; border-top: none; }
}

/* CTA */
.cta-band { text-align: center; }
.cta-band .inner { max-width: 640px; margin-inline: auto; }
.cta-band h2 {
  font-size: clamp(22px, 3.2vw, 36px); font-weight: 800; line-height: 1.4;
  margin: 0 0 16px; letter-spacing: -.01em; text-wrap: balance;
}
.cta-band p { color: var(--ink-2); font-size: 15px; margin: 0 0 28px; }
.cta-band .cta-row { justify-content: center; }
.cta-band .fine { color: var(--muted); font-size: 13px; margin: 22px 0 0; }

/* footer */
.site-foot {
  border-top: 1px solid var(--line); padding-block: 48px 60px;
  color: var(--muted); font-size: 13px;
}
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; }
.site-foot h3 { font-size: 14px; color: var(--ink); margin: 0 0 8px; font-weight: 700; }
.site-foot p { margin: 0 0 6px; }
.site-foot .co { flex: 1 1 380px; }
.site-foot .contact { flex: 1 1 260px; }
.btn-sm-foot { padding: 9px 20px; font-size: 13px; margin-top: 6px; }

.site-foot .disclaimer {
  border-top: 1px solid rgba(147,163,180,.14); padding-top: 20px;
  font-size: 11.5px; line-height: 1.7;
}
.todo {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  color: var(--red); border: 1px dashed var(--red); border-radius: 4px;
  padding: 1px 7px; margin-left: 4px;
}

/* スクロールで静かに現れる（reduced-motion では即表示） */
/* .js-reveal は <head> のインラインスクリプトが付与する。
   JSが無効・読み込み失敗のときはこのクラスが付かず、
   .reveal は隠されないままなので、コンテンツが必ず表示される。 */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.js-reveal .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22,.7,.28,1);
}

/* ------------------------------------------------------- お問い合わせフォーム
   HubSpotの埋め込みスクリプトを使わず自前フォーム＋送信APIにしているため、
   意匠をページに完全に統一できる（「Powered by HubSpot」表記も入らない）。 */
.inq {
  max-width: 720px; margin: 40px auto 0; text-align: left;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); padding: clamp(24px, 4vw, 40px);
}
.inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.f { display: flex; flex-direction: column; }
.f-full { grid-column: 1 / -1; }
.f .lb { font-size: 13px; color: var(--ink-2); margin-bottom: 7px; font-weight: 600; }
.f .lb em {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--cyan);
  border: 1px solid var(--line-cyan); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
  vertical-align: 1px;
}
.inq input[type="text"], .inq input[type="email"], .inq select, .inq textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  background: #0C141F; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; width: 100%;
  transition: border-color 140ms, background-color 140ms;
}
.inq textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.inq select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 38px;
}
.inq input:focus, .inq select:focus, .inq textarea:focus {
  outline: none; border-color: var(--cyan); background: #0E1826;
  box-shadow: 0 0 0 3px rgba(47, 212, 220, .14);
}
.inq ::placeholder { color: #64768A; }
.f.has-error input, .f.has-error select, .f.has-error textarea { border-color: var(--red); }

.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.consent input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--cyan); flex: none; cursor: pointer; }
.consent.has-error span { color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inq-submit { margin-top: 24px; width: 100%; }
.inq-submit:disabled { opacity: .5; cursor: not-allowed; }
.inq-status { font-size: 13.5px; margin: 14px 0 0; min-height: 1.4em; color: var(--muted); }
.inq-status.is-ok   { color: var(--cyan); font-weight: 700; }
.inq-status.is-err  { color: var(--red); }
.inq-status.is-warn { color: #E0A458; }

/* 送信完了後は入力欄を隠して、完了メッセージだけを残す */
.inq.is-sent .inq-grid, .inq.is-sent .consent, .inq.is-sent .inq-submit { display: none; }
.inq.is-sent .inq-status { font-size: 16px; text-align: center; padding: 20px 0; }

.cta-fine { color: var(--muted); font-size: 12.5px; margin: 20px auto 0; max-width: 720px; text-align: center; }

@media (max-width: 640px) { .inq-grid { grid-template-columns: 1fr; } }