/* =====================================================================
   Grok Bot 導入コンサル  —  fv.css
   ヘッダー + ファーストビュー（FV）専用スタイル
   構成: tokens → buttons → header → FV copy → FV visual → responsive
   ===================================================================== */

/* ---------- Tokens (FV専用) ---------- */
:root {
  --header-h: 86px;

  --fv-red: #e4262b;
  --fv-red-deep: #c91d22;
  --fv-ink: #1a2130;
  --fv-ink-2: #3d4250;
  --fv-ink-3: #5c6170;
  --fv-muted: #8a8d95;
  --fv-line: #e6e7ea;
  --fv-white: #ffffff;
  --fv-yellow: #f5c542;
  --fv-blue: #2f7cf6;
  --fv-blue-deep: #1626e6;   /* #download のバンド専用。--fv-blue では出せない鮮やかな青 */
  --fv-ph: #dfe1e6;
  --fv-ph-2: #cfd2d9;

  --fv-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --fv-font-en: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --fv-font-hand: "Yomogi", "Zen Kurenaido", "Klee One", cursive;

  --fv-shadow: 0 10px 28px rgba(27, 28, 32, 0.10), 0 2px 6px rgba(27, 28, 32, 0.05);
  --fv-container: 1680px;
}

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

/* ---------- Buttons（グローバルの .btn をベースに） ---------- */
.btn-red {
  background: var(--fv-red);
  color: var(--fv-white);
  font-family: var(--fv-font);
}
.btn-red:hover { background: var(--fv-red-deep); transform: translateY(-2px); }

.btn-red-outline {
  border: 2px solid var(--fv-red);
  color: var(--fv-red);
  background: var(--fv-white);
  font-family: var(--fv-font);
}
.btn-red-outline:hover { background: #fff2f2; transform: translateY(-2px); }

.btn .fv-arrow {
  width: 1.1em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--fv-white);
  border-bottom: 1px solid var(--fv-line);
  font-family: var(--fv-font);
}
.site-header.is-scrolled {
  border-bottom-color: var(--fv-line);
  box-shadow: 0 4px 20px rgba(27, 28, 32, 0.06);
}
.header-inner { gap: 32px; }

.site-header .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  margin-right: 0;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.site-header .brand-grok { font-family: var(--fv-font-en); color: var(--fv-red); }
.site-header .brand-bot { font-family: var(--fv-font-en); color: var(--fv-ink); }
.site-header .brand-jp {
  font-family: var(--fv-font);
  font-size: 0.84em;
  font-weight: 900;
  color: var(--fv-ink);
  margin-left: 0.1em;
}

.site-header .nav {
  gap: 2px;
  margin-right: auto;
  margin-left: 96px;
}
.site-header .nav a {
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fv-ink);
  border-radius: 8px;
}
.site-header .nav a:hover { background: #f5f5f7; color: var(--fv-ink); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-actions .btn {
  min-width: 150px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 700;
  gap: 14px;
}
.header-actions .btn-red { padding-inline: 34px; min-width: 190px; }

/* ---------- FV ---------- */
.fv {
  background: var(--fv-white);
  color: var(--fv-ink);
  font-family: var(--fv-font);
  overflow: hidden;
}

.fv-grid {
  display: grid;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  align-items: start;
}

/* ----- 左: コピー ----- */
.fv-copy {
  padding-top: 84px;
  padding-bottom: 48px;
}

.fv-tagline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
}
.fv-tagline .mark {
  position: relative;
  width: 14px;
  height: 1.2em;
  flex: none;
}
.fv-tagline .mark::before,
.fv-tagline .mark::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--fv-red);
  transform: rotate(-28deg);
}
.fv-tagline .mark::before { left: 2px; top: 0; height: 100%; }
.fv-tagline .mark::after { left: 10px; top: 38%; height: 62%; }
.fv-tagline .mark:last-child { transform: scaleX(-1); }

.fv-title {
  margin-top: 22px;
  font-size: clamp(2.6rem, 5.7vw, 6rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fv-ink);
  text-wrap: unset;
  white-space: nowrap;
}
.fv-title .en {
  font-family: var(--fv-font-en);
  font-size: 1.18em;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.fv-title em {
  font-style: normal;
  color: var(--fv-red);
}

.fv-lead {
  margin-top: 20px;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--fv-ink-2);
}

.fv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}
.fv-actions .btn {
  height: 68px;
  padding: 0 30px;
  font-size: clamp(1rem, 1.08vw, 1.125rem);
  gap: 12px;
}
.fv-actions .btn-red { padding-inline: 30px; }
.fv-actions .btn-red-outline { padding-inline: 20px; font-size: clamp(0.95rem, 1.02vw, 1.0625rem); }

