/* ==========================================================================
   Astrea HP改修 ベータ版 共通スタイル
   トンマナ：設計書_v1.md §0 準拠
   色は7色のみ使用。3D/過剰影/ポップ装飾/曲線レイアウト/指定色以外は禁止。
   ========================================================================== */

:root {
  --color-base: #F8F8FF;      /* ゴーストホワイト背景 */
  --color-main: #041C66;      /* ダークネイビー：見出し・主要CTA */
  --color-sub: #828493;       /* スレートグレー：補足・UI補助 */
  --color-tech: #333333;      /* ダークグレー：本文 */
  --color-accent: #8ED1FC;    /* ブライトブルー：差し色（限定使用） */
  --color-value: #667EEA;     /* パープルブルー：価値訴求 */
  --grad-value: linear-gradient(135deg, #667EEA 0%, #dde4f8 100%);
  --grad-main: linear-gradient(135deg, #041C66 0%, #1F61D8 100%);

  /* 2026-07-27 会社OS 01_会社概要.md タイポグラフィ確定に合わせ適用（Noto Sans JP / Inter、フォールバックは既存システムフォント） */
  --font-base: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Segoe UI",
    Roboto, system-ui, sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --header-height: 72px;
  --container-width: 1120px;

  /* 2026-07-23 AIっぽさ監査：プレースホルダの「未完成感」を抑える控えめな斜線パターン（sub色の透過のみ、新規色なし） */
  --placeholder-pattern: repeating-linear-gradient(
    135deg,
    rgba(130,132,147,0.10),
    rgba(130,132,147,0.10) 10px,
    rgba(130,132,147,0.03) 10px,
    rgba(130,132,147,0.03) 20px
  );
}

/* 2026-07-27 目視QA: モバイル横はみ出し対策。gridの1frはminmax(0,1fr)で統一（下記置換済み） */
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  color: var(--color-tech);
  background: var(--color-base);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
}

/* 2026-07-27 目視QA低対応: 下部固定CTA分の余白はモバイルのみに（デスクトップのフッター下64px空白を解消） */
@media (max-width: 768px) {
  body { padding-bottom: 64px; }
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

section { padding: 80px 0; }

@media (max-width: 768px) {
  section { padding: 56px 0; }
}

h1, h2, h3, h4 {
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.3; /* 会社OS規定：見出し1.3（本文1.8はbodyで指定済み） */
}

h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }

p { color: var(--color-tech); }

.section-heading {
  text-align: center;
  margin-bottom: 48px;
}

/* 2026-07-27 単独クラスとして拡張（beta_consistency_audit.md 中「.eyebrowの二重運用」対応）。
   section-heading内（span）・page-header直下（p、パンくず下の説明文）の両方で共通利用する */
.eyebrow {
  display: block;
  color: var(--color-sub);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* 2026-07-27 メディア旗印（Kazu指摘: eyebrow流用ではうすすぎる）。
   視認の主従（設計書§3-3）: 日本語で意味・英名で固有名。valueは印象づけ用途（限定使用の範囲内） */
.flag-title {
  margin-bottom: 14px;
  line-height: 1.4;
}
.flag-title .flag-en {
  display: inline-block;
  font-family: var(--font-en), var(--font-base);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-value);
  letter-spacing: 0.04em;
  margin-right: 12px;
}
.flag-title .flag-jp {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .flag-title .flag-en { display: block; margin-right: 0; }
}

.section-heading .lead {
  color: var(--color-sub);
  margin-top: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* white背景の長文本文にはaccent/subを使わない → 本文色はtech固定 */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 0;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.85; }

.btn-primary {
  background: var(--color-main);
  color: #FFFFFF;
}

.btn-inverse {
  background: #FFFFFF;
  color: var(--color-main);
}

.btn-outline {
  background: transparent;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

.btn-block { width: 100%; }

/* ---------- Icons (line style / inline SVG) ---------- */
.icon {
  width: 28px;
  height: 28px;
  stroke: var(--color-main);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex-shrink: 0;
}

.icon-sub { stroke: var(--color-sub); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-base);
  border-bottom: 1px solid rgba(130,132,147,0.25);
  z-index: 1000;
}

.site-header .header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

/* 2026-07-27 正式ロゴ導入（Drive: logo/png/yoko_logo&name.png 340x110）。会社OS: 変形・エフェクト禁止、余白確保 */
.logo img {
  height: 36px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav ul {
  display: flex;
  gap: 28px;
}

.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-tech);
}