/* 3つの特長 */
.fv-stats {
  display: grid;
  grid-template-columns: 0.88fr 1fr 1.12fr;
  margin-top: 50px;
}
.fv-stats li { padding-right: 12px; }
.fv-stats li + li {
  border-left: 1px solid var(--fv-line);
  padding-left: 38px;
}
.fv-stats .fv-stat-ic {
  width: 40px;
  height: 40px;
  color: var(--fv-red);
  fill: currentColor;
}
.fv-stats b {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--fv-ink);
  white-space: nowrap;
}
.fv-stats small {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fv-muted);
}

/* ----- 右: ビジュアル（986 x 854 のキャンバス。1cqw = 9.86px相当） ----- */
.fv-visual {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 986 / 854;
  margin-top: 4px;
  user-select: none;
}
.fv-visual > * { position: absolute; }
.fv-visual img { object-fit: contain; object-position: center bottom; }

/* 背景の薄い斜めストライプ */
.fv-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 30%, #f7f7f9 30% 50%, transparent 50% 60%, #f9f9fb 60% 72%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}

.fv-lines {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.fv-lines .dots {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 8;
}

/* 人物 */
.fv-man-bg {
  left: 0.5cqw;
  top: 11cqw;
  width: 14.5cqw;
  height: 14.5cqw;
  border-radius: 50%;
  background: #eceef2;
  z-index: 2;
}
.fv-person { z-index: 3; }
.fv-man { left: 1cqw; top: 10.4cqw; width: 13cqw; height: 15.6cqw; }
.fv-woman { left: 52cqw; top: 61.2cqw; width: 21cqw; height: 17.4cqw; }
.fv-excl {
  left: 66.4cqw;
  top: 59.6cqw;
  width: 4cqw;
  height: 4cqw;
  color: var(--fv-red);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  z-index: 3;
}
.fv-floor {
  left: 51.2cqw;
  top: 76.3cqw;
  width: 24.6cqw;
  height: 5cqw;
  border-radius: 50%;
  background: #e8e9ed;
  z-index: 2;
}

/* 吹き出し */
.fv-bubble {
  z-index: 4;
  padding: 2.5cqw 3cqw;
  background: var(--fv-white);
  border-radius: 1.8cqw;
  box-shadow: var(--fv-shadow);
  font-size: 2.15cqw;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  white-space: nowrap;
  color: var(--fv-ink);
}
.fv-bubble::after {
  content: "";
  position: absolute;
  width: 2cqw;
  height: 2cqw;
  background: var(--fv-white);
  transform: rotate(45deg);
  border-radius: 0.25cqw;
}
.fv-bubble-1 { left: 12.7cqw; top: 6.9cqw; }
.fv-bubble-1::after { left: 2.4cqw; bottom: -0.9cqw; }
.fv-bubble-2 { left: 74cqw; top: 60.7cqw; padding: 2.2cqw 2.6cqw; font-size: 1.95cqw; }
.fv-bubble-2::after { left: -0.8cqw; top: 54%; }

/* 手書きコピー（黄色の下線は .fv-lines 内） */
.fv-hand-1 {
  left: 48.7cqw;
  top: 5.6cqw;
  z-index: 2;
  margin: 0;
  font-family: var(--fv-font-hand);
  font-size: 4.5cqw;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fv-ink);
  white-space: nowrap;
  transform: rotate(-6deg);
  transform-origin: left top;
}
.fv-hand-1 span { display: inline-block; padding-left: 5cqw; }

/* 右下テキスト */
.fv-workplace {
  left: 81.1cqw;
  top: 74.4cqw;
  z-index: 2;
  margin: 0;
  font-family: var(--fv-font-en);
  font-size: 1.15cqw;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.7;
  color: #6b6f78;
  text-transform: uppercase;
  white-space: nowrap;
}
.fv-workplace::before {
  content: "";
  display: block;
  width: 4cqw;
  height: 0.3cqw;
  margin-bottom: 2cqw;
  background: var(--fv-red);
}

/* ツールカード */
.fv-card {
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 1.8cqw;
  padding: 2.1cqw 2.1cqw 2.2cqw;
  background: var(--fv-white);
  border-radius: 1.4cqw;
  box-shadow: var(--fv-shadow);
  white-space: nowrap;
}
.fv-card .lg {
  width: 4.8cqw;
  height: 4.8cqw;
  flex: none;
  margin-top: 0.2cqw;
}
.fv-card b {
  display: block;
  font-size: 1.78cqw;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  color: var(--fv-ink);
}
.fv-card .en { font-family: var(--fv-font-en); font-weight: 800; }
.fv-card .ph { margin-top: 1.1cqw; }

/* Web調査カード: ウィンドウ風ヘッダー */
.fv-card.win { padding-top: 3.8cqw; }
.fv-card.win::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 2.1cqw;
  border-radius: 1.4cqw 1.4cqw 0 0;
  background:
    radial-gradient(circle at 1.6cqw 50%, #ff5f57 0 0.45cqw, transparent 0.55cqw),
    radial-gradient(circle at 3.2cqw 50%, #febc2e 0 0.45cqw, transparent 0.55cqw),
    radial-gradient(circle at 4.8cqw 50%, #28c840 0 0.45cqw, transparent 0.55cqw),
    #f3f3f5;
}

/* --- カード内のプレースホルダーUI --- */
.ph-search {
  position: relative;
  width: 14cqw;
  height: 2.7cqw;
  border: 1px solid var(--fv-ph);
  border-radius: 999px;
}
.ph-search::before {
  content: "";
  position: absolute;
  left: 1.1cqw;
  top: 50%;
  width: 7.5cqw;
  height: 0.55cqw;
  transform: translateY(-50%);
  border-radius: 1cqw;
  background: var(--fv-ph);
}
.ph-search svg {
  position: absolute;
  right: 0.8cqw;
  top: 50%;
  width: 1.5cqw;
  height: 1.5cqw;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--fv-blue);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.ph-rows {
  display: grid;
  gap: 0.8cqw;
  width: 11cqw;
}
.ph-rows i {
  position: relative;
  display: block;
  height: 0.7cqw;
  padding-left: 1.5cqw;
  box-sizing: border-box;
  border-radius: 0.35cqw;
  background: var(--fv-ph);
  background-clip: content-box;
}
.ph-rows i::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.1cqw;
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 0.2cqw;
  background: var(--fv-ph-2);
}
.ph-rows i:nth-child(2) { width: 82%; }
.ph-rows i:nth-child(3) { width: 64%; }

.ph-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 13.5cqw;
  border: 1px solid var(--fv-ph);
  border-radius: 0.3cqw;
  overflow: hidden;
}
.ph-table i {
  display: block;
  height: 1.25cqw;
  border-right: 1px solid var(--fv-ph);
  border-bottom: 1px solid var(--fv-ph);
}
.ph-table i:nth-child(5n) { border-right: 0; }
.ph-table i:nth-child(n + 11) { border-bottom: 0; }
.ph-table i:nth-child(-n + 5) { background: #eef0f4; }

.ph-doc {
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
}
.ph-doc .lines {
  display: grid;
  gap: 0.75cqw;
  width: 6cqw;
  margin-bottom: 0.4cqw;
}
.ph-doc .lines i {
  display: block;
  height: 0.65cqw;
  border-radius: 0.3cqw;
  background: var(--fv-ph);
}
.ph-doc .lines i:nth-child(2) { width: 72%; }
.ph-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.4cqw;
  height: 3.4cqw;
  padding: 0.45cqw;
  border: 1px solid var(--fv-ph);
  border-radius: 0.4cqw;
  background: #f7f8fa;
}
.ph-chart i {
  display: block;
  width: 0.9cqw;
  border-radius: 0.15cqw 0.15cqw 0 0;
  background: var(--fv-blue);
}
.ph-chart i:nth-child(1) { height: 35%; }
.ph-chart i:nth-child(2) { height: 55%; }
.ph-chart i:nth-child(3) { height: 75%; }
.ph-chart i:nth-child(4) { height: 100%; }

.fv-card-web   { left: 6.1cqw;  top: 26.2cqw; width: 23.5cqw; }
.fv-card-mail  { left: 8.6cqw;  top: 39.4cqw; width: 21cqw; }
.fv-card-sheet { left: 7.1cqw;  top: 54cqw;   width: 23.6cqw; }
.fv-card-crm   { left: 66.4cqw; top: 20.6cqw; width: 22.6cqw; }
.fv-card-ppt   { left: 68.5cqw; top: 32.3cqw; width: 23.6cqw; }
.fv-card-slack { left: 67.4cqw; top: 46.5cqw; width: 24cqw; }