.main-nav a:hover { color: var(--color-main); }

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-cta .btn { padding: 10px 20px; font-size: 14px; }

/* ハンバーガー */
.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-main);
}

@media (max-width: 900px) {
  .main-nav ul { display: none; }
  .hamburger { display: flex; }
}

/* 2026-07-28 Kazu指摘「スマホでCTAが3つあって見にくい」:
   モバイル（下部固定CTAが出る768px以下）はヘッダー内CTA・FV内CTAを非表示にし、下部固定CTAの1本に集約。
   設計書「FV内CTA必須」は、常時画面内にある下部固定CTAが機能的に代替（設計書差分リストに記録） */
@media (max-width: 768px) {
  .header-cta .btn { display: none; }
  .hero .btn { display: none; }
}

/* モバイルメニュー（開閉トグル：checkbox方式） */
#nav-toggle { display: none; }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-base);
  border-bottom: 1px solid rgba(130,132,147,0.25);
  z-index: 999;
  padding: 24px;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-menu a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-main);
}

#nav-toggle:checked ~ .mobile-menu {
  display: block;
}

@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}

/* ---------- モバイル下部固定CTA ---------- */
.mobile-fixed-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: #FFFFFF;
  border-top: 1px solid rgba(130,132,147,0.25);
  padding: 10px 16px;
}

.mobile-fixed-cta .btn { width: 100%; }

@media (max-width: 768px) {
  .mobile-fixed-cta { display: block; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-main);
  color: #FFFFFF;
  padding: 64px 0 32px;
}

/* 2026-07-27 footer-cta削除（Kazu指示: 下部CTA2連発→最終CTA帯に一本化）。CSSもデッドクラス化のため除去 */
.footer-grid {
  display: grid;
  /* 2026-07-28 Kazu指示: サービス一覧列（リンク2列表示）を広めにした4列構成 */
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

/* 2026-07-28 Kazu指示: リンク化した見出し（サービス一覧）も他の列見出しと同じ白文字に */
.footer-col h4 a { color: #FFFFFF; }
.footer-col h4 a:hover { opacity: 0.85; }

.footer-col ul li { margin-bottom: 10px; }

/* 2026-07-28 サービス一覧列: リンクを2列表示（601px以上）。狭幅は1列に戻す */
.footer-links-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}
@media (max-width: 600px) {
  .footer-links-2col { grid-template-columns: minmax(0, 1fr); }
}

.footer-col a {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
}

.footer-col a:hover { color: #FFFFFF; }

.footer-company p {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 1.9;
}

.footer-sns {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.footer-sns a .icon { stroke: #FFFFFF; width: 20px; height: 20px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.footer-legal {
  display: flex;
  gap: 16px;
}

.footer-legal a { color: rgba(255,255,255,0.6); }

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

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hero (FV) ---------- */
.hero {
  background: var(--grad-main); /* 動画読込前・非対応環境のフォールバック */
  color: #FFFFFF;
  /* 2026-07-27 Kazu指示: FV全体を拡大（動画を活かす画面主体の高さ＋中央寄せ） */
  min-height: calc(88vh - var(--header-height));
  padding: 96px 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 2026-07-27 現行サイトFVの背景動画を流用（assets/fv_video.mp4）。
   可読性確保のためネイビーのオーバーレイ（main色の透過）を重ねる */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4,28,102,0.62);
  z-index: 1;
}

.hero .container {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-tagline {
  color: #FFFFFF;
  font-family: var(--font-en), var(--font-base);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}

.hero-tagline span {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
}

.hero h1 {
  color: #FFFFFF;
  font-size: clamp(30px, 5vw, 52px); /* 2026-07-27 FV拡大に合わせて一段大きく */
  margin-bottom: 24px;
}

.hero h1 .accent-word { color: var(--color-accent); }

.hero .sub-copy {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.9);
  margin-bottom: 16px;
}

.hero .note {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 40px;
}

/* ---------- 課題提起リスト ---------- */
.pain-list {
  max-width: 760px;
  margin: 0 auto;
}

.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(130,132,147,0.25);
}

.pain-item .icon { margin-top: 2px; }

.pain-conclusion {
  margin-top: 40px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(130,132,147,0.25);
  border-left: 3px solid var(--color-main);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.pain-conclusion p { color: var(--color-main); font-weight: 700; }

/* ---------- 4ステップカード ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.step-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(130,132,147,0.25);
  padding: 32px 24px;
  text-align: left;
}

.step-card:not(:last-child) {
  border-right: none;
}

.step-card.step-final,
/* 2026-07-27 Kazu指摘「色バランス」: 2×2化でグラデ全面塗りの面積が過大（value使用比率2%規定超過）
   → 塗りをやめ、value罫線＋ラベル色での強調に変更（最終段の差別化は維持、色面積を縮小） */
.card.step-final {
  background: #FFFFFF;
  border: 2px solid var(--color-value);
}

.step-card.step-final h3,
.step-card.step-final .step-num,
.card.step-final h3 { color: var(--color-main); }
.card.step-final .step-num { color: var(--color-value); }

/* 2026-07-27 バックエンド商品群v2.2：4商品カード最終段（マーケティング実行支援プラン）の強調に.step-finalを.cardへ拡張適用 */
.residue-stairs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 32px;
}

/* 2026-07-28 Kazu指摘: スマホで階段（認識→設計図→…）が縦落ち → 縮小して横一列を維持 */
@media (max-width: 600px) {
  .residue-stairs { flex-wrap: nowrap; gap: 2px; }
  .residue-stairs .card-tag { font-size: 11px; padding: 3px 6px; white-space: nowrap; }
  .residue-stairs .step-connector { width: 18px; }
  .residue-stairs .step-connector .icon { width: 16px; height: 16px; }
}

.step-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sub);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