/* 役割別Bot（小） */
.fv-mini { z-index: 4; }
.fv-mini-blue   { left: 2.5cqw;  top: 33.3cqw; width: 8.3cqw; height: 8.3cqw; }
.fv-mini-orange { left: 34.3cqw; top: 22.7cqw; width: 7.8cqw; height: 7.7cqw; }
.fv-mini-green  { left: 52.7cqw; top: 25.9cqw; width: 7.8cqw; height: 7.8cqw; }
.fv-mini-green2 { left: 2.5cqw;  top: 49.5cqw; width: 7.6cqw; height: 7.3cqw; }
.fv-mini-gray   { left: 29.4cqw; top: 51cqw;   width: 6.7cqw; height: 7.5cqw; }
.fv-mini-brown  { left: 86cqw;   top: 20.1cqw; width: 7.8cqw; height: 7.5cqw; }
.fv-mini-black  { left: 57.3cqw; top: 42.4cqw; width: 7.8cqw; height: 8cqw; }

/* Grok Bot 本体 */
.fv-main {
  left: 36.5cqw;
  top: 34cqw;
  width: 21cqw;
  z-index: 3;
  text-align: center;
}
.fv-main-bot {
  display: block;
  width: 17.2cqw;
  height: auto;
  margin: 0 auto;
}
.fv-main-name {
  display: block;
  margin-top: 0.4cqw;
  font-family: var(--fv-font-en);
  font-size: 4.5cqw;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fv-ink);
}
.fv-main p {
  margin-top: 0.8cqw;
  font-size: 1.85cqw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fv-ink);
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 1440px) {
  .fv-container { padding: 0 32px; }
  .site-header .brand { font-size: 27px; }
  .site-header .nav { margin-left: 40px; }
  .site-header .nav a { padding: 8px 9px; font-size: 14px; }
  .header-actions .btn { min-width: 0; padding: 12px 22px; font-size: 15px; }
  .header-actions .btn-red { min-width: 0; padding-inline: 26px; }
  .fv-stats li + li { padding-left: 24px; }
}

@media (max-width: 1200px) {
  .site-header .nav { margin-left: 8px; }
  .site-header .nav a { padding: 8px 7px; font-size: 13px; }
  .header-actions .btn-red-outline { display: none; }
  .fv-copy { padding-top: 40px; }
  .fv-actions .btn { height: 58px; }
}

@media (max-width: 1024px) {
  .fv-grid { grid-template-columns: minmax(0, 1fr); }
  .fv-copy { padding-top: 48px; padding-bottom: 0; }
  .fv-title { font-size: clamp(2.3rem, 7vw, 4.5rem); }
  .fv-lead { font-size: 1.05rem; }
  .fv-visual { margin: 36px auto 24px; max-width: 900px; }
}

@media (max-width: 900px) {
  .header-actions { display: none; }
  .site-header .brand { margin-right: auto; }
  .site-header .nav { margin: 0; }
}

@media (max-width: 640px) {
  .fv-container { padding: 0 20px; }
  .site-header .brand { font-size: 22px; }
  .fv-copy { padding-top: 32px; }
  .fv-tagline { font-size: 0.95rem; gap: 10px; }
  .fv-title { font-size: clamp(1.9rem, 9.2vw, 3rem); line-height: 1.3; }
  .fv-lead br { display: none; }
  .fv-actions { margin-top: 28px; }
  .fv-actions .btn { width: 100%; height: 56px; }
  .fv-stats { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .fv-stats li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding-right: 0; }
  .fv-stats li + li { border-left: 0; border-top: 1px solid var(--fv-line); padding: 14px 0 0; }
  .fv-stats .fv-stat-ic { grid-row: 1 / span 2; }
  .fv-stats b { margin-top: 0; }
  .fv-stats b br { display: none; }
  .fv-stats small { margin-top: 2px; }

  /* ビジュアルは簡易版（Bot + ツールカードのリスト）に切り替え */
  .fv-visual { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; margin-bottom: 40px; }
  .fv-visual::before { display: none; }
  .fv-visual > * { position: static; }
  .fv-lines, .fv-man-bg, .fv-person, .fv-excl, .fv-floor, .fv-bubble, .fv-hand-1, .fv-workplace, .fv-mini, .fv-card .ph { display: none; }
  .fv-main { grid-column: 1 / -1; width: auto; margin-bottom: 8px; order: -1; }
  .fv-main-bot { width: 130px; }
  .fv-main-name { font-size: 2rem; }
  .fv-main p { font-size: 0.92rem; white-space: normal; }
  .fv-card { width: auto; align-items: center; padding: 12px 14px; gap: 10px; border-radius: 12px; white-space: normal; border: 1px solid var(--fv-line); box-shadow: none; }
  .fv-card > div { min-width: 0; }
  .fv-card.win { padding-top: 12px; }
  .fv-card.win::before { display: none; }
  .fv-card .lg { width: 30px; height: 30px; margin-top: 0; }
  .fv-card b { font-size: 0.95rem; }
}

@media (max-width: 420px) {
  .fv-visual { grid-template-columns: minmax(0, 1fr); }
}