.step-card h3 { margin-bottom: 12px; }

.step-card p { font-size: 14px; color: var(--color-tech); }

.step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: var(--color-sub);
}

.step-grid-wrap {
  display: flex;
  align-items: stretch;
}

.step-grid-wrap .step-card { flex: 1; }

@media (max-width: 900px) {
  .step-grid-wrap { flex-direction: column; }
  .step-grid-wrap .step-connector {
    width: auto;
    height: 24px;
    transform: rotate(90deg);
  }
  .step-card:not(:last-child) {
    border-right: 1px solid rgba(130,132,147,0.25);
    border-bottom: none;
  }
}

/* ---------- Before/After ---------- */
.ba-table {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid rgba(130,132,147,0.25);
}

.ba-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}

.ba-row:not(:last-child) { border-bottom: 1px solid rgba(130,132,147,0.25); }

.ba-cell {
  padding: 20px 24px;
  font-size: 15px;
}

.ba-before {
  color: var(--color-sub);
  border-right: 1px solid rgba(130,132,147,0.25);
}

.ba-after {
  color: var(--color-main);
  font-weight: 700;
}

.ba-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  margin-bottom: 0;
  border: 1px solid rgba(130,132,147,0.25);
  border-bottom: none;
}

.ba-head div {
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-sub);
}

.ba-head .ba-after-head { color: var(--color-main); border-left: 1px solid rgba(130,132,147,0.25); }

/* 2026-07-28 Kazu指摘「スマホでBefore/Afterの表がズレる」:
   1列積み（見出し行と中身の対応が崩れる）をやめ、モバイルでも2列を維持して文字・余白のみ縮小 */
@media (max-width: 600px) {
  .ba-cell { font-size: 13px; padding: 12px 10px; }
  .ba-head div { font-size: 13px; padding: 10px 8px; }
}

/* ---------- 実績・信頼 ---------- */
.trust-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 56px;
  text-align: center;
}

.trust-stat .num {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-main);
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

.trust-stat .label {
  font-size: 13px;
  color: var(--color-sub);
  margin-top: 8px;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.logo-placeholder {
  aspect-ratio: 3 / 2;
  background: var(--placeholder-pattern);
  border: 1px solid rgba(130,132,147,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sub);
  font-size: 12px;
}

@media (max-width: 768px) {
  .trust-stats { grid-template-columns: 1fr; gap: 32px; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- カード共通 (サービス導線・知見・事例・メディア) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: #FFFFFF;
  border: 1px solid rgba(130,132,147,0.25);
  display: flex;
  flex-direction: column;
}

.card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--placeholder-pattern);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sub);
  font-size: 13px;
}

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-tag {
  display: inline-block;
  font-size: 12px;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: 3px 10px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.card-body h3 { margin-bottom: 8px; font-size: 17px; }

/* 2026-07-27 Kazu指摘「文字がみづらい」: sub14px→tech15px（トンマナ「長文にsubを使わない」とも整合） */
.card-body p { font-size: 15px; color: var(--color-tech); flex: 1; }

.card-meta {
  font-size: 12px;
  color: var(--color-sub);
  margin-top: 16px;
  font-family: var(--font-en), var(--font-base);
  font-variant-numeric: tabular-nums;
}

.card-link {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 900px) {
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ---------- 代表メッセージ ---------- */
.message-block {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

.message-photo {
  width: 200px;
  height: 240px;
  background: var(--placeholder-pattern);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sub);
  font-size: 13px;
}

.message-text blockquote {
  font-size: 15px;
  color: var(--color-tech);
  line-height: 2;
  border-left: 3px solid var(--color-main);
  padding-left: 24px;
}

.message-text .signature {
  margin-top: 24px;
  font-weight: 700;
  color: var(--color-main);
  text-align: right;
}

.message-text .quote-short {
  font-size: 17px;
  color: var(--color-main);
  font-weight: 700;
  line-height: 1.9;
}

.message-text .more-link {
  margin-top: 24px;
  display: inline-block;
  font-size: 14px;
  color: var(--color-main);
  font-weight: 700;
  border-bottom: 1px solid var(--color-main);
}

@media (max-width: 768px) {
  .message-block { flex-direction: column; align-items: center; text-align: left; }
}

/* ---------- 代表プロフィール ---------- */
.profile-name {
  font-size: 14px;
  color: var(--color-sub);
  margin-bottom: 32px;
}

.profile-subhead {
  margin-top: 40px;
  margin-bottom: 16px;
}

.profile-achievements li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--color-tech);
}

.profile-achievements li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-main);
}

.profile-details {
  margin-top: 40px;
  border-top: 1px solid rgba(130,132,147,0.25);
  padding-top: 24px;
}

.profile-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-main);
}

.profile-details summary::-webkit-details-marker { display: none; }

.profile-details summary::before {
  content: "＋";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 13px;
}

.profile-details[open] summary::before { content: "－"; }

.profile-details-body { margin-top: 20px; }

.profile-details-body p { margin-bottom: 16px; }
.profile-details-body p:last-child { margin-bottom: 0; }
.profile-details-body .profile-achievements { margin-bottom: 16px; }

/* ---------- 最終CTA帯 ---------- */
.final-cta {
  background: var(--grad-main);
  color: #FFFFFF;
  text-align: center;
  padding: 96px 0;
}

.final-cta h2 { color: #FFFFFF; margin-bottom: 16px; }

.final-cta p { color: rgba(255,255,255,0.85); margin-bottom: 32px; }

/* ---------- ページヘッダー（下層ページ共通） ---------- */
.page-header {
  background: var(--color-base);
  border-bottom: 1px solid rgba(130,132,147,0.25);
  padding: 64px 0 48px;
  text-align: center;
}

.page-header .breadcrumb {
  font-size: 13px;
  color: var(--color-sub);
  margin-bottom: 16px;
}

.page-header .breadcrumb a { color: var(--color-sub); }
.page-header .breadcrumb a:hover { color: var(--color-main); }

.page-header p.lead {
  color: var(--color-sub);
  max-width: 640px;
  margin: 16px auto 0;
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid rgba(130,132,147,0.25);
  padding: 20px 0;
}

.faq-q {
  display: flex;
  gap: 12px;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 8px;
}

.faq-a {
  display: flex;
  gap: 12px;
  color: var(--color-tech);
  font-size: 14px;
}

.faq-mark { color: var(--color-sub); font-weight: 700; flex-shrink: 0; }

/* ---------- 会社概要テーブル ---------- */
.company-table {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid rgba(130,132,147,0.25);
}

.company-table tr { border-bottom: 1px solid rgba(130,132,147,0.25); }

.company-table th, .company-table td {
  text-align: left;
  padding: 18px 16px;
  font-size: 14px;
  vertical-align: top;
}

.company-table th {
  width: 160px;
  color: var(--color-sub);
  font-weight: 500;
}

.company-table td { color: var(--color-tech); }

@media (max-width: 600px) {
  .company-table, .company-table tbody, .company-table tr, .company-table th, .company-table td {
    display: block;
    width: 100%;
  }
  .company-table th { padding-bottom: 4px; border-bottom: none; }
  .company-table tr { padding: 14px 0; }
}

/* ---------- ミッション・ビジョン・バリュー（2026-07-27追加） ---------- */
.mvv-item {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.mvv-item:last-of-type { margin-bottom: 32px; }

/* 2026-07-27 Kazu指摘「色が薄くてみづらい」: sub13px→main・Inter太字16pxに強化 */
.mvv-label {
  font-family: var(--font-en), var(--font-base);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.mvv-statement {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.6;
}

.mvv-card p { color: var(--color-tech); font-size: 14px; }

/* 2026-07-27 同上: 4Sカードの和名もsub→techに強化 */
.mvv-jp {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-tech);
  margin: 4px 0 12px;
}

/* ---------- お問い合わせフォーム ---------- */
.form-wrap { max-width: 640px; margin: 0 auto; }

.form-group { margin-bottom: 24px; }

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 8px;
}

.form-group .required {
  color: var(--color-main);
  font-size: 11px;
  border: 1px solid var(--color-main);
  padding: 1px 6px;
  margin-left: 8px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid rgba(130,132,147,0.45);
  background: #FFFFFF;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-tech);
}

.form-group textarea { min-height: 160px; resize: vertical; }

.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--color-value);
  outline-offset: 1px;
}

.form-note {
  font-size: 12px;
  color: var(--color-sub);
  margin-bottom: 32px;
}

.form-note a { color: var(--color-main); text-decoration: underline; }

/* ---------- サンクスページ ---------- */
.thanks-block {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 0;
}

.thanks-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border: 1px solid var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanks-block p { margin-bottom: 32px; color: var(--color-sub); }

/* ---------- カテゴリセクション見出し（メディア掲載等） ---------- */
.category-block { margin-bottom: 64px; }

.category-block:last-child { margin-bottom: 0; }

.category-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-main);
}

.media-list { border-top: 1px solid rgba(130,132,147,0.25); }

.media-item {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(130,132,147,0.25);
  align-items: baseline;
  flex-wrap: wrap;
}

.media-date {
  font-size: 13px;
  color: var(--color-sub);
  width: 100px;
  flex-shrink: 0;
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

.media-source {
  font-size: 13px;
  color: var(--color-sub);
  width: 160px;
  flex-shrink: 0;
}

.media-title { flex: 1; font-size: 15px; color: var(--color-tech); }

.media-title a { color: var(--color-main); font-weight: 700; }

@media (max-width: 640px) {
  .media-item { flex-direction: column; gap: 4px; }
  .media-date, .media-source { width: auto; }
}

/* ---------- 事例カード：カテゴリタブ（2026-07-27追加。radio+:checkedのみ、JS不使用） ---------- */
.case-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.case-filter-input { display: none; }

.case-tab {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  cursor: pointer;
  user-select: none;
}

/* タブの選択状態表示：inputとcase-tabsは同じ親の兄弟要素（一般兄弟結合子~で参照） */
#case-filter-all:checked ~ .case-tabs label[for="case-filter-all"],
#case-filter-lead:checked ~ .case-tabs label[for="case-filter-lead"],
#case-filter-sales:checked ~ .case-tabs label[for="case-filter-sales"],
#case-filter-cost:checked ~ .case-tabs label[for="case-filter-cost"] {
  background: var(--color-main);
  color: #FFFFFF;
}

/* 絞り込み：選択中のフィルタに一致しないカードのみ非表示（「すべて」は非表示ルールなし＝常時全件表示） */
#case-filter-lead:checked ~ .case-grid .case-item:not(.cat-lead),
#case-filter-sales:checked ~ .case-grid .case-item:not(.cat-sales),
#case-filter-cost:checked ~ .case-grid .case-item:not(.cat-cost) {
  display: none;
}

/* ---------- 事例カード：タグ・状態表示 ---------- */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.case-tags .card-tag { margin-bottom: 0; }

.case-status { margin-top: 16px; }

/* ---------- ユーティリティ ---------- */
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.bg-white { background: #FFFFFF; }

.placeholder-note {
  display: inline-block;
  font-size: 11px;
  color: var(--color-sub);
  border: 1px dashed rgba(130,132,147,0.45);
  padding: 2px 8px;
  margin-left: 8px;
}