/* ========================================
   CSS Variables & Design System
======================================== */
:root {
  /* Colors — warm-neutral canvas (AMARI 寄せ: 余白・余韻のエディトリアル / 緑ブランドと有機的に調和) */
  --color-bg: #f9f8f5;          /* was #fafbfc — クール→ごく淡い暖オフホワイト */
  --color-bg-secondary: #efece6; /* was #ebeff4 — 暖中間パネル */
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f3f0ea; /* was #eef1f6 — 暖ホバー */
  --surface-2: #f4f1ea; /* was #f1f4f8 — 暖系 alt パネル */
  --color-text: #14181e;
  --color-text-secondary: #525b67;
  --color-text-muted: #5e6878; /* 4.96:1 AA (本文可読) */

  /* Brand green ramp (core #2E4034 kept — the spine) */
  --brand-900: #1F2E26;
  --brand-800: #24332A;
  --brand-700: #2E4034; /* ★core 11.06:1 on white */
  --brand-700-rgb: 46, 64, 52; /* ↑ の RGB 成分。rgba(var(--brand-700-rgb), α) で透明度付き参照を一元化 */
  --brand-600: #335245;
  --brand-500: #46604F;
  --brand-100: #e3eae5;
  --brand-50:  #eef2ef; /* sage tint section bg */
  /* Single accent (refined blue) */
  --accent: #43638C;
  --accent-deep: #324E72;
  --accent-50: #eef2f7;

  /* Aliases — keep all downstream var() references working */
  --color-primary: var(--brand-700);
  --color-primary-light: var(--brand-500);
  --color-primary-dark: var(--brand-900);
  --icon-accent: var(--brand-700);
  --color-accent: var(--accent);
  --color-accent-warm: var(--accent-deep);
  --color-success: #10b981;
  --color-error: #b42318;

  /* Border Colors → 3 tokens */
  --color-border: rgba(var(--brand-700-rgb), 0.12);
  --color-border-light: rgba(var(--brand-700-rgb), 0.06);
  --color-border-strong: rgba(var(--brand-700-rgb), 0.22);
  --color-border-glow: var(--color-border-strong); /* alias (glow vocab dropped) */

  /* Gradients — flattened via cascade. Only .hero-title keeps an inline signature gradient. */
  --gradient-primary: var(--brand-700);
  --gradient-hero-bg: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--brand-700-rgb), 0.08) 0%,
    transparent 60%
  );
  --gradient-card: transparent;
  --gradient-text: var(--brand-700);

  /* Typography — Zen Kaku Gothic New (JP/UI) + Space Grotesk (Latin/numeral display) */
  --font-sans:
    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  --font-display:
    "Space Grotesk", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-num: var(--font-display);
  --font-size-xs:   clamp(0.72rem, 0.69rem + 0.18vw, 0.78rem);
  --font-size-sm:   clamp(0.82rem, 0.79rem + 0.20vw, 0.90rem);
  --font-size-base: clamp(0.94rem, 0.90rem + 0.24vw, 1.02rem);
  --font-size-lg:   clamp(1.06rem, 1.00rem + 0.32vw, 1.20rem);
  --font-size-xl:   clamp(1.22rem, 1.12rem + 0.50vw, 1.45rem);
  --font-size-2xl:  clamp(1.42rem, 1.24rem + 0.85vw, 1.85rem);
  --font-size-3xl:  clamp(1.70rem, 1.40rem + 1.40vw, 2.45rem);
  --font-size-4xl:  clamp(2.10rem, 1.60rem + 2.40vw, 3.30rem);
  --font-size-5xl:  clamp(2.55rem, 1.95rem + 2.90vw, 4.40rem);
  --tracking-display: -0.018em;
  --tracking-jp-head: 0.02em;  /* 和文見出し: 開けすぎず締めすぎず（CJKは負トラッキング禁止） */
  --tracking-eyebrow: 0.22em;  /* eyebrow（Latin大文字）エディトリアル */
  --tracking-jp-body: 0.012em;
  --tracking-num: 0.005em;
  --leading-jp-body: 1.85;
  --leading-jp-head: 1.4;
  --leading-jp-lead: 1.9;
  --measure-jp: 40em;
  --measure-jp-wide: 42em;

  /* Weight polarity — 階層の単一ソース（凡庸な全800を排し、見出しは600+強調語700） */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-head: 600;
  --weight-head-strong: 700;
  --weight-display: 700;

  /* Semantic: green = brand/authority, blue = verifiable（検証可能の意味を青に一元化） */
  --accent-rgb: 67, 99, 140;
  --verify: var(--accent-deep);            /* #324E72 = 6.0:1 on white (AA) */
  --verify-bg: rgba(67, 99, 140, 0.08);
  --verify-border: rgba(67, 99, 140, 0.30);

  /* Card system tokens */
  --card-radius: 14px;
  --card-pad: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
  --card-border: 1px solid var(--color-border);
  --card-border-hover: rgba(var(--brand-700-rgb), 0.28);
  --hairline: 1px solid rgba(var(--brand-700-rgb), 0.10);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.25rem;
  --space-3xl: 2.75rem;
  --space-4xl: 3.75rem;

  /* Border Radius — 4-step + pill/full (crisp, not over-rounded) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 18px; /* alias → xl (radius capped at 18px) */
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Elevation — disciplined subtle system (names kept as aliases) */
  --elev-0: none;
  --elev-1: 0 1px 1px rgba(var(--brand-700-rgb), 0.04), 0 1px 3px rgba(var(--brand-700-rgb), 0.06);
  --elev-2: 0 1px 2px rgba(var(--brand-700-rgb), 0.05), 0 4px 12px -2px rgba(var(--brand-700-rgb), 0.08);
  --elev-3: 0 2px 4px rgba(var(--brand-700-rgb), 0.06), 0 10px 24px -6px rgba(var(--brand-700-rgb), 0.12);
  --elev-4: 0 4px 8px rgba(var(--brand-700-rgb), 0.08), 0 20px 44px -12px rgba(var(--brand-700-rgb), 0.18);
  --ring-focus: 0 0 0 3px rgba(var(--brand-700-rgb), 0.45); /* WCAG 2.2 focus ~5.7:1 */
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);
  --shadow-xl: var(--elev-3); /* xl downgraded — no 56px blurs */
  --shadow-glow: var(--elev-1); /* glow killed */
  --shadow-glow-lg: var(--elev-1);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-height: 70px;
  --container-max: 1200px;
  --container-narrow: 800px;
}

/* 固定ヘッダーをノッチ等の上部セーフエリアから退避させる。 */
:root {
  --notice-height: env(safe-area-inset-top, 0px);
}

/* ========================================
   Reset & Base Styles
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* アンカー停止位置: ヘッダー + 上部セーフエリア + 視覚的余裕(1.5rem)。
     これで #company 等にジャンプしたとき見出しがヘッダーに食い込まない */
  scroll-padding-top: calc(var(--header-height) + var(--notice-height, 0px) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 固定ヘッダー分は html の scroll-padding-top で一元管理する。 */
section[id],
.notice-page__card[id] {
  scroll-margin-top: 0;
}

/* モバイルはヘッダー高に合わせて停止位置を調整 */
@media (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--header-height) + var(--notice-height, 0px) + 1rem);
  }
  section[id],
  .notice-page__card[id] {
    scroll-margin-top: 0;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--leading-jp-body);
  letter-spacing: 0.01em;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: "palt" 1;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 数値・統計は Space Grotesk + 等幅数字（揃った数字＝設計された印象） */
.stat-num, .credly-dashboard__count, .client-net__hub-num, [class*="-num"] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* ========================================
   Utility Classes
======================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

/* Icon Utilities */
.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon-lg {
  width: 1.5em;
  height: 1.5em;
}

.icon-xl {
  width: 2em;
  height: 2em;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   Header
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  top: var(--notice-height, 0px); /* 上部セーフエリア分を確保 */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.1);
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-lg);
}

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

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 700;
  z-index: 1001;
}

.logo-icon {
  font-size: 1.5rem;
}

/* ロゴ画像 */
.logo-img {
  max-width: 160px;
  max-height: 48px;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: brightness(1);
  transition: filter var(--transition-fast);
}

.logo:hover .logo-img {
  filter: brightness(1.2);
}

/* MURAMURA 公式シンボルマーク（黒地に白円＋3本線） */
.logo-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px; /* 縮ませない・伸ばさない（テキストロゴが縮んでも崩れない） */
  object-fit: contain;
  border-radius: 6px; /* 黒い四角の角を僅かに丸めて Apple HIG 風 */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--elev-1);
}

.logo:hover .logo-mark {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: var(--elev-3);
}

@media (max-width: 768px) {
  .logo-img {
    max-width: 140px;
    max-height: 40px;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
}

@media (max-width: 480px) {
  .logo-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 5px;
  }
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}

.hamburger {
  position: relative;
  width: 24px;
  height: 18px;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: var(--transition-base);
}

.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Navigation: 強制1行表示。ナビ項目10個でも改行させない */
.nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.35rem, 0.9vw, 0.9rem);
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  font-size: clamp(0.74rem, 0.9vw, 0.88rem);
  color: var(--color-text);
  padding: 0.5rem 0.15rem;
  transition: color var(--transition-fast);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
}

.nav-list a:hover {
  color: var(--color-primary-light);
}

.nav-cta {
  padding: var(--space-sm) var(--space-lg) !important;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  color: white !important;
  font-weight: 500;
}

.nav-cta:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

/* Mobile Navigation */
@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    padding: calc(var(--header-height) + var(--notice-height, 0px) + var(--space-xl)) var(--space-xl)
      var(--space-xl);
    overflow-y: auto;
    transition: right var(--transition-slow);
    box-shadow: var(--shadow-xl);
    /* 修正 (2026-05-30): drawer 最下部の CTA が sticky-cta(1000)/trust-banner(990) に
       覆われてタップ不能だった問題を解消。modal(1500) 未満・他固定要素より上に配置 */
    z-index: 1400;
  }

  .nav.is-open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-list a {
    display: block;
    padding: var(--space-lg) 0;
    font-size: var(--font-size-base);
  }

  .nav-cta {
    margin-top: var(--space-lg);
    text-align: center;
    display: block;
  }
}

/* ========================================
   Hero Section
======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + var(--notice-height, 0px) + var(--space-3xl)) 0 var(--space-3xl);
  overflow: hidden;
}

/* パーティクル背景 */

/* AIオーブ - 右側の光るエフェクト */
.ai-orb {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  z-index: 1;
  pointer-events: none;
}



@keyframes float1 {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-2px) rotate(2deg);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-20px) rotate(-1deg);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-2px) rotate(1deg);
  }
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  z-index: 3;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(var(--brand-700-rgb), 0.07);
  border: 1px solid rgba(var(--brand-700-rgb), 0.22);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.hero-title {
  font-size: var(--font-size-5xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, #20242b 0%, #2E4034 60%, #43638C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-primary-light);
  margin-bottom: var(--space-xl);
  font-weight: 400;
}

.hero-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.8;
  /* Rule #0-12: 複数行の説明文は左揃え。中央寄せの hero でも本文は左に揃え可読性を確保 */
  text-align: left;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}


.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.2;
}

.stat-value small {
  font-size: 0.5em;
  font-weight: 400;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

/* Hero: 主要認定のラベル付きタイル・ギャラリー（主役級サイズ・名称＋発行元＋検証）
   旧"カードの壁"の階層バナー/3行説明/グラデ枠は廃し、AMARI 寄せのフラットで均一なタイルに */
.hero-creds {
  margin: var(--space-2xl) auto 0;
  max-width: 940px;
}
.hero-creds__label {
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.hero-creds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 28vw, 200px), 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-cred { display: flex; }
.hero-cred__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.hero-cred__link:hover,
.hero-cred__link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--elev-2);
}
.hero-cred__mark {
  width: clamp(64px, 13vw, 84px);
  height: clamp(64px, 13vw, 84px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-cred__mark img,
.hero-cred__mark svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-cred__mark picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-cred__mark img { filter: saturate(0.92); } /* Credly の派手色を一段落ち着かせ AMARI のトーンに */
.hero-cred__mark--issuer img {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}
.hero-cred__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.35;
}
.hero-cred__issuer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.hero-cred__verify {
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.hero-cred__link:hover .hero-cred__verify,
.hero-cred__link:focus-visible .hero-cred__verify { opacity: 1; }
@media (hover: none) {
  .hero-cred__verify { opacity: 0.8; } /* タッチ端末では常時表示 */
}
/* 認定フッター: 要約文 ＋ アイコン付きピル型リンク（説明と行動を分離して視認性最大化。
   主CTA「無料相談」を埋もれさせないようアウトライン基調で階層を保つ / Rule #0-5・#0-8④） */
.hero-creds__footer {
  margin: var(--space-xl) auto 0;
  max-width: 740px;
  text-align: center;
  /* 装飾（粒子・AIオーブ）の上でも確実に読めるよう、要約＋CTAを控えめなクリーン面に載せる。
     背景は半透明で装飾が透け、動的さは保ちつつ文字面だけ安定させる */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.hero-creds__more {
  font-size: var(--font-size-base); /* sm→base で拡大 */
  color: var(--color-text); /* secondary→text: 最大コントラスト 16.8:1 */
  font-weight: 500;
  line-height: 1.85;
  max-width: 44em;
  margin: 0 auto var(--space-md);
}
.hero-creds__more strong {
  color: var(--color-text);
  font-weight: 700;
}
.hero-creds__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
.hero-creds__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px; /* WCAG 2.5.5 タッチターゲット */
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.hero-creds__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hero-creds__link:hover,
.hero-creds__link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: var(--color-bg-card-hover);
}
.hero-creds__link--strong {
  border-color: var(--color-primary);
  box-shadow: var(--elev-1);
}

/* タブレット〜中サイズ画面でAIオーブとフローティング統計を非表示（被り防止） */
@media (max-width: 1280px) {

  .hero-content {
    max-width: 100%;
    padding: 0 var(--space-md);
  }
}
/* ハブは通常高さのヒーローになる ≥1280px でのみ表示（狭幅では右カラムが折返しヒーローが極端に縦長になり、ハブが浮くため非表示） */
@media (max-width: 1279px) {
  .ai-orb { display: none; }
}

/* ========================================
   Buttons
======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 500;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  white-space: normal;
  text-wrap: balance;
  min-height: 48px;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.3);
}

.btn-outline:hover {
  background: rgba(var(--brand-700-rgb), 0.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

.btn-full {
  width: 100%;
}

.btn-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-warm);
  color: #000;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 480px) {
  .hero-cta .btn {
    width: 100%;
  }

  .btn-badge {
    position: static;
    margin-left: var(--space-sm);
  }
}

/* ========================================
   Section Styles
======================================== */
section {
  /* AMARI 寄せ: デスクトップで縦余白を広げ「余白・余韻」を演出。モバイルは clamp 下限で従来同等にコンパクト */
  padding: clamp(3.5rem, 2.6rem + 3.4vw, 6.5rem) 0;
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 600; /* AMARI 寄せ: 700→600 で重さを抜きエディトリアルな静けさに（"全部太字" の是正も兼ねる） */
  letter-spacing: var(--tracking-jp-head); /* ゆったり字間 */
  text-align: center;
  margin-bottom: var(--space-lg); /* 見出し下の余白を確保（md→lg） */
  line-height: 1.35;
}

.section-title.light {
  color: white;
}

.section-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: left;
  margin-bottom: var(--space-2xl);
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.section-desc.large {
  font-size: var(--font-size-lg);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-2xl);
}

.section-cta p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.trust-badge {
  padding: var(--space-sm) var(--space-md);
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: #0a9966;
}

/* 適格請求書発行事業者バッジ（国税庁公表サイトで第三者検証可能・画像リンク）。
   ピル型 .trust-badge をリセットし、レスポンシブ画像コンテナとして表示 */
.trust-badge--invoice {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  max-width: 100%;
  line-height: 0; /* 画像下の余白除去 */
  box-shadow: 0 2px 12px rgba(var(--brand-700-rgb), 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trust-badge--invoice img {
  display: block;
  width: 100%;
  max-width: 460px; /* 原寸620pxを抑え余白とのバランスを確保 */
  height: auto;     /* アスペクト比維持(CLS防止) */
  border-radius: var(--radius-lg);
}
@media (hover: hover) {
  .trust-badge--invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--brand-700-rgb), 0.2);
  }
}
.trust-badge--invoice:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .trust-badge--invoice img { max-width: 100%; }
}

/* フッターの適合・登録バッジ列（WCAG 2.2 AA / 適格請求書発行事業者）— 分かりやすい位置に集約 */
.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 1.75rem);
  margin: 0 0 1.4rem;
}
.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.footer-trust-badge img { display: block; width: 92px; max-width: 100%; height: auto; }
.footer-trust-badge--wcag img { width: 88px; height: 31px; }
.footer-trust-badge--invoice img { width: 182px; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 8px rgba(var(--brand-700-rgb), 0.12); }
@media (hover: hover) {
  .footer-trust-badge:hover { transform: translateY(-2px); opacity: 0.92; }
  .footer-trust-badge--invoice:hover { box-shadow: 0 6px 16px rgba(var(--brand-700-rgb), 0.2); opacity: 1; }
}
.footer-trust-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .footer-trust-badge img { width: 76px; }
  .footer-trust-badge--wcag img { width: 88px; }
  .footer-trust-badge--invoice img { width: 150px; }
}

.footer-conformance-note {
  max-width: 46rem;
  margin: -0.65rem auto 1.2rem;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
  text-align: center;
}

.footer-conformance-note a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* SW 更新通知: 同一ページ滞在中にコンテンツ更新を検知した際のアクセシブルなフォールバック通知。
  下部固定スタック(CTA/trust)の上に表示し被りを防ぐ(Rule #0-4)。AA コントラスト・44px・キーボード対応 */

/* ========================================
   AIO Section
======================================== */
.aio-section {
  background: var(--color-bg-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.feature-card {
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.feature-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.feature-card > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.feature-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-lg);
  position: relative;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
}

.metrics-row {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.metric {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: var(--font-size-xs);
  color: #5e6878; /* WCAG1.4.3: muted #8E9187(3.2)→#5e6878(~5:1) */
  margin-bottom: var(--space-xs);
}

.metric-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-accent);
}

/* ========================================
   Services Section
======================================== */
.services-section {
  background: var(--color-bg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.service-card {
  position: relative;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.service-card:hover {
  background: var(--color-bg-card-hover);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-card.featured {
  border-color: rgba(var(--brand-700-rgb), 0.35);
  background: linear-gradient(
    135deg,
    rgba(var(--brand-700-rgb), 0.05) 0%,
    var(--color-bg-card) 100%
  );
}

.service-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: white;
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.service-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.service-card > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.service-stats {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.service-stat {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: rgba(var(--brand-700-rgb), 0.05);
  border-radius: var(--radius-md);
  text-align: center;
}

.stat-num {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-accent);
}

.stat-txt {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.service-tags span {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(var(--brand-700-rgb), 0.07);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
}

.service-link {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-primary-light);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.service-link:hover {
  color: var(--color-primary);
}

.service-note {
  padding: var(--space-sm) var(--space-md);
  background: rgba(16, 185, 129, 0.07);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: #0a9966;
  text-align: left;
}

/* ========================================
   Problem Section
======================================== */
.problem-section {
  background: var(--color-bg-secondary);
}

.solution-box {
  max-width: 700px;
  margin: 0 auto var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-primary);
  /* Rule #0-12: 複数行本文ボックスは左揃え（中央寄せは行頭が不揃いで日本語可読性を損なう） */
  text-align: left;
}

.solution-box h3 {
  font-size: var(--font-size-xl);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.solution-box p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.approach-card {
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.approach-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.approach-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.approach-card > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.approach-example {
  padding: var(--space-md);
  background: rgba(var(--brand-700-rgb), 0.06);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.approach-example strong {
  color: var(--color-primary);
}

.cta-box {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-2xl);
  background: var(--gradient-card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  text-align: center;
}

.cta-box h4 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.cta-box p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* ========================================
   Works Section
======================================== */
.works-section {
  background: var(--color-bg);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.work-card {
  padding: 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

.work-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.work-card:hover .work-image img {
  transform: scale(1.05);
}

.work-card > span.work-category,
.work-card > h3,
.work-card > p,
.work-card > .work-stats,
.work-card > .work-link {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.work-card > span.work-category {
  margin-top: var(--space-md);
}

.work-card > .work-link {
  padding-bottom: var(--space-lg);
}

.work-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.work-category {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: rgba(99, 102, 241, 0.1);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-primary-light);
  margin-bottom: var(--space-md);
}

.work-card h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.work-card > p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.work-stats {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.work-stats span {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(16, 185, 129, 0.07);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.work-stats strong {
  color: var(--color-success);
}

.work-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary-light);
  font-weight: 500;
}

.work-link:hover {
  color: var(--color-primary);
}

/* ========================================
   Interview Section
======================================== */
.interview-section {
  background: var(--color-bg-secondary);
  text-align: center;
}

.interview-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ========================================
   FAQ Section
======================================== */
.faq-section {
  background: var(--color-bg);
}

.faq-list {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  list-style: none;
  min-height: 60px;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question > span:first-child {
  flex: 1;
  padding-right: var(--space-md);
  text-align: left;
}

.faq-icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-text);
  transition: transform var(--transition-fast);
}

.faq-icon::before {
  width: 14px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-icon::after {
  width: 2px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  padding: 0 0 var(--space-lg) 0;
}

.faq-answer p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ol,
.faq-answer ul {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.faq-answer li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  list-style: disc;
}

.faq-answer ol li {
  list-style: decimal;
}

/* ========================================
   Company Section
======================================== */
.company-section {
  background: var(--color-bg-secondary);
}

.company-philosophy {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.company-philosophy h3 {
  font-size: var(--font-size-xl);
  color: var(--color-primary-light);
  margin-bottom: var(--space-md);
}

.company-philosophy p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.profile-content {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.company-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.company-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.company-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.company-row dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.company-row dd {
  font-size: var(--font-size-sm);
}

.company-row dd a {
  color: var(--color-primary-light);
}

.business-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.business-list li {
  position: relative;
  padding-left: var(--space-md);
}

.business-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .company-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ========================================
   Capabilities Section
======================================== */
.capabilities-section {
  background: var(--color-bg);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.capability-card {
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  text-align: center;
}

.capability-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.capability-card h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.capability-card p {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Timeline */
.timeline {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.timeline h3 {
  font-size: var(--font-size-xl);
  text-align: center;
  margin-bottom: var(--space-sm);
}

.timeline-intro {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-xl);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-primary);
}

.timeline-year {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary-light);
}

.timeline-item p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

@media (max-width: 480px) {
  .timeline-item {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Media Section
======================================== */
.media-section {
  background: var(--color-bg-secondary);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  max-width: 700px;
  margin: 0 auto;
}

.media-item {
  padding: var(--space-lg);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.media-source {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ========================================
   Contact Section
======================================== */
.contact-section {
  background: linear-gradient(
    135deg,
    #edf1f6 0%,
    #e7ebf1 40%,
    #ecf0f6 100%
  );
  padding: var(--space-4xl) 0;
}

/* ★ 「まずは無料相談から始めませんか？」 視認性強化 (2026-05-24)
   問題: .section-title.light は color:white 固定だが、contact-section は light パステル背景
   → 白文字が見えない (コントラスト 1.3:1, WCAG fail)
   対策: contact-section 内ではダーク色のセクションタイトルに上書き + グラデーション装飾
*/
.contact-section .section-title,
.contact-section .section-title.light {
  /* 濃紺ベース (#14181e) で背景 #e7ebf1 に対し 13.5:1 (WCAG AAA pass) */
  color: #14181e !important;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  display: inline-block;
  padding: 0.5rem 1.2rem 0.8rem;
  margin: 0 auto var(--space-lg);
}
.contact-section .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: var(--brand-700);
  border-radius: 999px;
}
/* テキスト中の <br> 後のフレーズに "始めませんか？" 強調 */
.contact-section .section-title br + * {
  color: #2E4034;
}
/* タイトルラッパー: 中央寄せの flex で囲む */
.contact-section > .container {
  text-align: center;
}
/* モバイル: タイトルの余白を圧縮しつつ視認性キープ */
@media (max-width: 640px) {
  .contact-section .section-title {
    padding: 0.4rem 0.7rem 0.7rem;
    font-size: 1.6rem;
    line-height: 1.45;
  }
  .contact-section .section-title::after {
    width: 64px;
    height: 3px;
  }
}

.contact-intro {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.contact-intro p {
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.highlight-text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text) !important;
  margin-top: var(--space-md);
}

.social-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0 auto var(--space-xl);
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background: var(--color-success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.contact-desc {
  text-align: left;
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
}

.contact-channels {
  text-align: center;
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--brand-700-rgb), 0.15);
  border-radius: var(--radius-xl);
  max-width: 400px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.contact-channels h3 {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.contact-channels__action {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
}

.contact-channels__action .line-cta {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.contact-channels__action .line-cta > span {
  min-width: 0;
}

.contact-channels__note {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: left;
}

#legacy-phone-notice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Returning visitors: domain change, kept below the existing first view. */
.domain-notice {
  padding-block: clamp(1rem, 3vw, 2rem);
  color: var(--color-text);
  background: var(--color-bg);
}

.domain-notice__inner {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-align: left;
  overflow-wrap: anywhere;
}

.domain-notice h2 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-text);
}

#domain-change p {
  margin: 0;
  line-height: 1.8;
  -webkit-hyphens: none;
  hyphens: none;
}

.domain-notice a,
#domain-contact-notice a,
#notice-domain-change a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  max-width: 100%;
  color: var(--color-primary);
  line-height: 1.6;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.domain-notice a > span,
#domain-contact-notice a > span {
  min-width: 0;
}

.domain-notice a > svg,
#domain-contact-notice a > svg,
#notice-domain-change a > svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

#notice-domain-change {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .domain-notice__inner {
    padding: var(--space-md);
  }
}

/* ========================================
   Partners Section
======================================== */

/* ========================================
   Footer
======================================== */
.footer {
  background: #eef2f7;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.1);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  grid-column: span 1;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

/* フッター用 MURAMURA 公式シンボルマーク（透過SVG・線色 #14181e） */
.footer-logo-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* フッター背景がダーク系の場合に備え、線色を白寄りに反転 */
.footer-logo-mark {
  filter: invert(0); /* デフォルト（ライト前提） */
}
.footer[data-theme="dark"] .footer-logo-mark,
body[data-theme="dark"] .footer-logo-mark {
  filter: invert(1) brightness(1.3);
}

.footer-logo:hover .footer-logo-mark {
  opacity: 1;
  transform: rotate(-4deg);
}

@media (max-width: 768px) {
  .footer-logo-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
}

.footer-tagline {
  font-size: var(--font-size-sm);
  /* color-text-muted (#9099b8) は light footer (#eef2f7) 上で 3.0:1 で WCAG fail → secondary に変更 */
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.footer-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.footer-address a {
  color: var(--color-primary-light);
}

.footer-nav-group h3,
.footer-nav-group h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.footer-nav-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav-group a {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.footer-nav-group a:hover {
  color: var(--color-text);
}

.footer-area {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.footer-area strong {
  color: var(--color-text);
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-social a {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.legal-link {
  /* WCAG コントラスト向上: muted (3.0:1) → secondary (5.8:1) */
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.legal-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.legal-divider {
  color: var(--color-border);
  font-size: var(--font-size-xs);
}

.copyright {
  font-size: var(--font-size-xs);
  /* WCAG: muted は light footer 上で 3.0:1 でフェイル → secondary に変更 */
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-brand {
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-nav-group {
    text-align: center;
  }

  .footer-nav-group ul {
    align-items: center;
  }

  .footer-social {
    align-items: center;
  }
}

/* ========================================
   Touch Device Optimizations
======================================== */
@media (hover: none) and (pointer: coarse) {
  .service-card:hover,
  .work-card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ========================================
   Reduced Motion
======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ========================================
   Print Styles
======================================== */
@media print {
  .header,
  .mobile-menu-btn,
  .btn,
  .nav,
  .hero-bg {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: var(--space-xl) 0;
  }
}

/* ========================================
   Comparison Table (AIO vs SEO)
======================================== */
.comparison-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.comparison-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-md);
}

.comparison-intro {
  text-align: left;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.8;
}

.comparison-intro strong {
  color: var(--color-accent);
}

.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-2xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

/* 横長テーブルのモバイル用スクロールヒント（見やすさ: 画面外に隠れた列の存在を明示） */
.table-scroll-hint { display: none; }
@media (max-width: 768px) {
  .table-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  .table-scroll-hint svg { flex-shrink: 0; }
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  font-size: var(--font-size-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  background: rgba(var(--brand-700-rgb), 0.08);
  font-weight: 600;
  color: var(--color-text);
}

.comparison-table td {
  color: var(--color-text-secondary);
}

.comparison-table .highlight-col {
  background: rgba(14, 165, 196, 0.06);
  color: var(--color-accent);
  font-weight: 500;
}

.comparison-table th.highlight-col {
  background: rgba(14, 165, 196, 0.12);
  color: var(--color-accent);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* AIO Benefits Cards */
.aio-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.aio-benefit-card {
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  position: relative;
}

.benefit-number {
  display: inline-block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.66; /* WCAG1.4.3: 0.3(1.73)→0.66(大文字3:1超) */
  margin-bottom: var(--space-sm);
}

.aio-benefit-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.aio-benefit-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* CTA Enhancements */
.cta-urgency {
  font-size: var(--font-size-base);
  color: var(--color-accent-warm);
  margin-bottom: var(--space-md);
  text-align: center;
}

.cta-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  text-align: center;
}

/* ========================================
   Company Section Expanded
======================================== */
.company-profile {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.profile-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.profile-avatar {
  width: 120px;
  height: 120px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.profile-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-align: center;
}

.profile-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.profile-content h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-primary-light);
}

.profile-content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
}

.qualifications-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.qualification-tag {
  padding: var(--space-xs) var(--space-md);
  background: rgba(var(--brand-700-rgb), 0.07);
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  /* 長文タグの折り返し許可 */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
  max-width: 100%;
}

/* モバイル: 長い資格名は丸角矩形で折り返し */
@media (max-width: 640px) {
  .qualifications-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .qualification-tag {
    width: 100%;
    border-radius: 12px !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.82rem !important;
    line-height: 1.5;
    text-align: left;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  /* 内部のピル/サブテキストも改行可能に */
  .qualification-tag span,
  .qualification-tag strong {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* 「Professional Cert · 6 Courses」のような追加ピルは別行に */
  .qualification-tag--pro span[style*="background: #FFB900"],
  .qualification-tag--pro > span:last-child {
    margin-left: 0 !important;
    margin-top: 0.3rem !important;
    display: inline-block;
  }
}

/* Mission Vision */
.mission-vision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.mission-card {
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  text-align: left;
}

.mission-card h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mission-card p {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .company-profile {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .profile-content {
    text-align: left;
  }
}

/* ========================================
   Sticky CTA (Mobile)
======================================== */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* タッチ領域を保ちながら、本文を覆う面積を抑える */
  padding: 5px 10px;
  /* 不透明度を 0.95 → 0.99 に上げて trust-banner との重なりが透けないように */
  background: rgba(255, 255, 255, 0.99);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.28); /* 境界線も強化 */
  box-shadow: 0 -1px 0 rgba(var(--brand-700-rgb), 0.12);
  z-index: 999;
  padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
}

.sticky-cta-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  /* 旧 16px → 9px に圧縮。min-height 44px は WCAG 2.5.5 タッチ最小を維持 */
  padding: 9px var(--space-lg);
  background: var(--gradient-primary);
  color: white;
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: 1.3;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-height: 44px;
}

.sticky-cta-mobile a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sticky-cta-mobile .cta-badge {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-warm);
  color: #000;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
}

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

  /* sticky CTA の実測高には safe-area を含むため、ここでは重ねて加算しない。 */
  .footer {
    padding-bottom: calc(var(--space-xl) + var(--bottom-stack-cta) + var(--bottom-stack-trust) + 24px);
  }
}

/* PC では trust-banner が下に表示されるためフッターの裾を確保 */
@media (min-width: 769px) {
  .footer {
    padding-bottom: calc(var(--space-xl) + var(--bottom-stack-trust) + var(--bottom-safe) + 16px);
  }
}

/* ========================================
   Online Status
======================================== */
.online-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-full);
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: pulse 2s infinite;
}

.status-indicator.online {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.status-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.last-response {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
   Cookie Notice
======================================== */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  /* 不透明度を高めて確実な視認性を確保 (0.97 → 1.0) */
  background: #ffffff;
  border-top: 2px solid rgba(var(--brand-700-rgb), 0.35); /* 境界線をくっきり */
  padding: var(--space-md) var(--space-lg);
  display: none; /* Hidden by default, toggled via JS */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  box-shadow: 0 -6px 24px rgba(var(--brand-700-rgb), 0.18); /* シャドウを強化 */
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cookie-notice.show {
  display: flex;
}

.cookie-notice p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 200px;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cookie-reject {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all 0.2s;
}

.cookie-reject:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.cookie-accept {
  padding: var(--space-sm) var(--space-lg);
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast);
  font-size: var(--font-size-sm);
}

.cookie-accept:hover {
  transform: scale(1.02);
}

/* Floating Cookie Settings Button */
.cookie-settings-btn {
  position: fixed;
  bottom: calc(var(--bottom-stack-trust, 68px) + var(--bottom-safe, 0px) + 14px);
  left: 20px;
  z-index: 993;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.3s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
}

.cookie-settings-btn:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

.cookie-settings-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .cookie-notice {
    bottom: 80px; /* Above the sticky CTA (approx 60-70px height) + spacing */
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
  }

  .cookie-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* On mobile, move the settings button up too if needed, or hide it if it overlaps */
  .cookie-settings-btn {
    bottom: calc(var(--bottom-stack-cta, 68px) + var(--bottom-stack-trust, 68px) + 12px);
    left: 10px;
    opacity: 0.85;
  }
}

/* ========================================
   Performance Optimization
======================================== */
.works-section,
.faq-section,
.contact-section,
.partners-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ページ内リンク利用時は、手前の遅延レイアウトを確定して到着位置のずれを防ぐ。 */
body.anchor-navigation-active .works-section,
body.anchor-navigation-active .faq-section,
body.anchor-navigation-active .contact-section,
body.anchor-navigation-active .partners-section {
  content-visibility: visible;
}

/* ========================================
   Mobile Responsiveness Enhancements
======================================== */
@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }

  .partner-card {
    padding: var(--space-lg);
  }

  .legal-partners {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .legal-partner {
    width: 100%;
    max-width: 280px;
  }
}

/* ========================================
   Service Section Images (User Request)
======================================== */
.service-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  background-color: var(--color-bg-secondary);
  position: relative;
}

.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

.service-card:hover .service-image {
  transform: scale(1.05);
  filter: brightness(1.02);
}

/* Hide old icon if present, or style it as overlay if needed */
.service-icon.hidden {
  display: none !important;
}

/* Ensure whole card is clickable and has pointer cursor */
.service-card {
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  height: 100%; /* Ensure equal height */
}

/* Link overlay */
.service-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Badge positioning over image */
.service-card .service-badge {
  z-index: 10;
}

/* ========================================
   Interview Section Images (User Request)
======================================== */
.interview-card {
  display: block;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xl);
  transition: transform 0.4s ease;
  background: black; /* Fallback */
}

.interview-card:hover {
  transform: translateY(-2px);
}

.interview-image-container {
  width: 100%;
  height: 400px;
  position: relative;
}

.interview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
  /* Dark overlay for text readability */
  filter: brightness(0.4);
}

.interview-card:hover .interview-image {
  transform: scale(1.05);
  filter: brightness(0.5);
}

.interview-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  z-index: 2;
  /* Allow clicks to pass through if needed, but text selection might be hard */
}

/* Override existing styles within the card */
.interview-text-overlay .section-title {
  margin-bottom: var(--space-md);
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.interview-text-overlay .section-desc {
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.interview-text-overlay .interview-note {
  color: #bfdbfe !important;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-base) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* 畑山隆則氏（対談）: 写真オーバーレイ上でグラデ文字が読みにくいため、視認性の高い金色＋強い影に上書き */
.interview-text-overlay .gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #8FB179;
  color: #8FB179;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
}


@media (max-width: 768px) {
  .interview-image-container {
    height: auto;
    display: flex;
    flex-direction: column;
    background: #050505;
  }

  .interview-image {
    position: relative;
    width: 100%;
    height: auto; /* Maintain aspect ratio to show full image */
    object-fit: contain;
    filter: brightness(0.9);
    flex-shrink: 0;
  }

  .interview-card:hover .interview-image {
    transform: none;
    filter: brightness(1);
  }

  .interview-text-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding: var(--space-lg) var(--space-md);
    background: linear-gradient(180deg, #050505 0%, #1a1a1a 100%);
  }

  .interview-text-overlay .section-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
  }

  .interview-text-overlay .interview-note {
    margin-bottom: var(--space-md);
  }
}
/* ==========================================================================
   Legal Pages (privacy / terms / notice) — Mobile-First
   ========================================================================== */
.legal-page {
  background:
    radial-gradient(ellipse 72% 44% at 92% 0%, rgba(var(--accent-rgb), 0.08), transparent 68%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--surface-2) 100%);
  padding: calc(var(--header-height) + var(--notice-height, 0px) + clamp(1.5rem, 5vw, 3rem)) 0 clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  overflow-x: clip;
}

.legal-page::before {
  content: "";
  position: absolute;
  width: min(32vw, 22rem);
  height: 1px;
  inset: clamp(6rem, 12vw, 9rem) auto auto 0;
  background: linear-gradient(90deg, var(--brand-700), transparent);
  opacity: 0.22;
  pointer-events: none;
}

.legal-page__container {
  max-width: 960px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: clamp(1rem, 4vw, 1.5rem);
  padding-right: clamp(1rem, 4vw, 1.5rem);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.legal-page__card {
  background: rgba(255, 255, 255, 0.94);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3vw + 0.5rem, 3.25rem);
  box-shadow: var(--elev-3);
}

.legal-page__title-wrap {
  max-width: var(--measure-jp-wide);
  margin: 0 auto clamp(1.5rem, 4vw, 2.75rem);
  text-align: left;
}

.legal-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4.8vw, 2.55rem);
  font-weight: var(--weight-display);
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: var(--leading-jp-head);
  letter-spacing: var(--tracking-jp-head);
  font-feature-settings: 'palt';
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.legal-page__title-mark {
  color: var(--brand-900);
  border-left: 0.22rem solid var(--brand-700);
  padding-left: clamp(0.75rem, 2vw, 1rem);
  display: inline-block;
}

.legal-page__title-sub {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: var(--verify);
  font-weight: bold;
  margin-top: 0.5rem;
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.legal-page__badge {
  display: inline-block;
  background: var(--verify-bg);
  color: var(--verify);
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: clamp(0.7rem, 2.4vw, 0.875rem);
  font-weight: 700;
  margin-bottom: 1rem;
  border: 1px solid var(--verify-border);
  letter-spacing: 0.02em;
}

.legal-page__body {
  max-width: var(--measure-jp-wide);
  margin-inline: auto;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--leading-jp-body);
  letter-spacing: var(--tracking-jp-body);
  word-break: normal;
  overflow-wrap: anywhere;
}

.legal-page__body p {
  margin-bottom: 1.35rem;
}

.legal-page__heading {
  color: var(--brand-900);
  font-size: clamp(1.12rem, 3.3vw, 1.38rem);
  font-weight: var(--weight-head);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.875rem;
  border-left: 3px solid var(--brand-700);
  padding-left: 0.85rem;
  line-height: var(--leading-jp-head);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.legal-page__list {
  margin-left: 1.5rem;
  margin-bottom: 1.25rem;
  padding-left: 0;
}

.legal-page__body ul.legal-page__list {
  list-style-type: disc;
}

.legal-page__body ol.legal-page__list {
  list-style-type: decimal;
}

.legal-page__list li {
  margin-bottom: 0.4rem;
}

.legal-page__callout {
  background: linear-gradient(135deg, var(--brand-50), rgba(255, 255, 255, 0.96));
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--brand-700);
  color: var(--color-text);
  font-weight: var(--weight-body);
  margin-bottom: 1.25rem;
}

.legal-page__callout p:last-child {
  margin-bottom: 0;
}

.legal-page__footer-note {
  background: var(--surface-2);
  border-radius: 8px;
  padding: clamp(0.875rem, 3vw, 1.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.legal-page__footer-note p {
  margin: 0;
}

/* テーブル風レイアウトもモバイル化 */
.legal-page__body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

/* リンクのタップ領域を確保 */
.legal-page__body a {
  color: var(--verify);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.accessibility-conformance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 3vw, 1.35rem);
  align-items: center;
  margin-top: 1.4rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  background: var(--verify-bg);
  border: 1px solid var(--verify-border);
  border-radius: 12px;
  color: var(--color-text);
  text-align: left;
}

.accessibility-conformance__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  min-height: 44px;
  padding: 0.4rem;
  background: #ffffff;
  border-radius: 6px;
}

.accessibility-conformance__logo img {
  display: block;
  width: 88px;
  height: 31px;
}

.accessibility-conformance__body p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.65;
}

.accessibility-conformance__body p + p {
  margin-top: 0.25rem;
}

.accessibility-page .accessibility-conformance__body strong {
  color: var(--brand-900);
  font-size: 1.02rem;
}

.accessibility-claim {
  margin: 0 0 1.4rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  overflow: hidden;
}

.accessibility-claim > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.34fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(var(--brand-700-rgb), 0.035);
}

.accessibility-claim > div + div {
  border-top: 1px solid var(--color-border);
}

.accessibility-claim dt {
  color: var(--brand-900);
  font-weight: 700;
}

.accessibility-claim dd {
  margin: 0;
  color: var(--color-text);
}

.accessibility-page .legal-page__body a {
  color: var(--verify);
}

@media (max-width: 600px) {
  .accessibility-conformance {
    grid-template-columns: 1fr;
  }

  .accessibility-conformance__logo {
    justify-self: start;
  }

  .accessibility-claim > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .footer-conformance-note {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .legal-page {
    padding-top: calc(var(--header-height) + var(--notice-height, 0px) + 1.25rem);
    padding-bottom: 2.5rem;
  }
  .legal-page__card {
    border-radius: 12px;
  }
  .legal-page__list {
    margin-left: 1.1rem;
  }
}

/* footer-legal がスマホで詰まらないよう調整 */
@media (max-width: 600px) {
  .footer-legal {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: center;
  }
  .footer-legal .legal-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
  }
  .footer-legal .legal-divider {
    display: none;
  }
}

/* hero-certification の青系亜種（border色で識別）— 同じ視覚効果でOK */
.hero-certification[style*="rgba(15, 98, 254"]:hover,
.hero-certification[style*="rgba(15, 98, 254"]:focus-visible {
  box-shadow: var(--elev-2);
}
.hero-certification[style*="rgba(0, 164, 239"]:hover,
.hero-certification[style*="rgba(0, 164, 239"]:focus-visible {
  box-shadow: var(--elev-2);
}

/* 履歴テーブル行のhover */
.history-row {
  transition: background-color 0.2s;
}
.history-row:hover {
  background-color: #f1f4f8;
}

/* ==========================================================================
   サイト全体のモバイルフレンドリー強化（全デバイス対象）
   ========================================================================== */

/* ① フォーム入力欄: iOS Safari の自動ズーム防止と、可読性向上を両立 */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: max(16px, 1rem);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
}

/* ② 全リンク・ボタンの最低タップ領域確保（WCAG 2.5.5） */
a,
button,
input[type="submit"],
input[type="button"],
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ナビゲーションリンク等、明示的にタップ可能な要素は44px */
.nav-list a,
.footer-nav-group a,
.legal-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ③ 横スクロール防止の念入り対策 (Android 旧版互換: hidden 併用) */
html, body {
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* 画像・iframe・video・SVG が親要素を超えないことを保証 */
img,
iframe,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* テーブルの横スクロール対応 */
.table-wrap,
table {
  max-width: 100%;
}
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ④ セクション余白の段階化（既存固定値を上書き） */
@media (max-width: 768px) {
  .hero,
  .services-section,
  .works-section,
  .interview-section,
  .faq-section,
  .company-section,
  .capabilities-section,
  .media-section,
  .contact-section,
  .problem-section,
  .aio-section,
  .muramura-solution-section {
    padding-top: clamp(1.5rem, 5vw, 2.75rem);
    padding-bottom: clamp(1.5rem, 5vw, 2.75rem);
  }

  .container {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  /* セクションタイトルの可変サイズ */
  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2.25rem);
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .section-desc {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
    line-height: 1.7;
  }
}

/* ⑤ ヘッダーのモバイル時のタッチ最適化 */
@media (max-width: 768px) {
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    padding: 0.5rem;
  }
  .header .logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ⑥ 固定CTA（sticky-cta-mobile）: コンパクト化（旧 56px → 46px、WCAG 2.5.5 タッチ最小 44px は維持）。
   コンテンツを覆う面積を縮小し視認性を確保 */
.sticky-cta-mobile a {
  min-height: 46px;
  font-size: 1rem;
  font-weight: 700;
}

/* ⑦ Cookie/Notice バナー：スマホで詰まらない */
@media (max-width: 768px) {
  .cookie-notice {
    padding: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
    max-width: calc(100% - 1rem);
    margin: 0 auto;
  }
  .cookie-notice .cookie-actions button {
    min-height: 44px;
    flex: 1;
  }
}

/* ⑧ フォーカスリング: アクセシビリティ */
:focus-visible {
  outline: 2px solid #2E4034;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ⑨ モバイル時のフォントスムージング（iOS Safari の細字対策） */
@media (max-width: 768px) {
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* ⑩ prefers-reduced-motion: アクセシビリティ配慮 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ⑫ 横向き(landscape)時のヒーロー高さ抑制 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto;
    padding-top: clamp(2rem, 5vh, 4rem);
    padding-bottom: clamp(2rem, 5vh, 4rem);
  }
}

/* ==========================================================================
   信頼KPIバナー (Trust Bar) — ヒーロー直下に配置、客観的な実績数値を提示
   ========================================================================== */
.trust-bar {
  background: var(--color-bg-card);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.06);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.06);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   代表者プロフィール: 行動経済学・権威性指標 (Cialdini Authority/Scarcity)
   ========================================================================== */
.profile-name-card__authority {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.founder-credibility {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--brand-50);
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.28);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #20242b;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.founder-credibility svg { color: var(--icon-accent); flex-shrink: 0; }
.founder-credibility strong {
  font-weight: 800;
  color: #2E4034;
  font-size: 0.92rem;
}
.founder-credibility:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--brand-700-rgb), 0.18);
}
/* 希少性訴求は warm-color (オレンジ系) で目を引く */
.founder-credibility--scarcity {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(239, 68, 68, 0.05));
  border-color: rgba(251, 146, 60, 0.4);
  color: #92400e;
}
.founder-credibility--scarcity svg,
.founder-credibility--scarcity strong { color: var(--brand-700); }

@media (max-width: 480px) {
  .founder-credibility {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }
  .founder-credibility strong { font-size: 0.82rem; }
}

/* ==========================================================================
   代表者プロフィール: アバター画像表示の拡張
   ========================================================================== */
.profile-avatar--image {
  width: 180px;
  height: 180px;
  padding: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
  /* ブランドカラーのリング枠（信頼感のあるグラデーション） */
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.9),
    0 0 0 6px rgba(var(--brand-700-rgb), 0.35),
    0 12px 32px rgba(var(--brand-700-rgb), 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-avatar--image picture,
.profile-avatar--image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  /* 顔が上半分にある写真用の位置調整（実写・イラスト両対応）
     上から30%地点で顔の中心が来るように調整（実写の構図に最適化） */
  object-position: center 30%;
}

/* ==========================================================================
   ★ 顧客の悩み解決マップ (Pain → Solution) — 行動経済学 Problem-Solution Fit
   配置: trust-bar 直後・services 直前
   設計: 上半分(悩み)= 赤系、下半分(解決)= 青緑系で心理的対比
   ========================================================================== */
.pain-solution {
  background: var(--surface-2);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
}
.pain-solution::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(var(--brand-700-rgb), 0.08), transparent 70%);
  pointer-events: none;
}
.pain-solution__intro {
  text-align: left;
  max-width: 880px;
  margin: 0 auto 2.5rem;
  position: relative;
}
.pain-solution__eyebrow {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  background: linear-gradient(135deg, #ef4444, #2E4034);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.pain-solution__title {
  font-size: clamp(1.55rem, 4.5vw, 2.4rem);
  font-weight: 800;
  color: #14181e;
  line-height: 1.35;
  margin: 0 0 0.85rem;
}
.pain-solution__highlight {
  background: var(--brand-700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pain-solution__lead {
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  color: #363c45;
  line-height: 1.8;
  margin: 0;
}
.pain-solution__lead strong {
  color: #14181e;
  font-weight: 700;
}

.pain-solution__trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem auto 2rem;
  max-width: 920px;
}
.pain-solution__trust-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  color: #2E4034;
  background: var(--brand-50);
  border: 1px solid rgba(var(--brand-700-rgb), 0.22);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 600;
}
.pain-solution__trust-badge strong {
  color: #14181e;
  font-weight: 800;
  margin-left: 3px;
}
.pain-solution__trust-badge small {
  font-size: 0.72em;
  color: #43638C;
  font-weight: 700;
  margin-left: 4px;
}

/* Smart Shrink: 常時表示する、人を中心にしたDX方針 */
.smart-shrink {
  max-width: 880px;
  margin: -1rem auto 2.25rem;
  padding: 0;
  overflow: hidden;
  background: #fffdfa;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 48px -40px rgba(var(--brand-700-rgb), 0.42);
  position: relative;
}

.smart-shrink__summary {
  min-height: 68px;
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
  align-items: center;
  gap: 1rem;
  color: #14181e;
  background: linear-gradient(110deg, #f1f5ef 0%, #fffaf1 100%);
  position: relative;
}

.smart-shrink__eyebrow {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.smart-shrink__headline {
  margin: 0;
  display: grid;
  gap: 0.2rem;
}

.smart-shrink__headline strong {
  font-size: clamp(0.96rem, 2vw, 1.12rem);
  line-height: 1.55;
}

.smart-shrink__headline small {
  color: #5e6878;
  font-size: 0.78rem;
  font-weight: 600;
}

.smart-shrink__body {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.14);
}

.smart-shrink__body p {
  max-width: 68em;
  margin: 0;
  color: #363c45;
  font-size: 0.92rem;
  line-height: 1.85;
}

.smart-shrink__transformation-note {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem !important;
  padding: clamp(0.9rem, 2.6vw, 1.15rem);
  color: var(--color-text-secondary) !important;
  background: #fff8eb;
  border: 1px solid rgba(142, 104, 53, 0.18);
  border-radius: 16px;
}

.smart-shrink__transformation-note strong {
  color: var(--color-text);
}

.smart-shrink__statement {
  margin-top: 0.9rem !important;
  padding: 0.85rem 1rem;
  background: #f1f5ef;
  border-left: 3px solid rgba(var(--brand-700-rgb), 0.45);
  border-radius: 0 14px 14px 0;
}

.smart-shrink__statement strong {
  color: #20242b;
}

.smart-shrink__principles {
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
}

.smart-shrink__principles li {
  min-width: 0;
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.25rem;
  background: #f3f6f1;
  border: 1px solid rgba(var(--brand-700-rgb), 0.1);
  border-radius: 16px;
}

.smart-shrink__principles li:nth-child(2) {
  background: #f2f5fa;
  border-color: rgba(50, 78, 114, 0.12);
}

.smart-shrink__principles li:nth-child(3) {
  background: #fff7eb;
  border-color: rgba(142, 104, 53, 0.14);
}

.smart-shrink__principles span {
  color: var(--brand-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.smart-shrink__principles strong {
  color: #20242b;
  font-size: 0.84rem;
  line-height: 1.55;
}

.smart-shrink__term-note {
  margin-top: 0.7rem !important;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.7 !important;
}

.smart-shrink__manifesto {
  margin-top: 1.2rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  background: linear-gradient(120deg, #edf3ed 0%, #f8f3e9 100%);
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: 18px;
}

.smart-shrink__manifesto > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.smart-shrink__manifesto p {
  color: var(--color-text);
  font-size: clamp(0.94rem, 2.1vw, 1.06rem);
  line-height: 1.75;
}

.smart-shrink__manifesto strong {
  color: var(--brand-900);
}

.smart-shrink__promises {
  margin-top: 1.35rem;
}

.smart-shrink__promises-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.8rem;
}

.smart-shrink__promises-head > span {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.smart-shrink__promises-head h3 {
  margin: 0;
  color: #20242b;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.5;
}

.smart-shrink__promise-list {
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  list-style: none;
}

.smart-shrink__promise-list li {
  min-width: 0;
  padding: 0.9rem 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
}

.smart-shrink__promise-number {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.74rem;
  font-weight: 800;
}

.smart-shrink__promise-list li > span:last-child {
  display: grid;
  gap: 0.25rem;
}

.smart-shrink__promise-list strong {
  color: #20242b;
  font-size: 0.86rem;
  line-height: 1.5;
}

.smart-shrink__promise-list small {
  color: #36526a;
  font-size: 0.875rem;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .smart-shrink {
    margin-top: -0.75rem;
  }

  .smart-shrink__summary {
    min-height: 88px;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .smart-shrink__principles {
    grid-template-columns: 1fr;
  }

  .smart-shrink__promise-list {
    grid-template-columns: 1fr;
  }
}

.pain-solution__lead-new {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 800;
  color: #ffffff;
  background: var(--brand-700);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  vertical-align: 0.1em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}

/* NEW pain-card variant: subtle orange accent + corner ribbon */
.pain-card--new {
  position: relative;
  border: 1px solid rgba(var(--accent-rgb), 0.35) !important;
  box-shadow: var(--elev-2);
}
.pain-card--new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-700);
  border-radius: 18px 18px 0 0;
}
.pain-card__new-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--brand-700);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: var(--elev-2);
}

.pain-solution__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.pain-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(var(--brand-700-rgb), 0.04),
    0 12px 32px rgba(var(--brand-700-rgb), 0.08);
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.12);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.pain-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-700-rgb), 0.42);
  box-shadow:
    0 6px 18px rgba(var(--brand-700-rgb), 0.06),
    0 22px 48px rgba(var(--brand-700-rgb), 0.2);
}

/* 悩みパート: 赤系の警告色で「自分ごと」化 */
.pain-card__pain {
  padding: 1.15rem 1.35rem 1.2rem;
  background: var(--color-bg-card);
  border-bottom: 1.5px dashed rgba(239, 68, 68, 0.3);
  position: relative;
}
.pain-card__pain-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  background: rgba(239, 68, 68, 0.12);
  color: var(--brand-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}
.pain-card__pain-label::before {
  content: "💭";
  font-size: 0.85rem;
}
.pain-card__pain-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #525b67;
}
.pain-card__pain-text strong {
  color: #3E5647;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 矢印（悩み→解決の遷移） */
.pain-card__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -14px auto 0;
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 2px solid rgba(var(--brand-700-rgb), 0.35);
  border-radius: 50%;
  color: #2E4034;
  box-shadow: 0 3px 8px rgba(var(--brand-700-rgb), 0.2);
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}
.pain-card:hover .pain-card__arrow {
  background: var(--brand-700);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(2px);
  transition: all 0.2s ease;
}

/* 解決パート: 青緑系で「希望と安心」を伝える */
.pain-card__solution {
  padding: 1.1rem 1.35rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pain-card__solution-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  background: linear-gradient(135deg, rgba(var(--brand-700-rgb), 0.12), rgba(16, 185, 129, 0.12));
  color: #2E4034;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 999px;
  margin-bottom: 0.55rem;
  align-self: flex-start;
}
.pain-card__solution-label::before {
  content: "✓";
  color: #059669;
  font-weight: 900;
}
.pain-card__solution-title {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #14181e;
  line-height: 1.5;
}
.pain-card__solution-title strong {
  color: #2E4034;
  background: var(--brand-50);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.pain-card__solution-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  flex: 1;
}
.pain-card__solution-list li {
  position: relative;
  padding: 0.32rem 0 0.32rem 1.5rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #363c45;
}
.pain-card__solution-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.pain-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.7rem;
  margin-top: auto;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.12);
}
.pain-card__cert {
  font-size: 0.74rem;
  color: #5e6878;
  line-height: 1.5;
}
.pain-card__price {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--brand-700);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}

/* ==========================================================================
   ★★★ pain-card 拡張: 該当サービス一覧 (details/summary 折りたたみ)
   ========================================================================== */
.pain-card__services-details {
  margin-top: 1rem;
  border-top: 1px dashed rgba(var(--brand-700-rgb), 0.18);
  padding-top: 0.85rem;
}
.pain-card__services-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.85rem;
  background: var(--brand-50);
  color: #2E4034;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.pain-card__services-summary::-webkit-details-marker { display: none; }
.pain-card__services-summary::after {
  content: "▾";
  margin-left: 4px;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.pain-card__services-details[open] .pain-card__services-summary::after {
  transform: rotate(180deg);
}
.pain-card__services-summary:hover {
  background: var(--brand-50);
  border-color: rgba(var(--brand-700-rgb), 0.4);
}
.pain-card__services-summary strong {
  color: #14181e;
}
.pain-card__services-icon {
  font-size: 1rem;
  line-height: 1;
}
.pain-card__services-list {
  list-style: none;
  padding: 0.75rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pain-card__service {
  padding: 0.7rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.08);
  border-left: 3px solid #2E4034;
  border-radius: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pain-card__service:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 10px rgba(var(--brand-700-rgb), 0.1);
}
.pain-card__service-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.pain-card__service-head strong {
  font-size: 0.86rem;
  color: #14181e;
  font-weight: 700;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}
.pain-card__service-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand-700);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.pain-card__service-meta {
  display: block;
  font-size: 0.72rem;
  color: #5e6878;
  line-height: 1.45;
  margin-top: 0.15rem;
}
.pain-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1rem;
  padding: 0.6rem 1.1rem;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  align-self: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.3);
}
.pain-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--brand-700-rgb), 0.4);
}
/* Article behaves as the previous link card */
article.pain-card {
  text-decoration: none;
  color: inherit;
}
@media (max-width: 600px) {
  .pain-card__services-summary {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
  }
  .pain-card__service {
    padding: 0.55rem 0.7rem;
  }
  .pain-card__service-head strong {
    font-size: 0.8rem;
  }
}

/* 末尾 CTA */
.pain-solution__cta {
  text-align: center;
  margin: 2.5rem auto 0;
  max-width: 720px;
}
.pain-solution__cta-note {
  font-size: 0.92rem;
  color: #4d5560;
  margin: 0 0 1rem;
  line-height: 1.7;
}
.pain-solution__cta-note strong {
  color: #2E4034;
  font-weight: 700;
}

/* モバイル最適化 */
@media (max-width: 640px) {
  .pain-solution__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pain-card__pain {
    padding: 1rem 1.1rem 1.1rem;
  }
  .pain-card__pain-text {
    font-size: 0.9rem;
  }
  .pain-card__solution {
    padding: 1rem 1.1rem 1.2rem;
  }
  .pain-card__solution-title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   認定の掲載区分 — 発行主体や用途が異なる実績を分けて表示
   ========================================================================== */
.authority-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem auto 0;
  max-width: 1200px;
}

.authority-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: #ffffff;
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.authority-tier:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--brand-700-rgb), 0.15);
}

.authority-tier__rank {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--brand-700);
  border-radius: 999px;
}
.authority-tier__label {
  font-size: 0.92rem;
  font-weight: 800;
  color: #14181e;
  letter-spacing: -0.005em;
}
.authority-tier__detail {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #20242b;
}
.authority-tier__detail strong {
  color: #14181e;
  font-weight: 700;
}
.authority-tier__detail small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: #4d5560;
  line-height: 1.5;
}

/* 掲載区分の色はブランド緑に統一。rank は白文字 AA を満たす濃緑。 */
.authority-tier--top {
  border-color: rgba(var(--brand-700-rgb), 0.45);
  background: var(--color-bg-card);
}
.authority-tier--top .authority-tier__rank {
  background: var(--brand-700);
}
.authority-tier--top::before {
  content: "★";
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-size: 1.4rem;
  color: #2E4034;
  filter: drop-shadow(0 1px 2px rgba(var(--brand-700-rgb), 0.35));
}

.authority-tier--global {
  border-color: rgba(var(--brand-700-rgb), 0.4);
  background: var(--color-bg-card);
}
.authority-tier--global .authority-tier__rank {
  background: var(--brand-700);
}

.authority-tier--specialist {
  border-color: rgba(var(--brand-700-rgb), 0.35);
  background: var(--color-bg-card);
}
.authority-tier--specialist .authority-tier__rank {
  background: var(--brand-700);
}

.authority-tier--foundation {
  border-color: rgba(var(--brand-700-rgb), 0.3);
  background: var(--color-bg-card);
}
.authority-tier--foundation .authority-tier__rank {
  background: var(--brand-700);
}

@media (max-width: 640px) {
  .authority-tiers {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .authority-tier {
    padding: 0.95rem 1rem 1rem;
  }
  .authority-tier__label {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   SkillUp ブランド色 (BA / BPMN 系・新規認定)
   ========================================================================== */
.brand--skillup {
  color: #0084c7;
  font-weight: 700;
}
.top-cert-card--skillup {
  border-color: rgba(0, 132, 199, 0.4);
}
.top-cert-card--skillup .top-cert-card__rank {
  background: var(--brand-700);
  color: #ffffff;
}

/* ==========================================================================
   ★ IBM BA Capstone + Credly Digital Badge カード (HR業界検証可能・PREMIUM)
   ========================================================================== */
.brand--credly {
  color: var(--brand-700);
  font-weight: 800;
}
.top-cert-card--ibm-capstone {
  border: 2px solid rgba(15, 98, 254, 0.55);
  background: var(--color-bg-card);
  position: relative;
  overflow: hidden;
}
.top-cert-card--ibm-capstone::before {
  content: "🎖️";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.3rem;
  filter: drop-shadow(0 1px 3px rgba(15, 98, 254, 0.45));
  z-index: 2;
}
.top-cert-card--ibm-capstone .top-cert-card__rank {
  background: var(--brand-700);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.top-cert-card--ibm-capstone .top-cert-card__name {
  color: #003a8c;
}

/* ==========================================================================
   ★ IIBA ECBA 受験準備カード (PREMIUM 最上位扱い・世界標準BA認定への到達)
   ========================================================================== */
.brand--iiba {
  color: #1d4ed8;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.top-cert-card--ecba {
  border: 2px solid rgba(29, 78, 216, 0.55);
  background: var(--color-bg-card);
  position: relative;
  overflow: hidden;
}
.top-cert-card--ecba::before {
  content: "★";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.5rem;
  color: #5E8C4E;
  filter: drop-shadow(0 1px 3px rgba(94, 140, 78, 0.5));
  z-index: 2;
}
.top-cert-card--ecba .top-cert-card__rank {
  background: var(--brand-700);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.top-cert-card--ecba .top-cert-card__name {
  color: #2E4034;
}
.top-cert-card--ecba:hover {
  box-shadow: 0 14px 36px rgba(var(--brand-700-rgb), 0.25), 0 4px 12px rgba(var(--brand-700-rgb), 0.15);
  transform: translateY(-2px) scale(1.01);
}

/* PREMIUM 帯共通の輝き */
.top-cert-card--premium {
  position: relative;
}
.top-cert-card--premium::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #5E8C4E, transparent);
}
@keyframes premium-shine {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* 写真未配置時のイニシャルフォールバック (YY) */
.profile-avatar__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--brand-700);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
/* 画像エラー時だけJSが付けるclassで表示。:has()非対応端末にも対応。 */
.profile-avatar--image .profile-avatar__initials {
  display: none;
}
.profile-avatar--image.profile-avatar--fallback .profile-avatar__initials {
  display: flex;
}
.profile-avatar--image.profile-avatar--fallback picture {
  display: none;
}

/* 実写の場合、居酒屋の暖色照明感を引き出すフィルター
   - saturate: 暖かみある色彩を強調
   - contrast: メリハリで顔をくっきり
   - brightness: 暗くなりがちな室内写真を程よく明るく
   - 黄金比に近い微調整値で "自然な美化" を実現 */
.profile-avatar--image .profile-avatar__photo {
  filter: saturate(1.08) contrast(1.05) brightness(1.04);
  transition: filter 0.3s ease, transform 0.4s ease;
}
.profile-avatar--image:hover .profile-avatar__photo {
  filter: saturate(1.15) contrast(1.08) brightness(1.07);
  transform: scale(1.03);
}

.profile-avatar--image:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(var(--brand-700-rgb), 0.5),
    0 18px 40px rgba(var(--brand-700-rgb), 0.28);
}

/* フォールバックSVG: 画像読み込み成功時は隠す */
.profile-avatar--image .profile-avatar__fallback-svg {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 画像読み込み失敗時のみフォールバックSVGを表示 */
.profile-avatar--image.profile-avatar--fallback {
  background: transparent;
}
.profile-avatar--image.profile-avatar--fallback .profile-avatar__fallback-svg {
  display: block;
}

/* モバイル時は少し小さく */
@media (max-width: 768px) {
  .profile-avatar--image {
    width: 140px;
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar--image,
  .profile-avatar--image:hover {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   信頼バナー (Trust Banner) — 緊急性訴求の代替、CVを下支えする安心メッセージ
   ========================================================================== */
.trust-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  z-index: 990;
  /* 視認性: 不透明度を上げて下層が透けないように（blur のみで重ねる旧UIは混乱の元） */
  background: var(--brand-900);
  color: #ffffff;
  padding: 0.6rem 2.4rem 0.6rem 1rem; /* 右側に閉じるボタン用余白 */
  /* 軽量な blur は残す（上面要素がスクロールしてもパフォーマンス影響少） */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -1px 0 rgba(17, 22, 26, 0.2);
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  will-change: transform;
}

/* セーフゾーン (privacy-commitment / footer / contact) 接近時にスライドダウン */
.trust-banner--hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* ユーザーが「×」で閉じた場合 (sessionStorage に保存される) */
.trust-banner--dismissed {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

/* 閉じるボタン: 右端に小さく配置 */
.trust-banner__close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.trust-banner__close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.trust-banner__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.trust-banner__content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.72rem, 2.2vw, 0.85rem);
  font-weight: 500;
  line-height: 1.4;
}

.trust-banner__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.trust-banner__item strong {
  color: #DFE7EF; /* c7d2fe → e0e7ff: コントラスト 8.5:1 (WCAG AAA pass) */
  font-weight: 700;
}

.trust-banner__item svg {
  color: #bfdbfe; /* 93c5fd → bfdbfe: コントラスト 7.2:1 (WCAG AAA pass) */
  flex-shrink: 0;
}

.trust-banner__divider {
  color: rgba(255, 255, 255, 0.55); /* 0.25 → 0.55: コントラスト 4.6:1 (WCAG AA pass) */
  font-size: 0.9rem;
}

/* モバイル: 情報を欠かさず、一行の confidence rail として省スペース化 */
@media (max-width: 640px) {
  .trust-banner {
    min-height: 44px;
    padding: 0 2.75rem 0 0.75rem;
    background: var(--brand-900);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 -1px 0 rgba(17, 22, 26, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* bottom 値は :root の --bottom-stack-2 に統一（以前は 72px 直書きで衝突源） */
  }
  .trust-banner__content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.9rem;
    padding: 0.45rem 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: 0.72rem;
    line-height: 1.2;
  }
  .trust-banner__content::-webkit-scrollbar { display: none; }
  .trust-banner__divider {
    display: none;
  }
  .trust-banner__item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: inherit;
    line-height: inherit;
  }
  .trust-banner__item svg {
    width: 13px;
    height: 13px;
  }
  .trust-banner__close {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    transform: none;
  }
}

/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
  .trust-banner {
    transition: none;
  }
}

/* ==========================================================================
   CV最適化: 安心感のあるボタン・カードのリッチ化
   ========================================================================== */

/* CTA直下の補足説明（リスクリバーサル） */
.cta-note {
  margin-top: 1rem;
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  color: #5e6878;
  line-height: 1.7;
  text-align: center;
}

.cta-urgency {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(var(--brand-700-rgb), 0.08);
  color: #43638C;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.25);
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.cta-urgency svg {
  color: var(--icon-accent);
  flex-shrink: 0;
}

/* ==========================================================================
   セキュリティバッジセクション (Trust Badges)
   ========================================================================== */
.security-badges {
  background: var(--color-bg-card);
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.1);
}


.security-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.15);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(var(--brand-700-rgb), 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.security-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.1);
}


@media (prefers-reduced-motion: reduce) {
  .security-badge,
  .security-badge:hover {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   UI 全体の信頼デザイン微調整
   ========================================================================== */

/* セクションタイトル: より落ち着いた紺色基調 */
.section-title {
  color: #20242b;
  letter-spacing: 0.01em;
}

/* 各CTAボタン: 微妙なホバー深度で信頼性 */
.btn-primary {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(var(--brand-700-rgb), 0.25);
}

/* 本文: 行間広めで読みやすく */
.section-desc,
p:not([class]) {
  letter-spacing: 0.015em;
}

/* セキュリティ・透明性を訴えるフッター下部の "MURAMURA 5原則" */

/* sticky-cta-mobile を trust-banner の下に配置調整 */
@media (max-width: 640px) {
  .sticky-cta-mobile {
    bottom: calc(env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   言語切替 (JA/EN) — ヘッダーナビ内に配置するトグルボタン
   ========================================================================== */
.nav-lang {
  margin-left: auto;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--brand-700-rgb), 0.06);
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: 9999px;
  padding: 2px;
  gap: 0;
}





/* モバイル: ナビが折り返す時の体裁 */
@media (max-width: 1024px) {
  .nav-lang {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

@media (max-width: 768px) {
  .lang-switch {
    margin: 0.5rem 0;
  }
}

/* ==========================================================================
   言語切替の配置調整（ヘッダー内、ナビ右端に独立配置）
   ========================================================================== */
.header-inner > .lang-switch {
  margin-left: auto; /* ナビと逆方向に押し出す */
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* PCではナビの右、CTAの隣に配置 */
@media (min-width: 1025px) {
  .header-inner > .lang-switch {
    order: 99; /* nav の後ろに */
    margin-left: 0.75rem;
    margin-right: 0;
  }
}

/* ナビが折り返さないよう、リスト幅・フォントサイズを調整 */
@media (min-width: 1025px) {
  .nav-list {
    flex-wrap: nowrap;
    gap: clamp(0.6rem, 1vw, 1.25rem);
    font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  }
  .nav-list a {
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* タブレット幅では言語切替を維持しつつナビは折り返さない */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-list {
    flex-wrap: nowrap;
    font-size: 0.82rem;
    gap: 0.5rem;
  }
}

/* モバイル: 言語切替はハンバーガーの左側に小さく配置 */
@media (max-width: 768px) {
  .header-inner > .lang-switch {
    margin-left: auto;
    margin-right: 0.75rem; /* ハンバーガーとの間に確実な隙間を確保 */
  }
  .lang-switch {
    padding: 1px;
  }
}

/* ★ ヘッダー子要素の重なり防止: gap で物理的に分離（古い nowrap 系の事故防止） */
.header-inner {
  column-gap: 0.5rem;
}
@media (max-width: 768px) {
  .header-inner {
    column-gap: 0.4rem;
  }
}
@media (max-width: 380px) {
  .header-inner {
    column-gap: 0.3rem;
  }
  /* 極小幅: ロゴマーク・テキストロゴを更に縮めて picker と hamburger の隙間を確保 */
  .logo-mark {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }
  .logo-img {
    max-width: 100px !important;
    max-height: 32px !important;
  }
  .header-inner > .lang-switch {
    margin-right: 0.55rem !important;
  }
}

/* 360px 以下の超極小幅: シンボルマークのみで MURAMURA を表現する余地を作る */
@media (max-width: 340px) {
  .logo-img {
    display: none; /* 苦肉の策: テキストロゴ非表示でマーク＋ピッカー＋ハンバーガーを優先 */
  }
  .logo-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
}

/* ==========================================================================
   アバター: SVG をメイン表示、img を上位レイヤーで上書き
   画像ファイルが配置されたら自動的に上書き、無ければSVGがそのまま見える
   ========================================================================== */
.profile-avatar--svg-primary {
  position: relative;
  background: transparent;
  overflow: hidden;
}

.profile-avatar__svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* img は SVG の上にレイヤー配置（画像ファイルがある場合のみ表示） */
.profile-avatar__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 2;
}

/* 古いフォールバックSVGクラスは互換維持のため残す（適用されない） */
.profile-avatar__fallback-svg {
  display: none;
}

/* ==========================================================================
   ヘッダーだけ広いコンテナにしてナビ10項目を1行表示する最終調整
   ========================================================================== */
.header-inner {
  max-width: 1440px; /* 1200px → 1440px に拡張 */
  padding-left: max(
    clamp(0.75rem, 2vw, 1.5rem),
    calc(env(safe-area-inset-left, 0px) + 0.5rem)
  );
  padding-right: max(
    clamp(0.75rem, 2vw, 1.5rem),
    calc(env(safe-area-inset-right, 0px) + 0.5rem)
  );
  gap: clamp(0.5rem, 1vw, 1rem);
}

/* デスクトップでナビを強制1行 */
@media (min-width: 769px) {
  .nav {
    flex-shrink: 1;
    min-width: 0;
  }
  .nav-list {
    flex-wrap: nowrap !important;
    gap: clamp(0.25rem, 0.6vw, 0.7rem) !important;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem) !important;
  }
  .nav-list li {
    flex-shrink: 0;
  }
  .nav-list a {
    padding: 0.4rem 0.2rem !important;
    white-space: nowrap;
  }
  .nav-cta {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.78rem !important;
  }
}

/* 1024px以下のタブレット幅では、優先度の低い項目を一時的に隠す */
@media (min-width: 769px) and (max-width: 1280px) {
  .nav-list li:nth-child(7), /* メディア掲載 */
  .nav-list li:nth-child(8)  /* パートナー */
  {
    display: none;
  }
}

/* ==========================================================================
   モバイル: 大型テーブル（経歴・資格）の横スクロール体験を改善
   - 横スクロール可能なヒント（影＋スクロールバー）
   - 慣性スクロール（iOS）
   - キーボード操作対応
   ========================================================================== */
@media (max-width: 768px) {
  .qualifications-details table,
  table[style*="min-width: 600px"],
  table[style*="min-width: 700px"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* スクロールバーを常時表示してヒント化 */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-700-rgb), 0.4) transparent;
    /* スクロール可能を示す右端の影 */
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat,
      linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) right center / 40px 100% no-repeat,
      linear-gradient(to right, rgba(var(--brand-700-rgb), 0.12), rgba(var(--brand-700-rgb), 0)) left center / 18px 100% no-repeat,
      linear-gradient(to left, rgba(var(--brand-700-rgb), 0.12), rgba(var(--brand-700-rgb), 0)) right center / 18px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* WebKit スクロールバーの可視化 */
  .qualifications-details table::-webkit-scrollbar {
    height: 6px;
  }
  .qualifications-details table::-webkit-scrollbar-track {
    background: rgba(var(--brand-700-rgb), 0.05);
    border-radius: 3px;
  }
  .qualifications-details table::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-700-rgb), 0.4);
    border-radius: 3px;
  }

  /* テーブル直前にヒントテキストを追加（CSS生成） */
  .qualifications-details h5 + table::before,
  .qualifications-details h6 + table::before {
    content: "← 横にスクロールできます →";
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #98a0ac;
    padding: 0.3rem 0;
    background: rgba(var(--brand-700-rgb), 0.04);
    border-radius: 4px 4px 0 0;
  }
}

/* ==========================================================================
   trust-banner と sticky-cta-mobile の重なり防止
   ========================================================================== */
/* trust-banner はモバイルで CTA の上に重ねる設計を最終調整 */
@media (max-width: 768px) {
  .sticky-cta-mobile {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 991; /* trust-banner より下 */
  }
  .trust-banner {
    /* CTAの高さ(56px) + 余白 を足してその上に表示 */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 992;
  }
}

/* 480px以下: trust-banner はさらにコンパクトに */
@media (max-width: 480px) {
  .trust-banner {
    padding: 0.4rem 0.6rem;
  }
  .trust-banner__content {
    font-size: 0.65rem;
  }
}

/* ==========================================================================
   モバイル安全性の念入り対策
   ========================================================================== */
@media (max-width: 768px) {
  /* iOS Safari の自動電話番号化を抑止 — メアド誤検知防止 */
  .footer-bottom,
  .legal-page__body,
  .company-list {
    -webkit-text-size-adjust: 100%;
  }

  /* リンクが目で見えない時のフォーカス強化 */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid #2E4034;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* スマホでの長い英文の改行（メール・URL対応） */
  .footer-address,
  .company-row dd {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* AIオーブの周辺に "neural network" ドット風装飾を追加 */
.ai-orb::before,
.ai-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #7c7fff 0%, transparent 70%);
  pointer-events: none;
}

.ai-orb::before {
  width: 16px;
  height: 16px;
  top: -30px;
  left: -20px;
  animation: aiOrbPulse 4s ease-in-out infinite;
}

.ai-orb::after {
  width: 10px;
  height: 10px;
  bottom: 10px;
  right: -40px;
  animation: aiOrbPulse 5s ease-in-out infinite 1s;
}

@keyframes aiOrbPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.3); }
}

@keyframes gridFlow {
  0% { background-position: 0% 0%, 0% 0%, 0 0, 0 0; }
  100% { background-position: 100% 100%, -100% 100%, 0 40px, 40px 0; }
}

/* ヒーローバッジ: 認定資格バッジ風のリッチデザイン */
.hero-badge {
  background: linear-gradient(135deg, rgba(var(--brand-700-rgb), 0.12), rgba(140, 21, 21, 0.08));
  border: 1px solid rgba(var(--brand-700-rgb), 0.3);
  box-shadow: 0 2px 8px rgba(var(--brand-700-rgb), 0.1);
}

.hero-badge .badge-icon {
  color: #2E4034;
  filter: drop-shadow(0 0 4px rgba(var(--brand-700-rgb), 0.4));
}

/* prefers-reduced-motion: アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .floating-stat-4,
  .ai-orb::before,
  .ai-orb::after,
  .hero-grid-lines {
    animation: none;
  }
}

/* ==========================================================================
   サービスカード内の数値表示の改善（モバイル時、stat-num が縦に積まれる対策）
   ========================================================================== */
@media (max-width: 480px) {
  .service-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .service-stat {
    text-align: center;
    padding: 0.65rem 0.5rem;
  }
  .stat-num {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .stat-txt {
    font-size: clamp(0.68rem, 2vw, 0.78rem);
  }
}

/* ==========================================================================
   モバイル: CTA / banner の z-index 階層を最終整理
   ========================================================================== */
@media (max-width: 768px) {
  .sticky-cta-mobile {
    z-index: 991;
  }
  .trust-banner {
    z-index: 992;
  }
}

/* ==========================================================================
   AI向けコア情報の不可視化（DOMには残るがビジュアルには出さない）
   Tailwind の sr-only パターンに近い実装。screen reader / AI 両方に伝わる
   ========================================================================== */
#ai-core-summary[hidden] {
  /* hidden 属性で視覚的に隠す。ただし AI/SEO クローラーには見える */
  display: none !important;
}

/* hidden 属性が無効化された場合のスタイル（デバッグ用） */
#ai-core-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* hero-stats を <dl> 構造に変えたためのリセット */
.hero-stats {
  margin: 0;
  padding: 0;
}
.hero-stats dt,
.hero-stats dd {
  margin: 0;
  padding: 0;
}

/* AI/SEO の意味的属性をビジュアルに影響させない */
[data-ai-readable],
[data-content-purpose],
[data-kpi-key],
[data-kpi-value] {
  /* これらは情報の意味付け専用、ビジュアル影響なし */
}

/* ==========================================================================
   専門能力詳細セクション: 資格から導かれる実装スキルマトリクス
   ========================================================================== */
.capabilities-detail {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--color-bg-card);
  position: relative;
}

.capabilities-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(var(--brand-700-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(140, 21, 21, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.capabilities-detail > .container {
  position: relative;
  z-index: 2;
}

.capabilities-detail__intro {
  text-align: left;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.capabilities-detail__badge {
  display: inline-block;
  background: rgba(var(--brand-700-rgb), 0.1);
  color: #43638C;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: clamp(0.7rem, 2.2vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid rgba(var(--brand-700-rgb), 0.25);
  margin-bottom: 1rem;
}

.capabilities-detail .section-desc strong {
  color: #43638C;
  font-weight: 700;
}

/* カードグリッド */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.capability-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.5rem);
  text-align: left;
  border: 1px solid rgba(var(--brand-700-rgb), 0.06);
  box-shadow: 0 2px 8px rgba(var(--brand-700-rgb), 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.capability-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--brand-700-rgb), 0.12);
}

.capability-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid rgba(var(--brand-700-rgb), 0.1);
}

.capability-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--brand-700-rgb), 0.1);
  color: #2E4034;
  margin-bottom: 0.6rem;
}

.capability-card h3 {
  font-size: clamp(1rem, 2.8vw, 1.1rem);
  font-weight: 700;
  color: #20242b;
  margin: 0 0 0.25rem;
  line-height: 1.35;
}

.capability-card__source {
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  color: #5e6878;
  margin: 0;
  line-height: 1.5;
}

.capability-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: clamp(0.85rem, 2.5vw, 0.92rem);
  color: #363c45;
  line-height: 1.7;
}

.capability-card__list li {
  padding: 0.35rem 0 0.35rem 1.4rem;
  position: relative;
}

.capability-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.4rem;
  color: #2E4034;
  font-weight: 700;
}

.capability-card__list em {
  font-style: normal;
  color: #43638C;
  font-weight: 600;
  font-size: 0.92em;
}

/* カードカテゴリ別のアクセントカラー */
.capability-card--stanford .capability-card__icon {
  background: rgba(140, 21, 21, 0.1);
  color: #7F2222;
}
.capability-card--stanford .capability-card__head {
  border-bottom-color: rgba(140, 21, 21, 0.2);
}
.capability-card--stanford .capability-card__list li::before {
  color: #7F2222;
}
.capability-card--stanford .capability-card__list em {
  color: #7F2222;
}

.capability-card--google .capability-card__icon {
  background: rgba(66, 133, 244, 0.1);
  color: #4175CC;
}
.capability-card--google .capability-card__head {
  border-bottom-color: rgba(66, 133, 244, 0.2);
}
.capability-card--google .capability-card__list li::before {
  color: #4175CC;
}
.capability-card--google .capability-card__list em {
  color: #4175CC;
}

.capability-card--microsoft .capability-card__icon {
  background: rgba(0, 164, 239, 0.1);
  color: #2B7CA1;
}
.capability-card--microsoft .capability-card__head {
  border-bottom-color: rgba(0, 164, 239, 0.2);
}
.capability-card--microsoft .capability-card__list li::before {
  color: #2B7CA1;
}
.capability-card--microsoft .capability-card__list em {
  color: #2B7CA1;
}

.capability-card--bx .capability-card__icon {
  background: rgba(124, 58, 237, 0.1);
  color: #8355D2;
}
.capability-card--bx .capability-card__head {
  border-bottom-color: rgba(124, 58, 237, 0.2);
}
.capability-card--bx .capability-card__list li::before {
  color: #8355D2;
}

.capability-card--web .capability-card__icon {
  background: rgba(6, 199, 85, 0.1);
  color: #238653;
}
.capability-card--web .capability-card__head {
  border-bottom-color: rgba(6, 199, 85, 0.2);
}
.capability-card--web .capability-card__list li::before {
  color: #238653;
}

.capability-card--drone .capability-card__icon {
  background: rgba(30, 41, 90, 0.1);
  color: #20242b;
}
.capability-card--drone .capability-card__head {
  border-bottom-color: rgba(30, 41, 90, 0.2);
}
.capability-card--drone .capability-card__list li::before {
  color: #20242b;
}

/* AIO SEO カード */
.capability-card--aio .capability-card__icon {
  background: rgba(234, 88, 12, 0.1);
  color: #B65E30;
}
.capability-card--aio .capability-card__head {
  border-bottom-color: rgba(234, 88, 12, 0.2);
}
.capability-card--aio .capability-card__list li::before {
  color: #B65E30;
}

/* Webセキュリティカード */
.capability-card--security .capability-card__icon {
  background: rgba(220, 38, 38, 0.08);
  color: #CA3838;
}
.capability-card--security .capability-card__head {
  border-bottom-color: rgba(220, 38, 38, 0.2);
}
.capability-card--security .capability-card__list li::before {
  color: #dc2626;
}

/* 出典・引用バッジ（FEDらしさ強化用） */
.capability-card__cite {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.74em;
  font-weight: 500;
  color: #4d5560;
  background: rgba(100, 116, 139, 0.08);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.capability-card__cite em {
  font-style: normal;
  font-weight: 600;
  color: inherit;
}

/* リスト項目の <strong>: 技術カテゴリラベル */
.capability-card__list li strong {
  display: inline-block;
  margin-right: 0.25rem;
  font-weight: 700;
  color: #20242b;
  letter-spacing: 0.01em;
}

/* リスト密度・改行をモダン技術ドキュメント風に */
.capability-card__list li {
  line-height: 1.65;
}

@media (max-width: 640px) {
  .capability-card__cite {
    display: inline;
    margin-left: 0.25rem;
    padding: 0;
    background: transparent;
    font-size: 0.78em;
    color: #5e6878;
    white-space: normal;
  }
  .capability-card__cite::before {
    content: "（";
  }
  .capability-card__cite::after {
    content: "）";
  }
}

/* ==========================================================================
   プライバシー保護コミットメント・バナー
   ========================================================================== */
.privacy-commitment {
  margin: 0 auto;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  max-width: 100%;
  /* 強制表示保証: いかなる親要素の overflow / display にも影響されない */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 5;
}
.privacy-commitment__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-bg-card);
  border: 2px solid rgba(34, 197, 94, 0.35);
  border-radius: 18px;
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3.5vw, 2rem);
  box-shadow: var(--elev-2);
  position: relative;
}
.privacy-commitment__badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #16a34a, #059669);
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--elev-2);
  flex-shrink: 0;
}
.privacy-commitment__body { min-width: 0; }
.privacy-commitment__eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #16a34a;
  text-transform: uppercase;
}
.privacy-commitment__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  color: #064e3b;
  font-weight: 700;
  line-height: 1.35;
}
.privacy-commitment__lead {
  margin: 0 0 0.9rem;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  color: #20242b;
  line-height: 1.7;
}
.privacy-commitment__lead strong { color: #047857; font-weight: 700; }
.privacy-commitment__pillars {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem 0.85rem;
}
.privacy-commitment__pillars li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  color: #374151;
  line-height: 1.5;
}
.privacy-commitment__pillars svg {
  color: #16a34a;
  flex-shrink: 0;
}
.privacy-commitment__pillars strong { color: #20242b; font-weight: 600; }
.privacy-commitment__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.privacy-commitment__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  background: #15803d; /* WCAG1.4.3: 白文字 #16a34a(3.29)→#15803d(~4.6) */
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--elev-2);
}
.privacy-commitment__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.privacy-commitment__link--secondary {
  background: transparent;
  color: #047857;
  border: 1.5px solid rgba(34, 197, 94, 0.5);
  box-shadow: none;
}
.privacy-commitment__link--secondary:hover {
  background: rgba(34, 197, 94, 0.08);
  box-shadow: none;
}
.privacy-commitment__note {
  margin: 0;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.5;
}
.privacy-commitment__note small { font-size: 1em; }

@media (max-width: 640px) {
  .privacy-commitment__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .privacy-commitment__badge {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .privacy-commitment__badge svg {
    width: 32px;
    height: 32px;
  }
  .privacy-commitment__pillars {
    grid-template-columns: 1fr;
  }
  .privacy-commitment__link {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   検索エンジンの変化（旧 SEO → 新 AIO SEO の世代変化）
   ========================================================================== */
.search-era {
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, #fbfaf6 0%, #f4efe6 100%);
}
.search-era__container {
  max-width: 1100px;
  margin: 0 auto;
}
.search-era__header {
  max-width: 900px;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  text-align: left;
}
.search-era__badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  background: var(--brand-50);
  color: #2E4034;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.search-era__title {
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: #20242b;
  line-height: 1.4;
}
.search-era__title strong {
  background: var(--brand-700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.search-era__lead {
  font-size: clamp(0.88rem, 2.6vw, 1rem);
  color: #4d5560;
  line-height: 1.8;
  margin: 0;
  max-width: 800px;
}
.search-era__lead strong { color: #20242b; font-weight: 700; }

.search-era__stance {
  max-width: 760px;
  margin: 0.85rem 0 0;
  padding: 0.8rem 1rem;
  color: var(--brand-900);
  background: #edf3ed;
  border-left: 3px solid rgba(var(--brand-700-rgb), 0.45);
  border-radius: 0 14px 14px 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.7;
}

.search-era__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.55rem, 1.5vw, 1rem);
  align-items: stretch;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(0.7rem, 2vw, 1rem);
  background: rgba(255, 253, 250, 0.82);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 24px;
}
.search-era__column {
  background: transparent;
  border-radius: 18px;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 0;
  box-shadow: none;
}
.search-era__column--old {
  background: #fffaf1;
  opacity: 1;
}
.search-era__column--new {
  background: #edf3ed;
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  box-shadow: none;
}
.search-era__col-head {
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.08);
}
.search-era__col-tag {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  background: rgba(100, 116, 139, 0.15);
  color: #353b44; /* 親columnのopacity:0.85で減光されてもAA(4.5:1)を満たす濃度 */
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.search-era__col-tag--new {
  background: var(--brand-700);
  color: #ffffff;
}
.search-era__col-head h3 {
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  color: #20242b;
  font-weight: 700;
}
.search-era__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.82rem, 2.4vw, 0.9rem);
  line-height: 1.65;
  color: #4d5560;
}
.search-era__list li {
  padding: 0.4rem 0 0.4rem 1.2rem;
  position: relative;
}
.search-era__list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #98a0ac;
  font-weight: 700;
}
.search-era__list--new li::before { color: #43638C; }
.search-era__list strong { color: #20242b; font-weight: 700; }
.search-era__list--new strong { background: #edf3ed; }

.search-era__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2E4034;
}

.search-era__supported {
  margin-top: 1rem;
  background: rgba(255, 253, 250, 0.84);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  box-shadow: none;
}
.search-era__supported-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  color: #20242b;
  font-weight: 700;
}
.search-era__supported-title svg { color: #16a34a; }
.search-era__supported-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.55rem;
}
.search-era__supported-list li {
  padding: 0.55rem 0.75rem;
  background: #f5f4ed;
  border: 1px solid rgba(var(--brand-700-rgb), 0.1);
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.search-era__supported-list li span:first-child {
  font-weight: 700;
  color: #20242b;
}
.search-era__bot {
  font-size: 0.7rem;
  color: #2E4034;
  font-family: var(--font-sans);
}

.search-era__glossary {
  overflow: hidden;
  margin: 0;
  background: #fffdfa;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 20px;
}

.search-era__glossary > summary {
  display: flex;
  position: relative;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1.1rem;
  color: var(--color-text);
  background: #fffdfa;
  cursor: pointer;
  list-style: none;
}

.search-era__glossary > summary::-webkit-details-marker {
  display: none;
}

.search-era__glossary > summary span {
  color: var(--brand-700);
  font-size: 0.75rem;
  font-weight: 800;
}

.search-era__glossary > summary strong {
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  line-height: 1.5;
  text-align: right;
  background: #fffdfa;
}

.search-era__glossary > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 1.25rem;
}

.search-era__glossary[open] > summary::after {
  content: "−";
}

.search-era__glossary > summary:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: -3px;
}

.search-era__glossary-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.1);
}

.search-era__glossary-body > p {
  max-width: 70em;
  margin: 0.9rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.75;
}

.search-era__term-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 0;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.12);
}

.search-era__term-list > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1.58fr);
  gap: 0.65rem;
  padding: 0.85rem;
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.1);
}

.search-era__term-list > div:nth-child(odd) {
  border-right: 1px solid rgba(var(--brand-700-rgb), 0.1);
}

.search-era__term-list dt {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.5;
}

.search-era__term-list dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  line-height: 1.7;
}

.search-era__term-note {
  padding: 0.8rem 0.9rem;
  background: #edf3ed;
  border-radius: 12px;
}
.search-era__verify {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.search-era__verify a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  background: rgba(var(--brand-700-rgb), 0.08);
  color: #2E4034;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.search-era__verify a:hover {
  background: rgba(var(--brand-700-rgb), 0.18);
}

@media (max-width: 768px) {
  .search-era__compare {
    grid-template-columns: 1fr;
  }
  .search-era__arrow {
    transform: rotate(90deg);
    padding: 0.3rem 0;
  }

  .search-era__glossary > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-era__glossary > summary strong {
    text-align: left;
  }

  .search-era__glossary > summary::after {
    position: absolute;
    right: 1rem;
  }

  .search-era__term-list {
    grid-template-columns: 1fr;
  }

  .search-era__term-list > div:nth-child(odd) {
    border-right: 0;
  }
}

@media (max-width: 480px) {
  .search-era__term-list > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   実績ポートフォリオセクション（クライアント・事業領域・登壇・メディア・著書）
   ========================================================================== */
.portfolio-section {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--elev-3);
}
.portfolio-section__header {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.portfolio-section__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2E4034;
  background: rgba(var(--brand-700-rgb), 0.1);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.portfolio-section__title {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: #20242b;
  margin: 0 0 0.55rem;
  font-weight: 700;
  line-height: 1.35;
}
.portfolio-section__lead {
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  color: #5e6878;
  margin: 0;
  line-height: 1.7;
}

.portfolio-block {
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
}
.portfolio-block:last-child { margin-bottom: 0; }

.portfolio-block__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.05rem, 3vw, 1.18rem);
  color: #20242b;
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid rgba(var(--brand-700-rgb), 0.18);
  font-weight: 700;
}
.portfolio-block__title svg {
  color: var(--icon-accent);
  flex-shrink: 0;
}

/* クライアント表 */

/* 事業領域リスト */
.portfolio-domains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.7rem;
}
.portfolio-domains li {
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.15);
  border-radius: 10px;
  font-size: clamp(0.85rem, 2.4vw, 0.92rem);
  line-height: 1.55;
  color: #4d5560;
}
.portfolio-domains li::before {
  content: "▸";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #2E4034;
  font-weight: 700;
}
.portfolio-domains strong {
  color: #20242b;
  font-weight: 700;
}

/* 登壇タイムライン */
.portfolio-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.portfolio-timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.7rem 0.9rem;
  background: #ffffff;
  border-radius: 10px;
  border-left: 3px solid #2E4034;
  font-size: clamp(0.85rem, 2.4vw, 0.92rem);
  line-height: 1.55;
}
.portfolio-timeline__date {
  font-weight: 700;
  color: #2E4034;
  font-size: 0.82rem;
  white-space: nowrap;
  padding-top: 0.1em;
}
.portfolio-timeline__body strong {
  color: #20242b;
  font-weight: 700;
}

/* メディア掲載 - 京都新聞画像グリッド */
.portfolio-press-subtitle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: clamp(0.9rem, 2.6vw, 1rem);
  color: #20242b;
}
.portfolio-press-subtitle svg {
  color: #16a34a;
  flex-shrink: 0;
}
.portfolio-press-subtitle strong {
  color: #20242b;
  font-weight: 700;
}
.portfolio-press-subtitle--secondary {
  margin-top: 1.5rem;
}

.portfolio-press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.portfolio-press-card {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.06);
}
.portfolio-press-card:hover,
.portfolio-press-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--brand-700-rgb), 0.12);
  border-color: rgba(var(--brand-700-rgb), 0.4);
  outline: none;
}
.portfolio-press-card figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.portfolio-press-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: #eef1f6;
}
.portfolio-press-card figcaption {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.portfolio-press-card__source {
  display: inline-flex;
  align-self: flex-start;
  background: linear-gradient(135deg, #1e40af, #46604F);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.portfolio-press-card__title {
  font-size: clamp(0.9rem, 2.5vw, 0.97rem);
  font-weight: 700;
  color: #20242b;
  line-height: 1.45;
}
.portfolio-press-card__hint {
  font-size: 0.75rem;
  color: #2E4034;
  margin-top: auto;
  padding-top: 0.3rem;
}

/* メディア掲載リスト */
.portfolio-media {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.portfolio-media li {
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 2.2rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.12);
  border-radius: 10px;
  font-size: clamp(0.85rem, 2.4vw, 0.92rem);
  line-height: 1.6;
  color: #4d5560;
}
.portfolio-media li::before {
  content: "📰";
  position: absolute;
  left: 0.8rem;
  top: 0.7rem;
  font-size: 0.95rem;
}
.portfolio-media strong {
  color: #20242b;
  font-weight: 700;
}

/* 著書リスト */
.portfolio-books {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portfolio-books li {
  padding: 0.85rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--brand-700-rgb), 0.25);
  border-radius: 10px;
  font-size: clamp(0.9rem, 2.5vw, 0.98rem);
  line-height: 1.55;
}
.portfolio-books strong {
  display: block;
  color: #92400e;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.portfolio-books__meta {
  font-size: 0.82rem;
  color: #78350f;
}

@media (max-width: 540px) {
  .portfolio-timeline li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .portfolio-timeline__date {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   capabilities-detail: 4層構造（成果→具体例→権威→技術詳細）の視覚化
   ========================================================================== */

/* セクション上部の信頼バッジ列 */
.capabilities-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: 900px;
}
.capabilities-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  background: rgba(34, 197, 94, 0.08);
  color: #065f46;
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
  font-size: clamp(0.75rem, 2vw, 0.82rem);
  font-weight: 600;
}
.capabilities-trust-badge svg {
  color: #16a34a;
  flex-shrink: 0;
}

/* ガイドカード: examples 用カラー追加 */
.capabilities-guide__item--examples { border-left-color: #16a34a; }
.capabilities-guide__item--examples::before { background: #16a34a; }
.capabilities-guide__item--examples strong { color: #16a34a; }

/* 「こんな施策・成果物が可能」レイヤー */
.capability-card__examples {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
  border-left: 3px solid #16a34a;
  border-radius: 10px;
}
.capability-card__examples-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
  background: #16a34a;
  color: #fff;
}
.capability-card__examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  font-size: clamp(0.82rem, 2.3vw, 0.88rem);
  line-height: 1.5;
  color: #20242b;
}
.capability-card__examples-list li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.4rem;
}
.capability-card__examples-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 50%;
  line-height: 1;
}
@media (min-width: 720px) {
  .capability-card__examples-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.7rem;
  }
}

/* 安心保証バナー（セクション末尾） */
.capabilities-assurance {
  background: var(--color-bg-card);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: 1.5rem 0;
  box-shadow: var(--elev-2);
}
.capabilities-assurance__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  color: #065f46;
  font-weight: 700;
}
.capabilities-assurance__title svg {
  color: #16a34a;
  flex-shrink: 0;
}
.capabilities-assurance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.capabilities-assurance__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.5rem 0.7rem;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.15);
}
.capabilities-assurance__icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  flex-shrink: 0;
}
.capabilities-assurance__item strong {
  font-size: 0.95rem;
  color: #20242b;
  line-height: 1.35;
}
.capabilities-assurance__item span:not(.capabilities-assurance__icon) {
  font-size: 0.82rem;
  color: #4d5560;
  line-height: 1.55;
  grid-column: 2;
}

@media (max-width: 540px) {
  .capabilities-assurance__item {
    grid-template-columns: 1fr;
  }
  .capabilities-assurance__icon {
    grid-row: 1;
    width: 32px;
    height: 32px;
  }
  .capabilities-assurance__item span:not(.capabilities-assurance__icon) {
    grid-column: 1;
  }
}

/* ==========================================================================
   capabilities-detail: 既存3層スタイル（成果→権威→技術詳細）
   ========================================================================== */

/* 読み取りガイド */
.capabilities-guide {
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--brand-700-rgb), 0.12);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 1.5rem);
  margin: 1.5rem auto 2rem;
  max-width: 900px;
}
.capabilities-guide__lead {
  margin: 0 0 0.75rem;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  color: #4d5560;
  font-weight: 600;
  text-align: left;
}
.capabilities-guide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  counter-reset: guide;
}
.capabilities-guide__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border-radius: 10px;
  border-left: 3px solid #2E4034;
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  counter-increment: guide;
  position: relative;
}
.capabilities-guide__item::before {
  content: counter(guide);
  position: absolute;
  top: -8px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: #2E4034;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capabilities-guide__item--outcome { border-left-color: var(--brand-700); }
.capabilities-guide__item--outcome::before { background: var(--brand-700); }
.capabilities-guide__item--authority { border-left-color: #2E4034; }
.capabilities-guide__item--details { border-left-color: #5e6878; }
.capabilities-guide__item--details::before { background: #5e6878; }
.capabilities-guide__icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}
.capabilities-guide__item strong {
  font-weight: 700;
  color: #20242b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.capabilities-guide__item--outcome strong { color: var(--brand-700); }
.capabilities-guide__item--authority strong { color: #2E4034; }
.capabilities-guide__item--details strong { color: #4d5560; }
.capabilities-guide__item span:not(.capabilities-guide__icon) {
  color: #5e6878;
  line-height: 1.55;
}

/* 各層共通: ラベル */
.capability-card__layer-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

/* Outcome 層: 顧客への成果 */
.capability-card__outcome {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.06), rgba(234, 88, 12, 0.02));
  border-left: 3px solid var(--brand-700);
  border-radius: 10px;
  padding: 1rem 1.1rem 0.9rem;
  margin: 0.85rem 0;
}
.capability-card__outcome .capability-card__layer-label {
  background: var(--brand-700);
  color: #fff;
}
.capability-card__outcome p {
  margin: 0;
  font-size: clamp(0.88rem, 2.5vw, 0.94rem);
  line-height: 1.7;
  color: #20242b;
}
.capability-card__outcome strong {
  color: var(--brand-700);
  font-weight: 700;
}

/* お困りごとリスト（タイト・吹き出し風） */
.capability-card__problems {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: clamp(0.82rem, 2.3vw, 0.88rem);
  line-height: 1.45;
  color: #20242b;
}
.capability-card__problems li {
  position: relative;
  padding: 0.3rem 0.6rem 0.3rem 1.5rem;
  margin-bottom: 0.25rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(234, 88, 12, 0.3);
  border-radius: 6px;
}
.capability-card__problems li:last-child {
  margin-bottom: 0;
}
.capability-card__problems li::before {
  content: "?";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 88, 12, 0.15);
  color: var(--brand-700);
  font-weight: 800;
  font-size: 0.7rem;
  border-radius: 50%;
  line-height: 1;
}
.capability-card__problems strong {
  color: #20242b;
  font-weight: 600;
}

/* お困りごとの該当シーン/業種ラベル（分かりやすさ: 誰の・どの場面の悩みかを明示） */
.capability-card__problems .cap-scene {
  display: block;
  margin-top: 2px;
  font-size: 0.76em;
  font-weight: 400;
  color: #5e6878; /* WCAG AA (~5:1) */
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* 解決の矢印行 */
.capability-card__problem-resolution {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(234, 88, 12, 0.04));
  border-radius: 8px;
  font-size: clamp(0.85rem, 2.4vw, 0.92rem);
  line-height: 1.7;
  color: #20242b;
  border-left: 3px solid var(--brand-700);
}
.capability-card__problem-resolution strong {
  color: var(--brand-700);
  font-weight: 700;
}

/* Authority 層: 権威の裏付け */
.capability-card__authority {
  background: linear-gradient(135deg, rgba(var(--brand-700-rgb), 0.05), rgba(var(--brand-700-rgb), 0.02));
  border-left: 3px solid #2E4034;
  border-radius: 10px;
  padding: 1rem 1.1rem 0.9rem;
  margin: 0.85rem 0;
}
.capability-card__authority .capability-card__layer-label {
  background: #2E4034;
  color: #fff;
}
.capability-card__authority-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.82rem, 2.3vw, 0.88rem);
  line-height: 1.6;
  color: #4d5560;
}
.capability-card__authority-list li {
  padding: 0.3rem 0 0.3rem 1.1rem;
  position: relative;
}
.capability-card__authority-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: #2E4034;
  border-radius: 50%;
}
.capability-card__authority-list strong {
  color: #20242b;
  font-weight: 700;
}

/* cert-meta: 横長レスポンシブ「ヘッダー＋チップ＋凄さ添字」構造 */
.cert-meta {
  margin: 0;
  padding: 0;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  line-height: 1.55;
}
/* 各セル: ホバーで微妙に浮き上がる(System1思考: 親近性ヒューリスティック) */
.cert-meta > div {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cert-meta > div:hover {
  background: rgba(255, 255, 255, 0.85);
}
/* dt(キー) は視覚的に小さなラベル、dd(値) は強調ブロック */
.cert-meta dt {
  font-weight: 700;
  color: #2E4034;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.55rem 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cert-meta dt::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.cert-meta dt:first-child { margin-top: 0; }
.cert-meta dd {
  margin: 0;
  color: #20242b;
  word-break: normal;
  overflow-wrap: break-word;
}
.cert-meta dd strong {
  font-weight: 700;
  color: #14181e;
}

/* dd 内のチップグループ: 横並び→モバイル折返し */
.cert-meta .cert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cert-meta .cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: rgba(var(--brand-700-rgb), 0.07);
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #20242b;
  white-space: nowrap;
}
.cert-meta .cert-chip--star {
  background: var(--color-bg-card);
  border-color: rgba(var(--brand-700-rgb), 0.35);
  color: #92400e;
}
.cert-meta .cert-chip-note {
  display: block;
  font-size: 0.74rem;
  color: #525b67;
  margin-top: 0.2rem;
  line-height: 1.5;
}
/* 「凄さ添字」: 固有名詞・賞などのE-E-A-T根拠を控えめに */
.cert-meta .cert-credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #4d5560;
  line-height: 1.6;
}
.cert-meta .cert-credit strong {
  color: #20242b;
  font-weight: 700;
}

/* 大画面: 2列の横長レイアウト（key|value を横並びに） */
@media (min-width: 720px) {
  .cert-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
  }
}

/* モバイル: 完全縦並び・読みやすさ優先 */
@media (max-width: 480px) {
  .cert-meta .cert-chip {
    font-size: 0.74rem;
    padding: 0.25rem 0.55rem;
    white-space: normal;
  }
  .cert-meta .cert-credit {
    font-size: 0.76rem;
  }
}

/* Details 層: 技術詳細の折りたたみ */
.capability-card__details {
  margin-top: 0.85rem;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.08);
  padding-top: 0.85rem;
}
.capability-card__details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #5e6878;
  padding: 0.45rem 0.9rem;
  background: rgba(100, 116, 139, 0.08);
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
  user-select: none;
}
.capability-card__details > summary::-webkit-details-marker {
  display: none;
}
.capability-card__details > summary::before {
  content: "▶";
  font-size: 0.6em;
  transition: transform 0.2s ease;
  color: inherit;
}
.capability-card__details[open] > summary::before {
  transform: rotate(90deg);
}
.capability-card__details > summary:hover {
  background: rgba(100, 116, 139, 0.15);
  color: #20242b;
}
.capability-card__details[open] > summary {
  margin-bottom: 0.7rem;
  background: rgba(var(--brand-700-rgb), 0.1);
  color: #2E4034;
}
.capability-card__details .capability-card__list {
  animation: fadeInDetails 0.3s ease;
}
@keyframes fadeInDetails {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* カードごとのテーマカラーで Outcome / Authority を上書き */
.capability-card--stanford .capability-card__authority { --cap-accent: #7F2222; border-left-color: #7F2222; background: linear-gradient(135deg, rgba(140, 21, 21, 0.05), rgba(140, 21, 21, 0.02)); }
.capability-card--stanford .capability-card__authority .capability-card__layer-label { background: #7F2222; }
.capability-card--stanford .capability-card__authority-list li::before { background: #7F2222; }

.capability-card--google .capability-card__authority { --cap-accent: #4175CC; border-left-color: #4175CC; background: var(--brand-50); }
.capability-card--google .capability-card__authority .capability-card__layer-label { background: #4175CC; }
.capability-card--google .capability-card__authority-list li::before { background: #4175CC; }

.capability-card--microsoft .capability-card__authority { --cap-accent: #2B7CA1; border-left-color: #2B7CA1; background: linear-gradient(135deg, rgba(0, 164, 239, 0.05), rgba(0, 164, 239, 0.02)); }
.capability-card--microsoft .capability-card__authority .capability-card__layer-label { background: #2B7CA1; }
.capability-card--microsoft .capability-card__authority-list li::before { background: #2B7CA1; }

.capability-card--bx .capability-card__authority { --cap-accent: #8355D2; border-left-color: #8355D2; background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02)); }
.capability-card--bx .capability-card__authority .capability-card__layer-label { background: #8355D2; }
.capability-card--bx .capability-card__authority-list li::before { background: #8355D2; }

.capability-card--web .capability-card__authority { --cap-accent: #238653; border-left-color: #238653; background: linear-gradient(135deg, rgba(6, 199, 85, 0.05), rgba(6, 199, 85, 0.02)); }
.capability-card--web .capability-card__authority .capability-card__layer-label { background: #238653; }
.capability-card--web .capability-card__authority-list li::before { background: #238653; }

.capability-card--drone .capability-card__authority { --cap-accent: #20242b; border-left-color: #20242b; background: linear-gradient(135deg, rgba(30, 41, 90, 0.05), rgba(30, 41, 90, 0.02)); }
.capability-card--drone .capability-card__authority .capability-card__layer-label { background: #20242b; }
.capability-card--drone .capability-card__authority-list li::before { background: #20242b; }

.capability-card--aio .capability-card__authority { --cap-accent: #B65E30; border-left-color: #B65E30; background: linear-gradient(135deg, rgba(234, 88, 12, 0.05), rgba(234, 88, 12, 0.02)); }
.capability-card--aio .capability-card__authority .capability-card__layer-label { background: #B65E30; }
.capability-card--aio .capability-card__authority-list li::before { background: #B65E30; }

.capability-card--security .capability-card__authority { --cap-accent: #CA3838; border-left-color: #CA3838; background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.02)); }
.capability-card--security .capability-card__authority .capability-card__layer-label { background: #CA3838; }
.capability-card--security .capability-card__authority-list li::before { background: #CA3838; }

/* ===== 認定の検証フロー図解 (capability-card「認定の中身」内) =====
   発行元 → 構成 → 第三者検証✓ を 1 ステップずつ可視化。
   テーマ色はカードごとの var(--cap-accent) を参照（既存 layer-label と同じく
   バッジはアクセント地に白文字。本文ラベルは中立色で 4.5:1 を担保）。
   検証ノードのみリンク = 1クリック検証への明確なアフォーダンス。 */
.cert-flow {
  --cf-accent: var(--cap-accent, var(--color-primary));
  margin: 0.8rem 0 0;
}
.cert-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}
.cert-flow__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.6rem 0.65rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 10px;
  line-height: 1.4;
}
.cert-flow__step--verify {
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--cf-accent);
}
.cert-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--cf-accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.cert-flow__num svg { stroke: #fff; }
.cert-flow__label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.3;
}
.cert-flow__value {
  font-size: clamp(0.72rem, 1.9vw, 0.8rem);
  font-weight: 700;
  color: #20242b;
  line-height: 1.42;
  word-break: normal;
  overflow-wrap: break-word;
}
.cert-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(var(--brand-700-rgb), 0.38);
}
.cert-flow__verify-link {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
  min-height: 44px; /* WCAG 2.5.5 タッチターゲット */
  padding: 0.6rem 0.65rem;
  text-decoration: none;
  color: inherit;
  border-radius: 9px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.cert-flow__verify-link:hover {
  background: var(--cf-accent);
  transform: translateY(-1px);
}
.cert-flow__verify-link:hover .cert-flow__label,
.cert-flow__verify-link:hover .cert-flow__value { color: #fff; }
.cert-flow__verify-link:hover .cert-flow__num { background: #fff; }
.cert-flow__verify-link:hover .cert-flow__num svg { stroke: var(--cf-accent); }
.cert-flow__verify-link:focus-visible {
  outline: 2.5px solid var(--cf-accent);
  outline-offset: 2px;
}
.cert-flow__go {
  vertical-align: -1px;
  margin-left: 1px;
  opacity: 0.85;
}

/* 縦積み + 下向き矢印（横幅破綻・文字被り防止 / Rule #0-2,#0-6）。
   capability-card が 2 列で狭くなる 481-768px も縦積みに含める（769px 以上は
   カードが 1 列フル幅になり 3 列横並びでも余裕があるため横並びに戻す）。 */
@media (max-width: 768px) {
  .cert-flow__steps { flex-direction: column; gap: 0.3rem; }
  .cert-flow__step { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.55rem; }
  .cert-flow__verify-link { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.55rem; }
  .cert-flow__arrow { transform: rotate(90deg); padding: 0.1rem 0; }
  .cert-flow__label { flex: 0 0 auto; }
  .cert-flow__value { flex: 1 1 100%; }
}

/* cert-meta-ref（クロス参照文）: 中のリンクを明確にクリック可能に / Rule #0-12 左揃え */
.cert-meta-ref {
  margin: 0;
  font-size: clamp(0.8rem, 2.1vw, 0.86rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: left;
}
.cert-meta-ref a {
  color: var(--color-primary-light);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(70, 96, 79, 0.45);
  border-radius: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.cert-meta-ref a:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}
.cert-meta-ref a:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* モバイル: 折りたたみがデフォルトで閉じているので長さを抑える */
@media (max-width: 640px) {
  .capability-card__outcome,
  .capability-card__authority {
    padding: 0.85rem 0.9rem 0.75rem;
  }
  .capability-card__authority-list li {
    font-size: 0.8rem;
  }
  .capabilities-guide__list {
    grid-template-columns: 1fr;
  }
}

/* ハイブリッドアプローチ宣言 */
.hybrid-approach {
  background: linear-gradient(135deg, #1e1f4a 0%, #2d2e6a 100%);
  color: #fff;
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--elev-2);
  margin-top: clamp(1.5rem, 4vw, 2rem);
}

.hybrid-approach__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.5;
  flex-wrap: wrap;
}

.hybrid-approach__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(124, 127, 255, 0.2);
  color: #D7E0EC;
  flex-shrink: 0;
}

.hybrid-approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .hybrid-approach__grid {
    grid-template-columns: 1fr;
  }
}

.hybrid-approach__item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: clamp(1rem, 3vw, 1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hybrid-approach__item h4 {
  font-size: clamp(0.95rem, 2.8vw, 1.05rem);
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: #fff;
}

.hybrid-approach__item ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: clamp(0.82rem, 2.5vw, 0.9rem);
  line-height: 1.7;
  color: #e3e7ec;
}

.hybrid-approach__item li {
  padding: 0.25rem 0 0.25rem 1.4rem;
  position: relative;
}

.hybrid-approach__item li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #93c5fd;
  font-weight: 700;
}

.hybrid-approach__note {
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  line-height: 1.7;
  color: #d6dae1;
  background: rgba(0, 0, 0, 0.2);
  padding: clamp(0.85rem, 2.5vw, 1rem);
  border-radius: 8px;
  border-left: 3px solid #D7E0EC;
  margin: 0;
}

.hybrid-approach__note strong {
  color: #fff;
  font-weight: 700;
}

/* prefers-reduced-motion 配慮 */
@media (prefers-reduced-motion: reduce) {
  .capability-card,
  .capability-card:hover {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   ★ 完璧なレスポンシブ対応 — グローバルレイヤー（2026-05-19 追加）
   対応端末: iPhone SE (320px) 〜 4K (2560px+) / 縦横向き / safe-area / Container
   ========================================================================== */

/* 1. ベース: 横スクロール防止 ＋ ボックスサイジング */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  min-height: 100vh;
  min-height: 100dvh; /* ダイナミックビューポート: iOS Safari ツールバー対応 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. メディア要素のグローバル制御（画像・動画はみ出し防止） */
img, video, picture, svg, iframe, embed, object, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
img[width][height] {
  height: auto;
}

/* 3. テーブル・コードブロックのレスポンシブ保護 */
table {
  max-width: 100%;
}
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* 4. 文字列のオーバーフロー防止（長い URL・固有名詞対策） */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, span {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.email, .url, code, .verify-code, [class*="url"] {
  word-break: break-all;
}

/* 5. タッチターゲット最小サイズ保証（WCAG 2.1 AA: 44×44px） */
@media (hover: none) and (pointer: coarse) {
  a, button, input[type="button"], input[type="submit"], input[type="reset"],
  [role="button"], .btn, .qualification-tag, .trust-cert,
  .capability-card__details > summary,
  .privacy-commitment__link,
  .portfolio-press-card,
  .search-era__verify a {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  /* 小さすぎる文字を読みやすく */
  input, textarea, select {
    font-size: 16px !important; /* iOS Safari の自動ズーム防止 */
  }
}

/* 6. safe-area-inset 対応（iPhone X+ / ノッチ・ホームインジケーター） */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .sticky-cta-mobile,
  .footer,
  .trust-banner,
  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  /* iOS Safari 下部ホームインジケーター対応 */
  .sticky-cta-mobile {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* 7. 超小型デバイス（iPhone SE / 320px 〜 374px） */
@media (max-width: 374px) {
  :root {
    --space-xs: 0.2rem;
    --space-sm: 0.4rem;
    --space-md: 0.6rem;
    --space-lg: 0.85rem;
  }
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  /* ヒーロー */
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  .hero-subtitle { font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important; }
  .hero-desc, .hero-note { font-size: 0.78rem !important; }
  .hero-cta { flex-direction: column !important; gap: 0.6rem !important; }
  .hero-cta .btn { width: 100% !important; justify-content: center; }
  /* セクションタイトル */
  .section-title { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; line-height: 1.4 !important; }
  /* 信頼バッジ */
  .capabilities-trust-badge { font-size: 0.7rem !important; padding: 0.3rem 0.65rem !important; }
  /* プライバシー */
  .privacy-commitment__title { font-size: 1.05rem !important; }
  .privacy-commitment__link { font-size: 0.72rem !important; padding: 0.45rem 0.7rem !important; }
}

/* 8. 標準スマートフォン（375px 〜 480px） */
@media (max-width: 480px) {
  /* グローバル余白 */
  .container { padding-left: 1rem; padding-right: 1rem; }
  /* セクション間 padding を圧縮 */
  section { padding-top: clamp(1.25rem, 4vw, 2rem); padding-bottom: clamp(1.25rem, 4vw, 2rem); }
  /* グリッドは1列に */
  .capabilities-grid,
  .portfolio-press-grid,
  .capabilities-assurance__list { grid-template-columns: 1fr !important; }
}

/* 9. タブレット縦向き（481px 〜 768px） */
@media (min-width: 481px) and (max-width: 768px) {
  .capabilities-grid,
  .portfolio-press-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.5rem; }
}

/* 10. タブレット横〜小型ノートPC（769px 〜 1024px） */
@media (min-width: 769px) and (max-width: 1024px) {
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-press-grid { grid-template-columns: repeat(3, 1fr); }
  .container { max-width: 960px; margin-inline: auto; }
}

/* 11. デスクトップ標準（1025px 〜 1440px） */
@media (min-width: 1025px) and (max-width: 1440px) {
  .container { max-width: 1200px; margin-inline: auto; }
  .capabilities-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* 12. 大型デスクトップ（1441px+） */
@media (min-width: 1441px) {
  .container { max-width: 1320px; margin-inline: auto; }
  .capabilities-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
  /* ヒーロー: 大画面で過剰拡大しない */
  .hero-title { max-width: 18ch; margin-inline: auto; }
}

/* 13. ランドスケープ（横向き）モバイル: 高さ500px以下で UI を圧縮 */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .hero {
    min-height: auto !important;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  .hero-stats { display: flex; gap: 1rem; }
  .floating-stats, .ai-orb { display: none !important; }
}

/* 14. Container Queries で個別カードのレスポンシブ */
@supports (container-type: inline-size) {
  .capabilities-grid { container-type: inline-size; }
  .portfolio-section { container-type: inline-size; }
}

/* 15. アクセシビリティ: フォーカス可視化（キーボード操作対応） */
:focus-visible {
  outline: 3px solid #2E4034;
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 3px;
}

/* 16. 印刷対応（PDF保存・印刷時の最適化） */
@media print {
  .floating-stats,
  .ai-orb,
  .sticky-cta-mobile,
  .hero-glow,
  .hero-grid-lines { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .capability-card { break-inside: avoid; page-break-inside: avoid; }
  .privacy-commitment,
  .search-era { break-inside: avoid; }
}

/* 17. 高解像度ディスプレイ（Retina）対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* シャープなアウトライン */
  .capability-card,
  .privacy-commitment__inner,
  .search-era__column {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* 18. prefers-reduced-data: 軽量モード（モバイル通信時の負荷軽減） */
@media (prefers-reduced-data: reduce) {
  .hero-bg, .hero-glow, .hero-grid-lines,
  .floating-stats, .ai-orb,
  .privacy-commitment::before,
  .search-era::before { display: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* 19. ダークモード暫定対応（OSダークモード切替時の最低限の可読性） */
@media (prefers-color-scheme: dark) {
  /* 重要な背景は維持しつつ、デフォルト白背景の要素は微調整 */
  .capability-card__authority-list,
  .cert-meta dd {
    color: #20242b; /* 強制的に元色を維持（コントラスト保証） */
  }
}

/* 20. グローバルセクション間隔（縦リズム統一） */
@media (max-width: 480px) {
  .capabilities-detail,
  .portfolio-section,
  .privacy-commitment,
  .search-era,
  .hero { padding-block: clamp(1.25rem, 4vw, 2rem); }
}

/* ==========================================================================
   21. グローバル固定要素のスタッキング・コンテキスト整理（最終調整）
   ========================================================================== */
:root {
  --z-base: 1;
  --z-header: 100;
  --z-trust-banner: 200;
  --z-sticky-cta: 300;
  --z-modal: 1000;
  --z-toast: 1100;
}
.header { z-index: var(--z-header); }
.trust-banner { z-index: var(--z-trust-banner); }
.sticky-cta-mobile { z-index: var(--z-sticky-cta); }

/* sticky CTA の固定配置 */
@media (max-width: 768px) {
  /* sticky CTA は最下部に固定 */
  .sticky-cta-mobile {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  /* ボディ末尾の余白でコンテンツが隠れないように */
  body {
    padding-bottom: 72px !important; /* sticky-cta-mobile の高さ分 */
  }
}

/* デスクトップでは sticky CTA は非表示 */
@media (min-width: 769px) {
  .sticky-cta-mobile { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* 22. ナビゲーションメニュー: 既存実装(right: -100% ↔ 0)を尊重し、補強のみ */
@media (max-width: 1024px) {
  /* ハンバーガーボタンのタッチターゲット 44x44px 保証 */
  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* 各リンク項目のタッチターゲット保証 */
  .nav-list a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
}

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

/* 23. フォーム要素のレスポンシブ（タッチ操作最適化） */
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #d6dae1;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #2E4034;
  box-shadow: 0 0 0 3px rgba(var(--brand-700-rgb), 0.15);
}
textarea { min-height: 100px; resize: vertical; }

/* 24. 動的ビューポート単位（dvh / svh / lvh）対応 */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}
.modal-overlay,
.full-screen {
  height: 100vh;
  height: 100dvh;
}

/* 25. iOS Safari の "fixed要素+スクロール" バグ対策 */
@supports (-webkit-touch-callout: none) {
  .sticky-cta-mobile {
    position: fixed;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   ★ EVIDENCE-BASED EXPERTISE セクション精細度＆横並びレイアウト改修
   日付: 2026-05-20
   方針: 1カード=全幅 / 内部 2 列横並び（desktop 1024px+）/ 3段階レスポンシブ
   ========================================================================== */

/* セクションヘッダーの精細度アップ */
.capabilities-detail {
  background: var(--surface-2);
  position: relative;
}
.capabilities-detail::before {
  background:
    radial-gradient(circle at 8% 18%, rgba(var(--brand-700-rgb), 0.08) 0%, transparent 45%),
    radial-gradient(circle at 92% 82%, rgba(67, 99, 140, 0.05) 0%, transparent 45%),
    repeating-linear-gradient(45deg, transparent 0px, transparent 60px, rgba(var(--brand-700-rgb), 0.012) 60px, rgba(var(--brand-700-rgb), 0.012) 61px);
}
.capabilities-detail__badge {
  background: var(--brand-700) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  padding: 0.5rem 1.2rem !important;
  font-size: 0.78rem !important;
  border: none !important;
  margin-bottom: 1.25rem !important;
  box-shadow:
    0 4px 16px rgba(var(--brand-700-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#capabilities-detail-title {
  font-size: clamp(1.45rem, 4vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 0.85rem !important;
}
.capabilities-detail .section-desc {
  font-size: clamp(0.92rem, 2.6vw, 1.05rem);
  line-height: 1.85;
  color: #4d5560;
}

/* ★ デスクトップ (1024px+): 1カード = 全幅、内部 2 列横並び */
@media (min-width: 1024px) {
  .capabilities-grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    max-width: 1200px;
    margin-inline: auto;
  }
  .capability-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "head head"
      "outcome authority"
      "details details";
    gap: 1.25rem 2rem;
    padding: 2rem 2.25rem !important;
    border-radius: 18px !important;
    /* 精細な多層シャドウ (Material 風 elevation) */
    box-shadow:
      0 1px 2px rgba(var(--brand-700-rgb), 0.04),
      0 4px 14px rgba(var(--brand-700-rgb), 0.06),
      0 16px 40px -8px rgba(var(--brand-700-rgb), 0.1) !important;
    border: 1px solid rgba(var(--brand-700-rgb), 0.08) !important;
    background: var(--color-bg-card) !important;
  }
  .capability-card:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 1px 2px rgba(var(--brand-700-rgb), 0.05),
      0 8px 24px rgba(var(--brand-700-rgb), 0.08),
      0 24px 56px -8px rgba(var(--brand-700-rgb), 0.18) !important;
  }
  .capability-card__head {
    grid-area: head;
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "icon title"
      "icon source";
    gap: 0.15rem 1.1rem;
    align-items: start;
    margin-bottom: 0 !important;
    padding-bottom: 1.1rem !important;
    border-bottom: 2px solid rgba(var(--brand-700-rgb), 0.14) !important;
  }
  .capability-card__icon {
    grid-area: icon;
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.18);
  }
  .capability-card__icon svg {
    width: 28px;
    height: 28px;
  }
  .capability-card h3 {
    grid-area: title;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
    font-weight: 800 !important;
    color: #14181e !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .capability-card__source {
    grid-area: source;
    font-size: 0.78rem !important;
    color: #525b67 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  .capability-card__outcome { grid-area: outcome; margin: 0 !important; }
  .capability-card__authority { grid-area: authority; margin: 0 !important; }
  .capability-card__details {
    grid-area: details;
    margin-top: 0.5rem !important;
    border-top: 1px dashed rgba(var(--brand-700-rgb), 0.1) !important;
    padding-top: 0.85rem !important;
  }
}

/* ★ ワイドデスクトップ (1440px+): カード内 outcome/authority のさらなる精細化 */
@media (min-width: 1440px) {
  .capabilities-grid { max-width: 1320px; }
  .capability-card {
    padding: 2.25rem 2.5rem !important;
    gap: 1.5rem 2.5rem;
  }
}

/* ★ タブレット (769-1023px): カード全幅・内部は縦積み */
@media (min-width: 769px) and (max-width: 1023px) {
  .capabilities-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .capability-card {
    padding: 1.5rem 1.75rem !important;
    box-shadow:
      0 1px 2px rgba(var(--brand-700-rgb), 0.04),
      0 6px 18px rgba(var(--brand-700-rgb), 0.08) !important;
  }
}

/* ★ スマートフォン (~768px): 完全縦積み、シャドウを軽く */
@media (max-width: 768px) {
  .capabilities-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .capability-card {
    padding: 1.1rem 1.15rem !important;
    border-radius: 14px !important;
    box-shadow:
      0 1px 3px rgba(var(--brand-700-rgb), 0.04),
      0 4px 12px rgba(var(--brand-700-rgb), 0.06) !important;
  }
  /* タイトル領域はモバイルでもアイコン横並び保持 */
  .capability-card__head {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem !important;
    padding-bottom: 0.85rem !important;
  }
  .capability-card__icon {
    margin-bottom: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  .capability-card h3 {
    font-size: 1.05rem !important;
    flex: 1;
    min-width: 0;
  }
  .capability-card__source {
    width: 100%;
    font-size: 0.74rem !important;
    margin-top: 0 !important;
  }
}

/* ★ 各層の精細度マイクロ調整（全画面サイズ共通） */
.capability-card__outcome,
.capability-card__authority {
  border-radius: 12px;
  position: relative;
}

.capability-card__layer-label {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 0.32rem 0.78rem !important;
  margin-bottom: 0.7rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* お困りごとリスト: 視覚アイコンを強化 */
.capability-card__problems li {
  background: var(--color-bg-card) !important;
  border: 1px dashed rgba(234, 88, 12, 0.4) !important;
  box-shadow: var(--elev-2);
}
.capability-card__problem-resolution {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.14), rgba(234, 88, 12, 0.04)) !important;
  border-left: 4px solid var(--brand-700) !important;
  font-weight: 500;
}

/* 具体例チェックリスト: 緑のチェックを強化 */
.capability-card__examples-list li::before {
  background: linear-gradient(135deg, #16a34a, #059669) !important;
  color: #fff !important;
  box-shadow: var(--elev-2);
}

/* cert-meta グリッド: デスクトップで2列バランス調整 */
@media (min-width: 1024px) {
  .cert-meta {
    background: linear-gradient(180deg, rgba(var(--brand-700-rgb), 0.04) 0%, transparent 100%);
    padding: 0.85rem;
    border-radius: 12px;
  }
  .cert-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cert-meta > div {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(var(--brand-700-rgb), 0.06);
  }
}

/* 折りたたみの精細化 */
.capability-card__details > summary {
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(100, 116, 139, 0.05)) !important;
  border: 1px solid rgba(100, 116, 139, 0.15);
}
.capability-card__details[open] > summary {
  background: linear-gradient(135deg, rgba(var(--brand-700-rgb), 0.15), rgba(var(--brand-700-rgb), 0.05)) !important;
  border-color: rgba(var(--brand-700-rgb), 0.3) !important;
}

/* セクション全体に視差感を出すミニ装飾 */
.capabilities-grid::before {
  content: "";
  position: absolute;
  inset: -20px 0 0 0;
  background: radial-gradient(ellipse at top, rgba(var(--brand-700-rgb), 0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* キャパビリティガイドの精細度向上 */
.capabilities-guide {
  background: var(--color-bg-card) !important;
  border: 1px solid rgba(var(--brand-700-rgb), 0.2) !important;
  box-shadow: 0 4px 16px rgba(var(--brand-700-rgb), 0.06);
}

/* 信頼バッジ列: 一段精細化 */
.capabilities-trust-badge {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.08)) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  font-weight: 700 !important;
  box-shadow: var(--elev-2);
}

/* ==========================================================================
   ★ アンカー整備 — 固定ヘッダー高さ分のスクロールオフセット
   ========================================================================== */
:root {
  --header-offset: 60px;
}
#services,
#smart-shrink,
#capabilities-detail,
#works,
#taidan,
#capabilities,
#faq,
#company,
#media,
#contact,
#portfolio-title,
#search-era,
#privacy-commitment,
#coursera-public-certificates {
  scroll-margin-top: var(--header-offset);
}

/* ==========================================================================
   日本語・英語の固定文言切替
   ========================================================================== */
.lang-switch--picker {
  position: relative;
  display: inline-flex;
}
.lang-picker-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.25);
  border-radius: 999px;
  color: #20242b;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  min-height: 36px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lang-picker-toggle:hover {
  background: rgba(var(--brand-700-rgb), 0.08);
  border-color: rgba(var(--brand-700-rgb), 0.45);
}
.lang-picker-toggle:focus-visible {
  outline: 2px solid #2E4034;
  outline-offset: 2px;
}
.lang-picker-toggle[aria-expanded="true"] {
  background: rgba(var(--brand-700-rgb), 0.12);
  border-color: rgba(var(--brand-700-rgb), 0.55);
}
.lang-picker-toggle[aria-expanded="true"] svg:last-child {
  transform: rotate(180deg);
}
.lang-picker-toggle svg {
  color: var(--icon-accent);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.lang-picker-current {
  font-weight: 700;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-picker-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1200;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(var(--brand-700-rgb), 0.04),
    0 12px 32px rgba(var(--brand-700-rgb), 0.14),
    0 24px 56px -12px rgba(var(--brand-700-rgb), 0.22);
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  animation: langMenuFadeIn 0.18s ease-out;
}
@keyframes langMenuFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-picker-menu li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.87rem;
  color: #20242b;
  transition: background 0.15s ease;
  min-height: 40px;
}
.lang-picker-menu li:hover,
.lang-picker-menu li:focus-visible {
  background: rgba(var(--brand-700-rgb), 0.08);
  outline: none;
}
.lang-picker-menu li.is-active {
  background: var(--brand-50);
  font-weight: 700;
  color: #20242b;
}
.lang-picker-menu li.is-active::after {
  content: "✓";
  color: #2E4034;
  font-weight: 800;
}
.lang-flag {
  font-size: 1.15rem;
  line-height: 1;
}
.lang-name {
  font-weight: 600;
}
.lang-code {
  font-size: 0.7rem;
  color: #98a0ac;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ============================================================
   言語切替の完了・エラー通知（固定訳文の同期切替）
   状態: idle / success / error
   位置: ヘッダー直下・中央寄せ（モバイルは画面下）
   ============================================================ */
.i18n-toast {
  position: fixed;
  top: calc(var(--notice-height, 0px) + var(--header-height, 70px) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(135deg, #20242b, #2d2f4a);
  color: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.45);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 12px rgba(var(--brand-700-rgb), 0.18),
    0 16px 36px rgba(var(--brand-700-rgb), 0.25);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: calc(100% - 32px);
  white-space: nowrap;
}
.i18n-toast[data-state="success"],
.i18n-toast[data-state="error"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.i18n-toast[data-state="success"] {
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: rgba(16, 185, 129, 0.6);
}
.i18n-toast[data-state="error"] {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border-color: rgba(239, 68, 68, 0.55);
  white-space: normal;
  max-width: min(420px, calc(100% - 32px));
  text-align: left;
}

.i18n-toast[data-state="success"]::before {
  content: "✓";
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
}
.i18n-toast[data-state="error"]::before {
  content: "⚠";
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}
/* モバイル: 画面下に表示（ヘッダー直下だと狭くて被るため） */
@media (max-width: 768px) {
  .i18n-toast {
    top: auto;
    /* bottom は :root の --bottom-stack-3 で統一上書き済み */
    font-size: 0.82rem;
    padding: 0.6rem 0.95rem;
    max-width: calc(100% - 24px);
    white-space: normal;
    text-align: center;
  }
}

/* モバイル: ピッカーを最適化 */
@media (max-width: 640px) {
  .lang-picker-toggle {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
  }
  .lang-picker-current {
    max-width: 80px;
  }
  .lang-picker-menu {
    min-width: 220px;
    right: -0.5rem;
  }
}


/* ==========================================================================
   ★★ レスポンシブ徹底対応 — モバイルオーバーフロー完全防止
   日付: 2026-05-20 / 基準幅: 320px (iPhone SE) 〜 1920px
   ========================================================================== */

/* ─────────────── 1. グローバル: 横スクロール根絶 ─────────────── */
html, body {
  /* Android 旧 Chrome / Samsung Internet < 13 で clip 未対応のため hidden 併用 */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}
* {
  min-width: 0; /* Flex/Grid 子要素のデフォルト min-width: auto を 0 に上書き */
}
img, video, picture, svg, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
/* 長文URL・コードを必ず折り返す */
a, p, li, dd, span, strong, em, blockquote, code, pre {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* テーブルは横スクロールで対応（縦に潰さない） */
table {
  max-width: 100%;
}

/* ─────────────── 2. モバイル (~768px): nowrap を強制解除 ─────────────── */
@media (max-width: 768px) {
  /* 主要コンポーネントの nowrap を解除（タグ・ピル・チップ系） */
  .qualification-tag,
  .cert-chip,
  .capability-card__cite,
  .capabilities-trust-badge,
  .trust-cert,
  .search-era__verify a,
  .search-era__supported-list li,
  .lang-picker-current {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 長すぎる verify code / hash 等の monospace 値は途中改行可 */
  .search-era__bot,
  code, kbd, samp,
  .portfolio-press-card__source,
  .privacy-commitment__cta a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* ─────────────── 3. cert-meta グリッドのモバイル完全縦並び ─────────────── */
@media (max-width: 768px) {
  .cert-meta-grid,
  .cert-meta {
    display: block !important;
    grid-template-columns: none !important;
  }
  .cert-meta > div {
    display: block !important;
    margin-bottom: 0.75rem;
    background: rgba(var(--brand-700-rgb), 0.03) !important;
    border: 1px solid rgba(var(--brand-700-rgb), 0.08);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    box-shadow: none !important;
  }
  .cert-meta > div:last-child { margin-bottom: 0; }
  .cert-meta > div[style*="grid-column"] {
    grid-column: auto !important;
  }
  .cert-meta dt {
    font-size: 0.68rem !important;
    margin: 0 0 0.35rem !important;
  }
  .cert-meta dd {
    font-size: 0.85rem !important;
  }
  .cert-meta dd strong {
    display: inline;
    line-height: 1.45;
  }
  .cert-meta .cert-chips {
    gap: 0.3rem 0.4rem !important;
  }
  .cert-meta .cert-chip {
    font-size: 0.74rem !important;
    padding: 0.25rem 0.55rem !important;
    line-height: 1.4;
  }
  .cert-meta .cert-credit {
    font-size: 0.75rem !important;
    margin-top: 0.3rem !important;
    display: block;
  }
}

/* ─────────────── 4. capability-card のモバイル余白＋折り返し ─────────────── */
@media (max-width: 768px) {
  .capability-card {
    overflow: hidden; /* 内部の幅超過要素をクリップ */
  }
  .capability-card__outcome,
  .capability-card__authority,
  .capability-card__examples {
    padding: 0.7rem 0.8rem !important;
    margin: 0.6rem 0 !important;
    overflow-wrap: anywhere;
  }
  .capability-card__problems li,
  .capability-card__examples-list li {
    padding: 0.3rem 0.55rem 0.3rem 1.5rem !important;
    font-size: 0.8rem !important;
  }
  .capability-card__problem-resolution {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.8rem !important;
  }
  .capability-card__list li {
    font-size: 0.8rem !important;
    overflow-wrap: anywhere;
  }
}

/* ─────────────── 5. qualification-tag（資格タグ）の最終モバイル調整 ─────────────── */
@media (max-width: 480px) {
  .qualifications-list {
    gap: 0.4rem !important;
  }
  .qualification-tag {
    font-size: 0.76rem !important;
    padding: 0.5rem 0.7rem !important;
    line-height: 1.4 !important;
    width: 100% !important;
    border-radius: 10px !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  /* Pro Cert タグ内のサブピルは別行へ */
  .qualification-tag--pro span[style*="background"] {
    display: inline-block !important;
    margin: 0.25rem 0 0 0 !important;
    font-size: 0.62rem !important;
    padding: 0.1rem 0.4rem !important;
  }
  /* SVG アイコン内サイズ調整 */
  .qualification-tag svg,
  .qualification-tag picture img {
    flex-shrink: 0 !important;
  }
}

/* ─────────────── 7. プライバシーコミットメントの極小スマホ対応 ─────────────── */
@media (max-width: 380px) {
  .privacy-commitment__inner {
    padding: 0.85rem 0.85rem !important;
  }
  .privacy-commitment__title {
    font-size: 1rem !important;
  }
  .privacy-commitment__lead,
  .privacy-commitment__pillars li {
    font-size: 0.76rem !important;
  }
  .privacy-commitment__link {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.65rem !important;
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

/* ─────────────── 8. 検索エンジン変化セクションの 320px 対応 ─────────────── */
@media (max-width: 420px) {
  .search-era__column {
    padding: 0.9rem 1rem !important;
  }
  .search-era__list li {
    font-size: 0.78rem !important;
    padding: 0.3rem 0 0.3rem 1rem !important;
  }
  .search-era__supported-list {
    grid-template-columns: 1fr !important;
  }
  .search-era__supported-list li {
    padding: 0.5rem 0.65rem !important;
  }
}

/* ─────────────── 10. 安心保証バナーの 320px 対応 ─────────────── */
@media (max-width: 420px) {
  .capabilities-assurance {
    padding: 1rem 0.9rem !important;
  }
  .capabilities-assurance__list {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .capabilities-assurance__item {
    padding: 0.7rem 0.8rem !important;
  }
  .capabilities-assurance__item strong {
    font-size: 0.88rem !important;
  }
  .capabilities-assurance__item span:not(.capabilities-assurance__icon) {
    font-size: 0.76rem !important;
  }
}

/* ─────────────── 11. 言語ピッカーの極小幅対応 ─────────────── */
@media (max-width: 380px) {
  .lang-picker-toggle {
    padding: 0.35rem 0.5rem !important;
    gap: 0.3rem !important;
    font-size: 0.74rem !important;
  }
  .lang-picker-current {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lang-picker-menu {
    min-width: 200px !important;
    max-width: 88vw;
    right: -0.25rem;
  }
}

/* ─────────────── 12. 京都新聞画像カードのレスポンシブ ─────────────── */
@media (max-width: 540px) {
  .portfolio-press-grid {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }
  .portfolio-press-card img {
    height: 180px !important;
  }
}

/* ─────────────── 13. capabilities-trust-badges の極小幅対応 ─────────────── */
@media (max-width: 420px) {
  .capabilities-trust-badges {
    gap: 0.35rem !important;
    justify-content: flex-start !important;
  }
  .capabilities-trust-badge {
    font-size: 0.7rem !important;
    padding: 0.32rem 0.65rem !important;
    flex: 0 0 auto;
  }
}

/* ─────────────── 14. ナビ・ロゴエリアの 320px 対応 ─────────────── */
@media (max-width: 380px) {
  .logo img,
  .logo picture img {
    max-height: 36px !important;
    width: auto !important;
  }
  .mobile-menu-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .lang-picker-toggle svg:first-child {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ─────────────── 15. 詳細認定テーブルの横スクロール最適化（既存 min-width: 600px を活用） ─────────────── */
@media (max-width: 768px) {
  table[style*="min-width: 600px"] {
    font-size: 0.8rem !important;
  }
  table[style*="min-width: 600px"] td,
  table[style*="min-width: 600px"] th {
    padding: 0.5rem 0.7rem !important;
  }
  /* テーブル親に水平スクロール */
  .credentials-detail table,
  .qualifications-detail table,
  .history-table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ─────────────── 16. カード内 dl のモバイル微調整（cert-meta-grid 以外） ─────────────── */
@media (max-width: 480px) {
  dl:not(.cert-meta) {
    display: block;
  }
  dl:not(.cert-meta) dt { margin-bottom: 0.2rem; }
  dl:not(.cert-meta) dd { margin-bottom: 0.6rem; margin-left: 0; }
}

/* ─────────────── 17. グローバル最終ガード（コンテナ余白・スクロール ）─────────────── */
@media (max-width: 768px) {
  .container,
  main > section > .container,
  section > .container {
    padding-left: max(0.85rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.85rem, env(safe-area-inset-right)) !important;
  }
}

/* iPhone SE (320px) 極端な狭幅最終ガード */
@media (max-width: 360px) {
  body {
    font-size: 15px;
  }
  .capability-card,
  .portfolio-block,
  .privacy-commitment__inner,
  .capabilities-assurance,
  .search-era__column {
    padding: 0.85rem !important;
  }
  h2, h3 {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.4 !important;
  }
  .cert-chip,
  .qualification-tag {
    font-size: 0.7rem !important;
  }
}

/* ==========================================================================
   ★★★ プロフィールセクション「MURAMURAについて」モバイル切れ防止
   問題: ul/grid の minmax(280px, 1fr) がスマホで 2列強制レイアウトに → 右切れ
   修正: 640px 以下で強制 1列、要素全体に min-width: 0 を保証
   ========================================================================== */

/* インライン grid のモバイル上書き — 提供サービスリスト */
@media (max-width: 640px) {
  /* 「提供サービス」grid を 1 列強制 */
  ul[style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  /* 同上の li 内テキストを必ず折り返す */
  ul[style*="grid-template-columns"] li {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* プロフィールセクションのテキスト全般を折返し可能に */
@media (max-width: 768px) {
  /* "MURAMURAについて" 直下の p / ul / dl 全体 */
  .profile-content p,
  .profile-content ul,
  .profile-content li,
  .profile-content dd,
  .profile-content dt {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-width: 0 !important;
  }

  /* プロフィール内 h4 見出しもはみ出さない */
  .profile-content h4 {
    overflow-wrap: anywhere !important;
  }

  /* 親コンテナの padding と max-width */
  .profile-content {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    max-width: 100%;
    overflow: hidden;
  }

  /* 経歴・認定テーブルの親 div の横スクロール強化 */
  .profile-content div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    /* 右端フェードで「スクロール可能」を視覚化 */
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to right, rgba(255,255,255,0), white 70%) right center,
      radial-gradient(ellipse at left, rgba(var(--brand-700-rgb),0.12), transparent 70%) left center,
      radial-gradient(ellipse at right, rgba(var(--brand-700-rgb),0.12), transparent 70%) right center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* 全プロフィール inline-grid の汎用ガード（auto-fit minmax 280px の場合） */
@media (max-width: 540px) {
  ul[style*="grid-template-columns: repeat(auto-fit, minmax"] {
    grid-template-columns: 1fr !important;
  }
}

/* 経歴テーブル文字サイズの最終調整 */
@media (max-width: 480px) {
  .profile-content table {
    font-size: 0.82rem !important;
  }
  .profile-content table td,
  .profile-content table th {
    padding: 0.55rem 0.7rem !important;
  }
}

/* ==========================================================================
   ★★★★ 畑山隆則氏 対談カード ボタン視認性向上
   問題: .btn-outline.btn-sm は透明背景＋細枠で画像オーバーレイ上で見えにくい
   対策: 半透明白背景＋強い影で確実な視認性を確保
   ========================================================================== */
.interview-text-overlay .btn,
.interview-cta .btn {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.95) 100%) !important;
  color: #20242b !important;
  font-weight: 800 !important;
  padding: 0.75rem 1.5rem !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
  font-size: 0.95rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.interview-text-overlay .btn::before {
  content: "▶";
  color: #2E4034;
  font-size: 0.85em;
}
.interview-text-overlay .btn:hover,
.interview-card:hover .interview-text-overlay .btn {
  transform: translateY(-2px);
  background: var(--brand-700) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(var(--brand-700-rgb), 0.5),
    0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.interview-text-overlay .btn:hover::before,
.interview-card:hover .interview-text-overlay .btn::before {
  color: #ffd700;
}

/* オーバーレイ全体にダークグラデで文字とボタンの可読性を底上げ */
.interview-text-overlay {
  background: linear-gradient(180deg,
    rgba(var(--brand-700-rgb), 0.1) 0%,
    rgba(var(--brand-700-rgb), 0.55) 60%,
    rgba(var(--brand-700-rgb), 0.8) 100%) !important;
}
.interview-text-overlay .section-title,
.interview-text-overlay .section-desc,
.interview-text-overlay .interview-note {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   ★★★★★ 言語ピッカーメニュー 視認性強化
   問題: メニューが薄い背景＋うすい影で見えにくい
   対策: 完全不透明＋強い影＋選択中強調＋ホバー強調
   ========================================================================== */
.lang-picker-menu {
  background: #ffffff !important;
  border: 2px solid rgba(var(--brand-700-rgb), 0.35) !important;
  box-shadow:
    0 4px 8px rgba(var(--brand-700-rgb), 0.08),
    0 16px 40px rgba(var(--brand-700-rgb), 0.22),
    0 32px 64px -16px rgba(var(--brand-700-rgb), 0.3) !important;
  padding: 0.55rem !important;
  /* バックドロップで背景の干渉を完全に遮断 */
  -webkit-backdrop-filter: blur(0) !important;
  backdrop-filter: blur(0) !important;
}

.lang-picker-menu li {
  border: 1.5px solid transparent;
  padding: 0.65rem 0.8rem !important;
  min-height: 44px !important;
  background: #ffffff;
  margin-bottom: 0.15rem;
  transition: all 0.18s ease;
  position: relative;
}
.lang-picker-menu li:last-child { margin-bottom: 0; }

.lang-picker-menu li:hover,
.lang-picker-menu li:focus-visible {
  background: var(--brand-50) !important;
  border-color: rgba(var(--brand-700-rgb), 0.45) !important;
  transform: translateX(2px);
}

.lang-picker-menu li.is-active {
  background: var(--brand-700) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-color: #2E4034 !important;
  box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.35);
}
.lang-picker-menu li.is-active .lang-name,
.lang-picker-menu li.is-active .lang-code {
  color: #ffffff !important;
  font-weight: 700;
}
.lang-picker-menu li.is-active::after {
  content: "✓" !important;
  color: #ffffff !important;
  font-weight: 900;
  font-size: 1.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* フラグ絵文字の存在感アップ */
.lang-flag {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 言語名のコントラスト強化 */
.lang-name {
  font-weight: 700 !important;
  color: #20242b;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.lang-code {
  font-weight: 800 !important;
  color: #5e6878 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.15rem 0.45rem;
  background: rgba(var(--brand-700-rgb), 0.08);
  border-radius: 4px;
}
.lang-picker-menu li.is-active .lang-code {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

/* メニュー本体の影とフレーム強化 (モバイル含む) */
@media (max-width: 640px) {
  .lang-picker-menu {
    min-width: 250px !important;
    padding: 0.5rem !important;
  }
  .lang-picker-menu li {
    padding: 0.7rem 0.75rem !important;
  }
}

/* ピッカートグルボタン自体のコントラスト強化 */
.lang-picker-toggle {
  background: #ffffff !important;
  border: 2px solid rgba(var(--brand-700-rgb), 0.35) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-700-rgb), 0.08);
  font-weight: 700 !important;
}
.lang-picker-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #ffffff 0%, rgba(var(--brand-700-rgb), 0.08) 100%) !important;
  border-color: #2E4034 !important;
  box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.25);
}

/* ==========================================================================
   ★★★★★★ TOP CERTIFICATIONS セクション — プレミアム信頼性デザイン
   配置: ヒーロー直下 / trust-bar 直前
   方針: 金色アクセント + 多層シャドウ + 第三者検証導線
   ========================================================================== */
.top-certifications {
  padding: clamp(1.75rem, 4.5vw, 2.75rem) 0;
  background:
    radial-gradient(ellipse at top, rgba(var(--brand-700-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(var(--brand-700-rgb), 0.04), transparent 60%),
    var(--color-bg-card);
  position: relative;
  overflow: hidden;
}
.top-certifications::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0px, transparent 80px,
      rgba(var(--brand-700-rgb), 0.025) 80px, rgba(var(--brand-700-rgb), 0.025) 81px);
  pointer-events: none;
}

.top-certifications__header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  z-index: 2;
}
.top-certifications__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1.1rem;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  border-radius: 999px;
  box-shadow:
    0 4px 14px rgba(var(--brand-700-rgb), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 1.1rem;
}
.top-certifications__eyebrow svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.top-certifications__title {
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 0.7rem;
  color: #14181e;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #20242b 0%, #2E4034 60%, #43638C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.top-certifications__lead {
  font-size: clamp(0.92rem, 2.6vw, 1.05rem);
  color: #4d5560;
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.75;
}
.top-certifications__lead strong { color: #20242b; font-weight: 700; }

.top-certifications__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.top-cert-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rank rank"
    "logo body"
    "verify verify";
  gap: 0.65rem 0.95rem;
  padding: 1.15rem 1.2rem 1rem;
  background: var(--color-bg-card);
  border: 2px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* 金色枠グラデーション風 */
  background-image:
    var(--color-bg-card),
    var(--brand-700);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 1px 2px rgba(var(--brand-700-rgb), 0.05),
    0 6px 18px rgba(var(--brand-700-rgb), 0.08),
    0 18px 40px -10px rgba(var(--brand-700-rgb), 0.12);
}
.top-cert-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(var(--brand-700-rgb), 0.06),
    0 10px 28px rgba(var(--brand-700-rgb), 0.14),
    0 28px 56px -10px rgba(var(--brand-700-rgb), 0.22);
}
.top-cert-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(94, 140, 78, 0.08), transparent 60%);
  pointer-events: none;
}
.top-cert-card__rank {
  grid-area: rank;
  display: inline-block;
  align-self: start;
  justify-self: start;
  padding: 0.18rem 0.6rem;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(var(--brand-700-rgb), 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.top-cert-card__logo {
  grid-area: logo;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.06);
  box-shadow: 0 2px 6px rgba(var(--brand-700-rgb), 0.06);
}
.top-cert-card__logo--badge {
  width: 72px;
  height: 72px;
  padding: 4px;
  background: var(--color-bg-card);
  border: 1.5px solid rgba(var(--accent-rgb), 0.25);
  box-shadow: var(--elev-2);
}
.top-cert-card__logo--badge picture {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-cert-card__logo--badge picture > img {
  position: absolute;
  inset: 0;
  display: block;
  width: min(72px, 100%) !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.top-cert-card:hover .top-cert-card__logo--badge {
  box-shadow: var(--elev-2);
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: scale(1.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (max-width: 480px) {
  .top-cert-card__logo--badge {
    width: 56px;
    height: 56px;
  }
}
.top-cert-card__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.top-cert-card__issuer {
  font-size: 0.7rem;
  color: #2E4034;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.top-cert-card__name {
  font-size: clamp(0.95rem, 2.6vw, 1.08rem);
  color: #14181e;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.top-cert-card__meta {
  font-size: 0.74rem;
  color: #5e6878;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.top-cert-card__verify {
  grid-area: verify;
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(var(--brand-700-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.72rem;
  font-weight: 800;
  color: #2E4034;
  letter-spacing: 0.1em;
}

/* カラーバリアント — 機能的カラー統一(2026-06): 装飾は緑→青パレットに収れん。
   発行元はバッジ画像/ロゴで識別し、issuer テキストは中立グレー、rank は緑(白文字 AA)。 */
.top-cert-card--stanford { background-image: var(--color-bg-card), var(--brand-700); }
.top-cert-card--stanford .top-cert-card__rank { background: var(--brand-700); }
.top-cert-card--stanford .top-cert-card__issuer { color: #525b67; }

.top-cert-card--ms { background-image: var(--color-bg-card), var(--brand-700); }
.top-cert-card--ms .top-cert-card__rank { background: var(--brand-700); }
.top-cert-card--ms .top-cert-card__issuer { color: #525b67; }

.top-cert-card--google { background-image: var(--color-bg-card), var(--brand-700); }
.top-cert-card--google .top-cert-card__rank { background: var(--brand-700); }
.top-cert-card--google .top-cert-card__issuer { color: #525b67; }

.top-cert-card--cybersec { background-image: var(--color-bg-card), var(--brand-700); }
.top-cert-card--cybersec .top-cert-card__rank { background: var(--brand-700); }
.top-cert-card--cybersec .top-cert-card__issuer { color: #525b67; }

/* 公式プロフィール集約フッター: 散在していた検証リンクを 1 つの hub に統合
   （Rule #0-9 ② Single Source of Truth）。色は他の検証アフォーダンスと同じ緑系に統一 */
.top-certifications__footer {
  text-align: center;
  margin: clamp(1.4rem, 3.5vw, 2rem) auto 0;
  max-width: 760px;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
  z-index: 2;
}
.top-certifications__footer-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: clamp(0.82rem, 2.3vw, 0.92rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
  line-height: 1.5;
}
.top-certifications__footer-label svg { flex-shrink: 0; }
.top-certifications__footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.top-certifications__footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px; /* WCAG 2.5.5 タッチターゲット */
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  background: rgba(var(--brand-700-rgb), 0.06);
  border-radius: 999px;
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.28);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.top-certifications__footer a svg { flex-shrink: 0; }
.top-certifications__footer a:hover {
  background: rgba(var(--brand-700-rgb), 0.12);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.top-certifications__footer a:focus-visible {
  outline: 2.5px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* レスポンシブ */
@media (max-width: 640px) {
  .top-certifications__grid {
    grid-template-columns: 1fr;
  }
  .top-cert-card {
    padding: 1rem;
    gap: 0.5rem 0.85rem;
  }
  .top-cert-card__logo {
    width: 48px;
    height: 48px;
  }
  .top-cert-card__logo--badge {
    width: 52px;
    height: 52px;
    padding: 2px;
  }
}

/* ==========================================================================
   ★★★ Credly Dashboard View (earner dashboard と同期した全 11 バッジ表示)
   ========================================================================== */
.credly-dashboard {
  margin-top: 3rem;
  padding: 2rem 1.5rem 2.5rem;
  background: var(--color-bg-card);
  border: 1.5px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 20px;
  box-shadow: var(--elev-2);
  position: relative;
}
.credly-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 40%);
}
.credly-dashboard__header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}
.credly-dashboard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: var(--elev-2);
}
.credly-dashboard__title {
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  color: #14181e;
  font-weight: 700;
  margin: 0.85rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.credly-dashboard__count {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  font-size: 0.85em;
  background: var(--brand-700);
  color: #ffffff;
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 800;
}
.credly-dashboard__lead {
  font-size: 0.9rem;
  color: #4d5560;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.credly-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  position: relative;
}
.credly-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.08);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 2px 6px rgba(var(--brand-700-rgb), 0.04);
}
.credly-badge-card:hover,
.credly-badge-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: var(--elev-2);
  outline: none;
}
.credly-badge-card picture,
.credly-badge-card img,
.credly-badge-card--coursera-verified svg {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}
.credly-badge-card__name {
  font-size: 0.88rem;
  color: #14181e;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0.25rem;
  /* Match the 3-line clamp height (1.35em * 3) so every card's title box is a
     fixed height regardless of 1/2/3-line titles, keeping the elements below aligned. */
  min-height: calc(1.35em * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.credly-badge-card__name small {
  font-weight: 600;
  color: #5e6878;
  font-size: 0.82em;
}
.credly-badge-card__issuer {
  font-size: 0.72rem;
  color: #4f46e5; /* darkened from #2E4034 for WCAG 1.4.3 (≈5:1 on white) */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: auto;
}
.credly-badge-card__date {
  font-size: 0.7rem;
  color: #5e6878; /* darkened from #98a0ac for WCAG 1.4.3 (≈4.6:1 on white) */
  font-weight: 500;
  letter-spacing: 0.02em;
}
.credly-badge-card--featured {
  background: var(--color-bg-card);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: var(--elev-2);
  position: relative;
}
.credly-badge-card--featured::after {
  content: "★ PREMIUM";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}
.credly-dashboard__count--coursera {
  background: rgba(0, 86, 217, 0.18) !important;
  color: #0056d9 !important;
  border: 1px solid rgba(0, 86, 217, 0.3);
}
.credly-dashboard__total {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  font-size: 0.85em;
  background: var(--brand-700);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 800;
}

/* Courseraの公開修了記録。Credly公式バッジとは区別し、中立の修了証アイコンを使う */
.credly-badge-card--coursera-verified {
  background: linear-gradient(135deg, #EDF1E7 0%, #ffffff 100%);
  border: 1.5px solid rgba(0, 86, 217, 0.3);
  position: relative;
}
.credly-badge-card--coursera-verified > svg {
  display: none;
}
.credly-badge-card--coursera-verified::before {
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 50%;
  background-color: #f1f4f8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4034' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v10H7zM15 3v4h4M10 11h6M10 14h4'/%3E%3Ccircle cx='7' cy='18' r='3'/%3E%3Cpath d='m5.8 20-.5 2L7 21l1.7 1-.5-2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58px 58px;
}
.credly-badge-card--coursera-verified::after {
  content: "✓ COURSERA VERIFIED";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0056d9;
  background: rgba(0, 86, 217, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}
.credly-badge-card--coursera-verified:hover {
  border-color: rgba(0, 86, 217, 0.55);
  box-shadow: var(--elev-2);
}
.credly-badge-card--coursera-verified svg {
  width: 110px;
  height: 110px;
}
.credly-badge-card__claim-cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  /* 検証アフォーダンスの色をサイト共通の緑に統一（旧: オレンジ var(--brand-700)） */
  color: var(--color-primary);
  background: rgba(var(--brand-700-rgb), 0.08);
  border: 1px dashed rgba(var(--brand-700-rgb), 0.4);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.credly-badge-card--coursera-verified:hover .credly-badge-card__claim-cta {
  background: var(--color-primary);
  color: #ffffff;
  border-style: solid;
}

/* リンク可視化: クリック可能な認定カード/サマリーに統一フォーカスリング
   （キーボード操作の可視化 / WCAG 2.4.7）。色は検証アフォーダンスと同じ緑系。 */
.top-cert-card:focus-visible,
.credly-badge-card:focus-visible,
.cert-verify-item__link:focus-visible,
.cert-collapse__summary:focus-visible,
.cert-verify-list__summary:focus-visible {
  outline: 2.5px solid var(--color-primary-light);
  outline-offset: 3px;
}
.credly-dashboard__sync-note {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.78rem;
  color: #5e6878;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.credly-dashboard__sync-note svg {
  color: var(--brand-700);
}
@media (max-width: 600px) {
  .credly-dashboard {
    padding: 1.5rem 1rem 1.75rem;
    margin-top: 2rem;
  }
  .credly-dashboard__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.85rem;
  }
  .credly-badge-card {
    padding: 1rem 0.75rem 0.85rem;
  }
  .credly-badge-card picture,
  .credly-badge-card img,
  .credly-badge-card--coursera-verified svg {
    width: 90px;
    height: 90px;
  }
  .credly-badge-card__name {
    font-size: 0.78rem;
    min-height: calc(1.35em * 3);
  }
}

/* ==========================================================================
   ★★★ Other Verified Certifications (Credly 未発行のしかく一覧)
   ========================================================================== */
.other-certs {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px dashed rgba(var(--brand-700-rgb), 0.15);
  position: relative;
}
.other-certs__title {
  font-size: 1.05rem;
  color: #14181e;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.other-certs__title small {
  font-size: 0.78rem;
  color: #5e6878;
  font-weight: 500;
}
.other-certs__count {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.82rem;
  background: #2E4034;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.other-certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.other-cert-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-height: 44px;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.08);
  border-left: 3px solid #98a0ac;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.other-cert-tag:hover,
.other-cert-tag:focus-visible {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(var(--brand-700-rgb), 0.08);
}
/* キーボードフォーカスは可視リング必須（旧 outline:none を是正 / WCAG 2.4.7） */
.other-cert-tag:focus-visible {
  outline: 2.5px solid var(--color-primary-light);
  outline-offset: 3px;
}
.other-cert-tag__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.other-cert-tag__head svg {
  display: none;
}
.other-cert-tag__head::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 6px;
  background-color: #f1f4f8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4034' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v10H7zM15 3v4h4M10 11h6M10 14h4'/%3E%3Ccircle cx='7' cy='18' r='3'/%3E%3Cpath d='m5.8 20-.5 2L7 21l1.7 1-.5-2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}
.other-cert-tag__issuer {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5e6878;
}
.other-cert-tag strong {
  font-size: 0.88rem;
  color: #14181e;
  font-weight: 700;
  line-height: 1.35;
}
.other-cert-tag__meta {
  font-size: 0.74rem;
  color: #525b67;
  line-height: 1.45;
  margin-top: 2px;
}
/* 機能的カラー統一(2026-06): 検証リンク系=青アクセント #43638C（リンク/検証の役割）、
   物理証明(DJI/サーティファイ=リンク無)=中立グレー。発行元ブランド色はタグ内 SVG ロゴにのみ残す。
   issuer テキストは常に中立グレーで、色は「リンクか否か」の機能だけを伝える。 */
.other-cert-tag--tier1 { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.05) 0%, #ffffff 30%); }
.other-cert-tag--tier1 .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--google { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.05) 0%, #ffffff 30%); }
.other-cert-tag--google .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--ibm { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.05) 0%, #ffffff 30%); }
.other-cert-tag--ibm .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--microsoft { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.05) 0%, #ffffff 30%); }
.other-cert-tag--microsoft .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--skillup { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.05) 0%, #ffffff 30%); }
.other-cert-tag--skillup .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--ecba { border-left-color: #43638C; background: linear-gradient(90deg, rgba(67,99,140,0.07) 0%, #ffffff 30%); position: relative; }
.other-cert-tag--ecba .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--ecba::after {
  content: "★ PREMIUM";
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: #43638C;
  background: rgba(67,99,140,0.1);
  padding: 1.5px 5px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.other-cert-tag--dji { border-left-color: #8E9187; background: linear-gradient(90deg, rgba(92,97,89,0.05) 0%, #ffffff 30%); cursor: default; }
.other-cert-tag--dji .other-cert-tag__issuer { color: #525b67; }
.other-cert-tag--certify { border-left-color: #8E9187; background: linear-gradient(90deg, rgba(92,97,89,0.05) 0%, #ffffff 30%); cursor: default; }
.other-cert-tag--certify .other-cert-tag__issuer { color: #525b67; }
@media (max-width: 600px) {
  .other-certs__grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .other-cert-tag {
    padding: 0.75rem 0.85rem;
  }
}

/* ==========================================================================
   ★★★★★★★ 強み・歩み セクション再構築 (2026-05-21)
   - "差別化要因 6軸" カード強化
   - "20年の歩み" 縦タイムライン (マイルストーン強調)
   ========================================================================== */

/* セクションイントロ */
.capabilities-section__intro {
  text-align: left;
  max-width: 880px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
}
.capabilities-section__badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.3);
}
#capabilities-title {
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  line-height: 1.4;
  font-weight: 800;
  margin: 0 0 0.85rem;
}
#capabilities-title .gradient-text {
  background: var(--brand-700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.capabilities-section__intro .section-desc strong { color: #20242b; font-weight: 700; }

/* サブ見出し */
.capabilities-subhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 800;
  color: #20242b;
  margin: clamp(2rem, 5vw, 3rem) 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid rgba(var(--brand-700-rgb), 0.18);
}
.capabilities-subhead svg { color: var(--icon-accent); flex-shrink: 0; }
.capabilities-subhead--journey { border-bottom-color: rgba(67, 99, 140, 0.18); }
.capabilities-subhead--journey svg { color: var(--icon-accent); }

/* 差別化要因カード */
.capabilities-grid--why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.capability-card--why {
  background: var(--color-bg-card);
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.12);
  border-radius: 16px;
  padding: 1.35rem 1.4rem 1.25rem;
  box-shadow:
    0 1px 2px rgba(var(--brand-700-rgb), 0.04),
    0 6px 18px rgba(var(--brand-700-rgb), 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.capability-card--why:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-700-rgb), 0.3);
  box-shadow:
    0 4px 10px rgba(var(--brand-700-rgb), 0.06),
    0 18px 36px rgba(var(--brand-700-rgb), 0.14);
}
.capability-card--why::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-700);
}
.capability-card__stat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2E4034;
  background: rgba(var(--brand-700-rgb), 0.1);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.capability-card--why h4 {
  margin: 0 0 0.55rem;
  font-size: clamp(1rem, 2.8vw, 1.12rem);
  font-weight: 800;
  color: #14181e;
  line-height: 1.4;
}
.capability-card--why > p {
  margin: 0 0 0.7rem;
  font-size: clamp(0.85rem, 2.4vw, 0.92rem);
  line-height: 1.7;
  color: #4d5560;
}
.capability-card--why p strong { color: #20242b; font-weight: 700; }
.capability-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.5;
}
.capability-card__points li {
  position: relative;
  padding: 0.2rem 0 0.2rem 1.1rem;
  color: #2E4034;
  font-weight: 600;
}
.capability-card__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 800;
}

/* 縦タイムライン（再構築） */
.timeline--enhanced {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding-left: 0;
}
.timeline--enhanced .timeline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.25rem;
  position: relative;
  counter-reset: timeline;
}
.timeline--enhanced .timeline-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--brand-700);
  opacity: 0.3;
}
.timeline--enhanced .timeline-item {
  position: relative;
  padding: 0.5rem 0 1.1rem 0.65rem;
  text-align: left;
}
.timeline--enhanced .timeline-item::before {
  content: "";
  position: absolute;
  left: -1.7rem;
  top: 0.85rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #2E4034;
  box-shadow: 0 0 0 3px rgba(var(--brand-700-rgb), 0.12);
  z-index: 1;
}
.timeline--enhanced .timeline-item--milestone::before {
  background: var(--brand-700);
  border-color: #ffffff;
  width: 18px;
  height: 18px;
  left: -1.83rem;
  top: 0.7rem;
  box-shadow:
    0 0 0 3px rgba(var(--brand-700-rgb), 0.25),
    0 4px 10px rgba(var(--brand-700-rgb), 0.3);
}
.timeline--enhanced .timeline-item--current::before {
  background: var(--brand-700);
  border-color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(var(--brand-700-rgb), 0.25),
    0 0 16px rgba(94, 140, 78, 0.6),
    0 4px 10px rgba(var(--brand-700-rgb), 0.4);
  animation: timelineCurrentPulse 2.5s ease-in-out infinite;
}
@keyframes timelineCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--brand-700-rgb), 0.25), 0 0 16px rgba(94, 140, 78, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(var(--brand-700-rgb), 0.15), 0 0 24px rgba(94, 140, 78, 0.85); }
}
.timeline--enhanced .timeline-year {
  display: block;
  align-self: start;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: #2E4034;
  background: rgba(var(--brand-700-rgb), 0.08);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.timeline-item--milestone .timeline-year {
  background: var(--brand-700);
  color: #ffffff;
}
.timeline-item--current .timeline-year {
  background: var(--brand-700);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(var(--brand-700-rgb), 0.3);
}
.timeline-content {
  display: block;
}
.timeline-content strong {
  display: block;
  font-size: clamp(0.92rem, 2.6vw, 1.02rem);
  font-weight: 700;
  color: #14181e;
  margin-bottom: 0.25rem;
  line-height: 1.45;
}
.timeline-content p {
  margin: 0;
  font-size: clamp(0.82rem, 2.4vw, 0.9rem);
  line-height: 1.7;
  color: #4d5560;
}
.timeline-content p strong {
  display: inline;
  font-size: inherit;
  color: #20242b;
}

/* セクション CTA */
.capabilities-section .section-cta {
  text-align: center;
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* モバイル */
@media (max-width: 640px) {
  .capabilities-grid--why {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .capability-card--why {
    padding: 1.1rem 1rem 1rem;
  }
  .timeline--enhanced .timeline-list {
    padding-left: 1.85rem;
  }
  .timeline--enhanced .timeline-item::before {
    left: -1.4rem;
  }
  .timeline--enhanced .timeline-item--milestone::before {
    left: -1.5rem;
  }
}

@media (max-width: 420px) {
  .timeline--enhanced .timeline-list { padding-left: 1.5rem; }
  .timeline--enhanced .timeline-item { padding-left: 0.35rem; }
  .timeline--enhanced .timeline-item::before { left: -1.2rem; width: 12px; height: 12px; }
  .timeline--enhanced .timeline-item--milestone::before { left: -1.3rem; width: 16px; height: 16px; }
}

/* trust-badges 強化 (4項目化に対応) */
.services-section .trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 2rem;
  max-width: 900px;
}
.services-section .trust-badge {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: rgba(34, 197, 94, 0.1);
  color: #065f46;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px;
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  font-weight: 700;
}

/* ==========================================================================
   ★★★★★★★★★ 権威ある認定機関のブランド色強調マーカー
   日付: 2026-05-22
   使い方: <span class="brand brand--stanford">Stanford University</span>
   ========================================================================== */

/* 共通: 権威マーカーの基本スタイル */
.brand {
  display: inline;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  position: relative;
  transition: background 0.2s ease;
}
.brand:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* アイコン (オプション・::before) */
.brand--icon::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.25em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: -0.05em;
}

/* Stanford University — カーディナルレッド */
.brand--stanford {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.18) 60%);
  text-shadow: 0 0 1px rgba(var(--brand-700-rgb), 0.15);
}

/* DeepLearning.AI — Cyan / Stanford 系統 */
.brand--deeplearning {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.18) 60%);
}

/* Andrew Ng — Stanford + DL.AI ハイブリッド */
.brand--andrew-ng {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.35) 60%);
  font-weight: 900;
  text-shadow: 0 0 1px rgba(var(--brand-700-rgb), 0.2);
}
.brand--andrew-ng::before {
  content: "👨‍🎓 ";
  font-weight: normal;
}

/* Google — 4色のグラデで象徴 */
.brand--google {
  background-image: var(--brand-700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: rgba(var(--brand-700-rgb), 0.06);
  font-weight: 900;
}

/* Microsoft — 公式ブルー */
.brand--microsoft {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.18) 60%);
}

/* IBM — ディープブルー */
.brand--ibm {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.18) 60%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* DJI — 黒赤 */
.brand--dji {
  color: #1a1a1a !important;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--brand-700-rgb), 0.18) 60%);
}

/* Anthropic / Claude — オレンジ */
.brand--anthropic {
  color: #C97B6B !important;
  background: linear-gradient(180deg, transparent 60%, rgba(201, 123, 107, 0.2) 60%);
}

/* OpenAI / ChatGPT — 緑黒 */
.brand--openai {
  color: #10a37f !important;
  background: linear-gradient(180deg, transparent 60%, rgba(16, 163, 127, 0.18) 60%);
}

/* ノーベル経済学賞受賞者 — Kahneman/Thaler 共通 (金色) */
.brand--nobel {
  color: #92400e !important;
  background: linear-gradient(180deg, transparent 50%, rgba(var(--brand-700-rgb), 0.45) 50%);
  font-weight: 900;
  text-shadow: 0 0 1px rgba(146, 64, 14, 0.2);
}
.brand--nobel::before {
  content: "🏅 ";
  font-weight: normal;
}

/* Cialdini — 紫 */
.brand--cialdini {
  color: #2E4034 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(124, 58, 237, 0.18) 60%);
}

/* Coursera — Coursera ブルー */
.brand--coursera {
  color: #0056D2 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 86, 210, 0.15) 60%);
}

/* DJI JAPAN / DJI CAMP */
.brand--dji-camp {
  color: #1a1a1a !important;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.1) 60%);
}

/* 認定資格を含む文脈の cert-credit 強化 */
.cert-credit .brand,
.capability-card__authority-list .brand,
.service-card__certs .brand,
.top-cert-card__issuer .brand,
.capability-card__source .brand {
  font-size: inherit;
  padding: 0.05em 0.25em;
}

/* モバイル: ブランドマーカーは改行可能に */
@media (max-width: 768px) {
  .brand {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   ★★★★★★★★★★ 最終仕上げ (2026-05-22)
   1. Sticky Footer (必ずページ最下部)
   2. Z-index 階層整理
   3. 信頼性 UI/UX 強化
   ========================================================================== */

/* ─── Sticky Footer ─────────────── */
html, body {
  min-height: 100vh;
  min-height: 100dvh;
}
body {
  display: flex;
  flex-direction: column;
}
body > header,
body > .top-notice {
  flex-shrink: 0;
}
main, #main-content {
  flex: 1 0 auto;
}
body > footer,
.footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* ─── Z-index 階層の最終整理 ─────────────── */
:root {
  --z-bg: 0;
  --z-content: 1;
  --z-floating: 5;
  --z-header: 100;
  --z-trust-banner: 990;
  --z-sticky-cta: 1000;
  --z-lang-picker: 1200;
  --z-modal: 1500;
  --z-toast: 1800;
  --z-loading: 9999;

  /* ─── ボトムスタック高さの一元管理（衝突防止の単一の真実） ───────
     画面下から積み上げる順:
       0px ──────── sticky-cta-mobile (height ≈ 64px)
       64px ─────── trust-banner       (height ≈ 56px)
       120px ────── i18n-toast / cookie-notice 等
     PC では sticky-cta は非表示なので trust-banner が底面に来る。
  */
  --bottom-safe: env(safe-area-inset-bottom, 0px);   /* iPhone のホームバー領域 */
  --bottom-stack-cta: calc(68px + var(--bottom-safe)); /* JS実測後はsafe-area込みの物理高 */
  --bottom-stack-trust: 68px;                         /* trust-banner の物理高(実測66+余裕) */
  --bottom-stack-1: 0px;                              /* 第1段: sticky CTA は底面 */
  --bottom-stack-2: var(--bottom-stack-cta);          /* 第2段: CTA の直上 */
  --bottom-stack-3: calc(var(--bottom-stack-cta) + var(--bottom-stack-trust) + 8px); /* 第3段 */
}
.sticky-cta-mobile { z-index: var(--z-sticky-cta) !important; }
.trust-banner { z-index: var(--z-trust-banner) !important; }
.lang-picker-menu,
.lang-picker-toggle { z-index: var(--z-lang-picker) !important; }
header.header,
.header { z-index: var(--z-header) !important; }

/* trust-banner / sticky-cta / cookie-notice / i18n-toast の統一スタック配置 */
.sticky-cta-mobile {
  bottom: var(--bottom-stack-1) !important;
}
/* モバイル: trust-banner は sticky-cta の上に積む */
@media (max-width: 768px) {
  .trust-banner {
    bottom: var(--bottom-stack-2) !important;
  }
  .cookie-notice {
    bottom: var(--bottom-stack-3) !important; /* trust-banner の更に上 */
  }
  .i18n-toast {
    bottom: var(--bottom-stack-3) !important; /* trust-banner / cookie-notice と同じ段に */
  }
}
/* PC: sticky-cta は非表示、trust-banner が底に来る */
@media (min-width: 769px) {
  .trust-banner {
    bottom: var(--bottom-safe) !important;
  }
  .cookie-notice {
    bottom: calc(var(--bottom-stack-trust) + var(--bottom-safe) + 8px) !important;
  }
}

/* ============================================================
   ★ コンテンツが trust-banner / sticky-cta に隠れない対策
   - main にも余白を確保 (footer だけでなく main 末尾でも banner が被らないように)
   - scroll-padding-bottom で anchor scroll 時にも隠れない
   - 重要セクションには scroll-margin-bottom で確実に確保
   ============================================================ */
html {
  /* anchor scroll の到着地点を banner より上に確保 */
  scroll-padding-bottom: calc(var(--bottom-stack-cta) + var(--bottom-stack-trust) + 16px);
}
@media (min-width: 769px) {
  html {
    scroll-padding-bottom: calc(var(--bottom-stack-trust) + var(--bottom-safe) + 16px);
  }
}

/* main の末尾セクションが banner に隠れないよう余白を確保 */
@media (max-width: 768px) {
  main, #main-content {
    padding-bottom: calc(var(--bottom-stack-cta) + var(--bottom-stack-trust) + 16px);
  }
}
@media (min-width: 769px) {
  main, #main-content {
    padding-bottom: calc(var(--bottom-stack-trust) + var(--bottom-safe) + 16px);
  }
}

/* 重要セクション（privacy-commitment / trust-bar / contact）には個別 scroll-margin */
.privacy-commitment,
.trust-banner ~ section,
#contact,
#privacy-commitment {
  scroll-margin-bottom: calc(var(--bottom-stack-cta) + var(--bottom-stack-trust) + var(--bottom-safe) + 24px);
}

@media (max-width: 768px) {
  .privacy-commitment,
  .trust-banner ~ section,
  #contact,
  #privacy-commitment {
    scroll-margin-bottom: calc(var(--bottom-stack-cta) + var(--bottom-stack-trust) + 24px);
  }
}

/* ─── 信頼性 UI/UX 強化 (microcopy・focus・loading) ─────────────── */

/* フォーカスリングを全要素で明確化 (アクセシビリティ + 信頼性) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #2E4034;
  outline-offset: 2px;
  border-radius: 4px;
}

/* リンクの hover で下線アニメーション (微妙な動きで信頼感) */
a:not(.btn):not(.nav-cta):not(.service-card):not(.capability-card):not(.top-cert-card):not(.lang-picker-menu li):not(.qualification-tag):not(.portfolio-press-card) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ボタンのプレス感 (touch feedback) */
.btn:active,
button:active:not(:disabled) {
  transform: translateY(1px);
}

/* フォーム入力の信頼感: 有効/エラー状態 */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
  background: var(--color-bg-card);
}
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: #16a34a;
}

/* スケルトンローダー風 (画像読込中) */
img[loading="lazy"]:not([src]),
img.is-loading {
  background: var(--surface-2);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s linear infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  img.is-loading { animation: none; }
  .top-cert-card,
  .capability-card,
  .service-card { transition: none !important; }
}

/* "詳細を表示" のような微小アクションのアクセシビリティ */
[aria-expanded="true"]::after { content: ""; }

/* タッチターゲット 44x44px の最終ガード (a/button) */
@media (hover: none) and (pointer: coarse) {
  a, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* インラインリンク（テキスト中）は除外 */
  p a, li a, td a {
    min-height: auto;
    min-width: auto;
  }
}

/* ==========================================================================
   ★ Sticky Footer 最終ガード (2026-05-22)
   構造: body > header > main(security-badges 含む) > footer
   ========================================================================== */
html, body {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
}
body {
  display: flex !important;
  flex-direction: column;
  position: relative;
}
header, body > header {
  flex-shrink: 0;
}
main, #main-content, body > main {
  flex: 1 0 auto;
  display: block;
}
footer.footer, body > footer {
  flex-shrink: 0;
  margin-top: auto;
  /* 万一 main が空でも footer をビューポート底面に */
  margin-bottom: 0;
}
/* main 外の section があった場合の保険（順序保証）*/
body > section,
body > aside {
  flex-shrink: 0;
}

/* fixed 要素は flex フローから除外されているため footer 配置に影響なし */
.trust-banner,
.sticky-cta-mobile {
  /* position: fixed のため flex に影響しない */
}

/* ==========================================================================
   ★ フッター刷新 (2026-05-22) — Privacy Mark 偽称削除＋代表者情報明示
   ========================================================================== */

/* 代表者カード */
.footer-owner {
  margin: 0.85rem 0;
  padding: 0.7rem 0.85rem;
  background: rgba(var(--brand-700-rgb), 0.06);
  border-left: 3px solid #2E4034;
  border-radius: 8px;
}
.footer-owner__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
}
.footer-owner__label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2E4034;
  background: rgba(var(--brand-700-rgb), 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.footer-owner__name {
  font-weight: 800;
  font-size: 1rem;
  /* ライト footer (#eef2f7) 上で 14:1 (AAA pass) */
  color: #14181e;
}
.footer-owner__meta {
  display: block;
  font-size: 0.74rem;
  /* secondary で 5.8:1 (AA pass) */
  color: var(--color-text-secondary);
  margin-top: 0.2rem;
}

/* プラットフォームリンク — ライトフッター対応 */
.footer-platforms {
  font-size: 0.82rem;
  line-height: 1.85;
  margin: 0;
}
.footer-platforms a {
  /* ライト背景上で 5.8:1 (AA pass) */
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-platforms a:hover {
  /* ブランド色でホバー強調 (5.5:1, AA pass) */
  color: #2E4034;
  text-decoration: underline;
}

/* セキュリティ自己コミットメント — ライトフッター (#eef2f7) 上で WCAG AA 確保 */
.footer-security-note {
  margin: 1rem auto;
  max-width: 720px;
  padding: 1rem 1.2rem;
  /* 緑系の背景を強化して読みやすさを担保 */
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(5, 150, 105, 0.05));
  border: 1.5px solid rgba(5, 150, 105, 0.45);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
  /* ライト背景上で 9.0:1 のコントラスト (WCAG AAA pass) */
  color: #14181e;
  text-align: center;
  box-shadow: 0 2px 8px rgba(var(--brand-700-rgb), 0.06);
}
.footer-security-note svg {
  /* ダーク緑で 7.5:1 (AAA pass) */
  color: #047857;
  vertical-align: -2px;
}
.footer-security-note strong {
  /* ダーク緑で 7.5:1 (AAA pass) */
  color: #047857;
  font-weight: 800;
}
.footer-security-note small {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(5, 150, 105, 0.18);
  font-size: 0.76rem;
  /* secondary 色で 5.8:1 (WCAG AA pass) — 法的注記は確実に読める必要あり */
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* footer-legal の改行・モバイル対応 */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
}
/* legal-divider もライトフッター用に変更 */
.legal-divider {
  color: rgba(var(--brand-700-rgb), 0.4); /* ライト背景上で視認可能なブランド色寄りに */
}
@media (max-width: 540px) {
  .footer-legal {
    flex-direction: column;
    gap: 0.5rem;
  }
  .legal-divider { display: none; }
  .footer-security-note {
    font-size: 0.78rem;
    padding: 0.75rem 0.9rem;
  }
}

/* 17領域リストのモバイル時最適化 */
@media (max-width: 768px) {
  .footer-nav-group h3,
  .footer-nav-group h4 {
    margin-top: 1rem;
  }
  .footer-nav-group ul {
    font-size: 0.85rem;
    line-height: 1.85;
  }
}

/* ==========================================================================
   ★★★★★ TRUST MEGA BANNER (バッっポン的リデザイン 2026-05-27)
   - 数字 × ロゴ × 第三者検証で信頼性を即座に証明
   - わかりやすさ: 27 / 9 / 20 / 50+ / 22 の big numbers で記憶定着
   ========================================================================== */
.trust-mega {
  position: relative;
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--brand-700-rgb), 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(var(--accent-rgb), 0.05) 0%, transparent 50%),
    var(--color-bg-card);
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}
.trust-mega__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.trust-mega__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: var(--brand-700);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.25);
}
.trust-mega__title {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 800;
  color: #14181e;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 1rem;
}
.trust-mega__title strong {
  background: var(--brand-700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}
.trust-mega__highlight {
  position: relative;
  display: inline-block;
  color: #43638C;
  font-weight: 900;
}
.trust-mega__highlight::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 8px;
  background: rgba(var(--accent-rgb), 0.22);
  z-index: -1;
  border-radius: 4px;
}
.trust-mega__lead {
  font-size: clamp(0.92rem, 2.3vw, 1.05rem);
  color: #363c45;
  line-height: 1.85;
  max-width: 42em;
  text-align: left;
  margin: 0 auto 2.5rem;
}
.trust-mega__lead strong {
  color: #14181e;
  font-weight: 800;
}

/* Big Numbers Grid */
.trust-mega__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto 2.5rem;
}
.trust-stat {
  position: relative;
  padding: 1.5rem 1rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.trust-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-700-rgb), 0.35);
  box-shadow: 0 10px 28px rgba(var(--brand-700-rgb), 0.15);
}
.trust-stat__num {
  font-size: clamp(2.5rem, 7vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #2E4034;
  font-family: var(--font-sans);
  background: var(--brand-700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.trust-stat__num small {
  font-size: 0.55em;
  vertical-align: 0.25em;
  font-weight: 800;
}
.trust-stat__label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #14181e;
  letter-spacing: 0.02em;
}
.trust-stat__sub {
  font-size: 0.72rem;
  color: #5e6878;
  line-height: 1.45;
  text-align: center;
}
.trust-stat--credly {
  background: var(--color-bg-card);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: var(--elev-2);
}
.trust-stat--credly .trust-stat__num {
  background: var(--brand-700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.trust-stat--credly::after {
  content: "★ HR業界検証";
  position: absolute;
  top: -10px;
  right: 50%;
  transform: translateX(50%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: var(--brand-700);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--elev-2);
}

/* Issuer Logos Row */
.trust-mega__issuers {
  margin: 0 auto 2rem;
  max-width: 980px;
  padding: 1.5rem 1.25rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(var(--brand-700-rgb), 0.06);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.trust-mega__issuers-label {
  display: block;
  font-size: clamp(0.875rem, 0.84rem + 0.12vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5e6878;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.trust-mega__issuers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
}
.trust-issuer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: #14181e;
  font-weight: 700;
  letter-spacing: 0.01em;
  filter: grayscale(20%);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.trust-issuer > svg,
.trust-issuer__picture {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.trust-issuer__picture {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 8px;
  background: var(--color-bg-card);
}
.trust-issuer__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.trust-issuer__logo-stack {
  display: inline-flex;
  align-items: center;
  padding-left: 12px;
}
.trust-issuer__logo-stack .trust-issuer__picture {
  margin-left: -12px;
  border-width: 2px;
}
.trust-issuer:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}
.trust-issuer strong {
  font-weight: 800;
}
.trust-issuer small {
  display: block;
  font-size: 0.65em;
  color: #5e6878;
  font-weight: 600;
  margin-top: 1px;
}

/* Primary CTA Row */
.trust-mega__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto 1.25rem;
}
.btn-trust {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.95rem 1.85rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  letter-spacing: 0.01em;
  position: relative;
}
.btn-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-trust small {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.04em;
}
.btn-trust--primary {
  background: var(--brand-700);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(var(--brand-700-rgb), 0.35);
}
.btn-trust--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--brand-700-rgb), 0.45);
}
.btn-trust--secondary {
  background: #ffffff;
  color: #2E4034;
  border: 2px solid rgba(var(--brand-700-rgb), 0.35);
}
.btn-trust--secondary:hover {
  background: rgba(var(--brand-700-rgb), 0.06);
  border-color: rgba(var(--brand-700-rgb), 0.6);
  transform: translateY(-1px);
}

.trust-mega__footnote {
  font-size: 0.82rem;
  color: #5e6878;
  margin: 1.25rem auto 0;
  max-width: 780px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .trust-mega__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .trust-mega__issuers-row {
    gap: 0.85rem 1rem;
  }
  .trust-issuer {
    font-size: 0.78rem;
  }
  .btn-trust {
    width: 100%;
    padding: 0.85rem 1rem;
  }
}

/* ==========================================================================
   ★★★★★ 3-STEP PROCESS (How To Start) (バッっポン的リデザイン 2026-05-27)
   - わかりやすさ最大化: 数字 + アイコン + 詳細リストの 3 段階表示
   ========================================================================== */
.how-to-start {
  padding: clamp(2rem, 5vw, 3.25rem) 0;
  background:
    var(--color-bg-card);
  position: relative;
}
.how-to-start__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}
.how-to-start__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #2E4034;
  background: rgba(var(--brand-700-rgb), 0.12);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.how-to-start__title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  color: #14181e;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.how-to-start__title strong {
  background: var(--brand-700);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.how-to-start__lead {
  font-size: clamp(0.92rem, 2.3vw, 1.02rem);
  color: #363c45;
  line-height: 1.85;
  margin: 0;
}
.how-to-start__lead strong {
  color: #14181e;
  font-weight: 800;
}
.how-to-start__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding-inline: 1.5rem;
  position: relative;
}
/* Arrow connectors between steps */
.how-to-start__steps::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--brand-700-rgb),0.3) 0 8px, transparent 8px 16px);
  z-index: 0;
  display: none;
}
@media (min-width: 900px) {
  .how-to-start__steps::before { display: block; }
}
.step-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid rgba(var(--brand-700-rgb), 0.08);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 14px rgba(var(--brand-700-rgb), 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  z-index: 1;
}
.step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-700-rgb), 0.4);
  box-shadow: 0 12px 32px rgba(var(--brand-700-rgb), 0.15);
}
.step-card__num {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--brand-700-rgb), 0.35);
  border: 4px solid #ffffff;
}
.step-card--final .step-card__num {
  background: var(--brand-700);
  box-shadow: var(--elev-2);
}
.step-card__icon {
  margin: 0.85rem auto 0.25rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  border-radius: var(--radius-lg);
  color: #2E4034;
}
.step-card--final .step-card__icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(67, 99, 140, 0.12));
  color: #43638C;
}
.step-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #14181e;
  text-align: center;
  margin: 0;
  letter-spacing: -0.01em;
}
.step-card__desc {
  font-size: 0.88rem;
  color: #4d5560;
  line-height: 1.7;
  margin: 0;
  text-align: left;
}
.step-card__desc strong {
  color: #14181e;
  font-weight: 800;
}
.step-card__details {
  list-style: none;
  padding: 0.75rem 0.85rem;
  margin: 0;
  background: rgba(248, 250, 252, 0.85);
  border-radius: 10px;
  border: 1px dashed rgba(var(--brand-700-rgb), 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.step-card__details li {
  font-size: 0.82rem;
  color: #363c45;
  font-weight: 500;
}
.step-card__time {
  align-self: center;
  margin-top: auto;
  padding: 0.35rem 0.85rem;
  background: rgba(var(--brand-700-rgb), 0.1);
  color: #2E4034;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.step-card--final .step-card__time {
  background: rgba(var(--accent-rgb), 0.12);
  color: #43638C;
}

.how-to-start__trust {
  margin: 3rem auto 0;
  max-width: 880px;
  text-align: center;
  padding: 0 1.5rem;
}
.how-to-start__trust-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: #4d5560;
  margin: 0 0 1.5rem;
}
.how-to-start__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.how-to-start__trust-item strong {
  color: #14181e;
  font-weight: 700;
}
.btn-xl {
  padding: 1.1rem 2.2rem !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(var(--brand-700-rgb), 0.35);
}
.btn-xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--brand-700-rgb), 0.45);
}
.how-to-start__cta {
  display: inline-block;
}

@media (max-width: 600px) {
  .how-to-start__steps {
    grid-template-columns: 1fr;
    gap: 2.5rem 1.5rem;
  }
  .step-card {
    padding: 1.75rem 1.25rem 1.25rem;
  }
}

/* ==========================================================================
   ★★★★★ ページ内ナビゲーション (わかりやすさ向上) 2026-05-28 NEW
   - 5 つの主要セクションへワンクリック移動
   - スクロールに応じてヘッダー下に固定表示
   ========================================================================== */
.page-nav {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.08);
  box-shadow: 0 2px 8px rgba(var(--brand-700-rgb), 0.04);
  position: -webkit-sticky;
  position: sticky;
  /* ヘッダー (.header position:fixed; 70px) と 通知バー の下に配置 */
  top: calc(var(--header-height, 70px) + var(--notice-height, 0px));
  /* 初期表示時もヘッダーに隠れないよう自然位置を下げる */
  margin-top: calc(var(--header-height, 70px) + var(--notice-height, 0px));
  z-index: 40;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 100%;
  /* 注: overflow:hidden は子要素の overflow-x:auto を妨げるため指定しない (2026-05-29 修正) */
}
.page-nav .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.page-nav__list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* テキスト重なり防止: 各アイテムは縮まない */
  flex-wrap: nowrap;
}
.page-nav__list > li {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.page-nav__link {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .page-nav__list {
    padding: 0.45rem 0.75rem;
    gap: 0.4rem;
  }
  .page-nav__link {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    min-height: 38px;
  }
}
@media (max-width: 480px) {
  .page-nav__link {
    padding: 0.45rem 0.65rem;
    font-size: 0.74rem;
  }
  .page-nav__num {
    width: 18px;
    height: 18px;
    font-size: 0.62rem;
  }
}
.page-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page-nav__list::-webkit-scrollbar { display: none; }
.page-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.95rem;
  text-decoration: none;
  color: #4d5560;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.page-nav__link:hover,
.page-nav__link:focus-visible {
  background: rgba(var(--brand-700-rgb), 0.08);
  border-color: rgba(var(--brand-700-rgb), 0.3);
  color: #2E4034;
  outline: none;
  transform: translateY(-1px);
}
.page-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--brand-700-rgb), 0.15);
  color: #2E4034;
  font-size: 0.72rem;
  font-weight: 900;
  flex-shrink: 0;
}
.page-nav__link:hover .page-nav__num,
.page-nav__link.is-active .page-nav__num {
  background: #2E4034;
  color: #ffffff;
}
.page-nav__label {
  letter-spacing: 0.01em;
}
.page-nav__link.is-active {
  background: rgba(var(--brand-700-rgb), 0.12);
  border-color: rgba(var(--brand-700-rgb), 0.45);
  color: #2E4034;
}
.page-nav__link--cta {
  background: var(--brand-700);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(var(--brand-700-rgb), 0.3);
}
.page-nav__link--cta .page-nav__num {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.page-nav__link--cta:hover {
  background: linear-gradient(135deg, #4f52e8 0%, #9333ea 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(var(--brand-700-rgb), 0.45);
}
.page-nav__link--cta:hover .page-nav__num {
  background: rgba(255, 255, 255, 0.3);
}
/* ヘッダー・案内バーは html 側、ここでは sticky ページナビ分だけを加算する。 */
[id="trust-mega-title"], [id="services"], [id="how-to-start-title"], [id="top-certifications"], [id="company"], [id="corporate-history"], [id="contact"] {
  scroll-margin-top: 60px;
}
@media (max-width: 768px) {
  .page-nav__list {
    justify-content: flex-start;
    padding: 0.45rem 0;
    gap: 0.35rem;
  }
  .page-nav__link {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }
  .page-nav__num {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }
}

.hidden-md-up {
  display: inline;
}
@media (min-width: 769px) {
  .hidden-md-up {
    display: none;
  }
}

/* ==========================================================================
   ★★★★★ 徹底マルチデバイス対応 (2026-05-29 NEW)
   - 320px (iPhone SE 1st gen) 〜 4K まで全幅最適化
   - 7 ブレークポイント: 320 / 480 / 600 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

/* 320-374px: 超小型 (iPhone SE 第1世代, 古いAndroid) */
@media (max-width: 374px) {
  :root {
    --container-padding: 0.5rem;
  }
  body {
    font-size: 14px;
  }
  .container,
  .pain-solution__intro,
  .trust-mega__inner,
  .how-to-start__header,
  .authority-matrix__header {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
  /* タッチターゲット最小 44x44 保証 */
  button, .btn,
  .page-nav__link,
  .pain-card__cta,
  .auth-cap-row__verify a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 大きな数字を縮小 */
  .trust-stat__num {
    font-size: 2rem !important;
  }
  .step-card__num {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  /* グリッドを 1 列に */
  .pain-solution__grid,
  .trust-mega__stats,
  .credly-dashboard__grid,
  .how-to-start__steps {
    grid-template-columns: 1fr !important;
  }
}

/* 1920px+: 4K・大型モニタ最適化 */
@media (min-width: 1920px) {
  :root {
    font-size: 17px;
  }
  .container {
    max-width: 1500px;
  }
}

/* タッチデバイス: hover エフェクトを抑制し誤発火防止 */
@media (hover: none) and (pointer: coarse) {
  .auth-cap-row:hover,
  .credly-badge-card:hover,
  .trust-stat:hover,
  .step-card:hover,
  .pain-card:hover {
    transform: none;
  }
  /* タッチ時はアクティブで視覚フィードバック */
  .auth-cap-row:active,
  .credly-badge-card:active,
  .trust-stat:active {
    transform: scale(0.99);
  }
}

/* 横向きモバイル (landscape) 対応: 高さが狭い時のヒーロ調整 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto;
    padding-top: clamp(2rem, 5vh, 4rem);
    padding-bottom: clamp(2rem, 5vh, 4rem);
  }
}

/* prefers-reduced-data 対応 — モバイル回線で重い装飾を抑制 */
@media (prefers-reduced-data: reduce) {
  .trust-mega,
  .authority-matrix,
  .credly-dashboard {
    background-image: none;
  }
  /* グラデーションを単色に置換 */
  .btn-primary, .btn-trust--primary {
    background: #2E4034;
  }
}

/* 印刷時の最適化 */
@media print {
  .page-nav,
  .header,
  .sticky-cta-mobile,
  .trust-banner {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
}

/* ==========================================================================
   ★★★★★ LINE Dynamic CTA (Antigravity 風サクセス画面ライク) 2026-05-29 NEW
   - Aurora グラデーション流動
   - パルス halo / shimmer sweep / 浮遊オーブ
   - LINE ブランドカラー #06C755 を基調にしつつ動的に
   ========================================================================== */
.line-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: #047a39;
  background-size: 100% 100%;
  box-shadow: var(--elev-2);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}

/* Aurora グラデーション流動 (背景色のシフト) */
@keyframes line-cta-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 静かなパルス halo (CTA を取り囲む光輪) */
.line-cta::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(6, 199, 85, 0.55) 0%, transparent 70%);
  filter: blur(8px);
  z-index: -2;
  animation: line-cta-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes line-cta-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.06); }
}

/* shimmer sweep (光の帯が左から右へ流れる) */
.line-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 20%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.0) 80%,
    transparent 100%
  );
  transform: skewX(-25deg);
  z-index: 1;
  pointer-events: none;
}

@keyframes line-cta-shimmer {
  0%, 60% { left: -120%; }
  100% { left: 220%; }
}

/* SVG アイコンも微妙に脈動 */
.line-cta svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  animation: line-cta-icon-bob 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes line-cta-icon-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.5px) scale(1.05); }
}

/* テキストもインデックス層を上に */
.line-cta > span,
.line-cta::first-letter {
  position: relative;
  z-index: 2;
}

/* 浮遊オーブ (CTA 周辺に浮かぶ小さな光点) — 装飾用の擬似要素は使えないので JS-less で代替: box-shadow を使った点群表現 */
.line-cta {
  /* 周囲に小さな光点を散らす */
}

/* ホバー: 全体の活性度向上 */
.line-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--elev-2);
  animation-duration: 3s, 1.8s; /* ホバー時は流動と halo を高速化 */
}

.line-cta:hover::before {
  animation-duration: 1.6s;
  opacity: 1;
}

.line-cta:hover::after {
  animation-duration: 1.8s;
}

/* アクティブ (タップ時) */
.line-cta:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: var(--elev-2);
}

/* フォーカス: アクセシビリティ */
.line-cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* 軌道 (Orbital) パーティクル — wrapper を使って浮遊光点を描画 */
.line-cta-wrap {
  position: relative;
  display: inline-block;
}
.line-cta-wrap::before,
.line-cta-wrap::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(6, 199, 85, 0.9);
  box-shadow: var(--elev-2);
  pointer-events: none;
  opacity: 0.85;
}
.line-cta-wrap::before {
  top: -8px;
  left: 20%;
}
.line-cta-wrap::after {
  bottom: -8px;
  right: 25%;
}

@keyframes line-orbit-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  25% { transform: translate(8px, 4px) scale(1.3); opacity: 1; }
  50% { transform: translate(16px, 0) scale(0.9); opacity: 0.6; }
  75% { transform: translate(8px, -4px) scale(1.2); opacity: 0.9; }
}

@keyframes line-orbit-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25% { transform: translate(-8px, -4px) scale(1.2); opacity: 0.9; }
  50% { transform: translate(-16px, 0) scale(0.85); opacity: 0.7; }
  75% { transform: translate(-8px, 4px) scale(1.15); opacity: 1; }
}

/* アクセシビリティ: モーション軽減希望ユーザー */
@media (prefers-reduced-motion: reduce) {
  .line-cta,
  .line-cta::before,
  .line-cta::after,
  .line-cta svg,
  .line-cta-wrap::before,
  .line-cta-wrap::after {
    animation: none !important;
  }
  .line-cta {
    background: #047a39;
  }
}

/* 小サイズ版 */
.line-cta--sm {
  padding: 10px 18px;
  font-size: 0.9rem;
  min-height: 44px;
}
.line-cta--sm svg { width: 18px; height: 18px; }

/* 大サイズ版 (フッター CTA など) */
.line-cta--lg {
  padding: 16px 36px;
  font-size: 1.1rem;
  min-height: 56px;
}
.line-cta--lg svg { width: 26px; height: 26px; }

/* レスポンシブ */
@media (max-width: 480px) {
  .line-cta {
    padding: 12px 22px;
    font-size: 0.92rem;
  }
}

/* ==========================================================================
   ★★★★★ 要素隠蔽防止レイヤー (CLAUDE.md Rule #0-4) 2026-05-29 NEW
   - fixed/sticky bottom 要素が他コンテンツを隠さないよう scroll-margin-bottom 強制
   - 主要セクション ID に bottom-stack 確保
   - マルチデバイス: モバイル / PC を分岐
   ========================================================================== */
#privacy-commitment,
#contact,
#top-certifications,
#services,
#how-to-start-title,
#trust-mega-title,
#capabilities-detail,
#company,
#faq,
#works,
#taidan,
#quick-answers {
  scroll-margin-bottom: calc(
    var(--bottom-stack-cta, 64px) +
    var(--bottom-stack-trust, 56px) +
    var(--bottom-safe, 0px) + 24px
  );
}

section[id]:last-of-type,
section#contact {
  margin-bottom: clamp(0px, calc(var(--bottom-stack-trust, 56px) + 8px), 80px);
}

@media (min-width: 769px) {
  #privacy-commitment,
  #contact {
    margin-bottom: calc(var(--bottom-stack-trust, 56px) + var(--bottom-safe, 0px) + 16px);
  }
}

.privacy-commitment {
  position: relative;
  z-index: 1;
  margin-block: clamp(1rem, 3vw, 2rem);
}

/* trust-banner 自動非表示時の完全制御 */
.trust-banner.trust-banner--hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   ★★★★★ ボタンアイコン視認性 (CLAUDE.md Rule #0-5) 2026-05-29 NEW
   ========================================================================== */
.btn,
.cta,
button[type="submit"] {
  min-height: 44px;
}

.btn svg,
.cta svg,
button[type="submit"] svg {
  width: clamp(16px, 1em, 24px);
  height: clamp(16px, 1em, 24px);
  flex-shrink: 0;
  vertical-align: middle;
}
/* 修正 (2026-05-30): fill:currentColor は塗り系アイコンのみに適用。
   stroke ベース (fill="none") のアウトラインアイコンを黒塗りしないよう限定 */
.btn svg[fill="currentColor"],
.cta svg[fill="currentColor"],
button[type="submit"] svg[fill="currentColor"] {
  fill: currentColor;
}
.btn svg[stroke="currentColor"],
.cta svg[stroke="currentColor"],
button[type="submit"] svg[stroke="currentColor"] {
  stroke: currentColor;
  fill: none;
}

/* ==========================================================================
   ★★★★★ タッチターゲット 44px 完全保証 (Rule #0-2 / 375px+ 端末対応) 2026-05-30
   - 8615行の要素セレクタ(詳細度0,0,1)がクラスセレクタに負ける問題を解消
   - クラス名で明示し詳細度を上げて全主要端末で 44px 保証
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .lang-picker-toggle,
  .page-nav__link,
  .auth-cap-row__verify a,
  .nav-list a,
  .footer-nav a,
  .qualification-tag {
    min-height: 44px;
    display: inline-flex;
    align-items: flex-start !important;
  }
  /* 折返した資格ピルでアイコンが中央に浮かず1行目に揃う(モバイル可読性・アイコンズレ修正) */
  .qualification-tag > svg:first-child,
  .qualification-tag > picture:first-child { margin-top: 0.12em; flex-shrink: 0; }
  /* .other-cert-tag is a column-stacked card (issuer/title/meta), not a single-line
     pill — it must NOT be forced to inline-flex/row here. Tap height is guaranteed
     in its base rule (flex-direction: column + min-height: 44px). */
}

/* ==========================================================================
   ★★★★★ 文字被り防止 (CLAUDE.md Rule #0-6) 2026-05-29 NEW
   ========================================================================== */
.btn,
.cta,
.btn-trust,
.line-cta {
  line-height: 1.4;
  word-break: break-word;
}

.btn small,
.cta small,
.btn-trust small {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2px;
  font-size: 0.78em;
  opacity: 0.88;
  line-height: 1.3;
}

.btn .btn-sub-text {
  display: block;
  font-size: 0.78em;
  opacity: 0.85;
  margin-top: 2px;
}

.btn .badge-inline,
.cta .badge-inline {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 0.72em;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ==========================================================================
   Coursera 修了証明書一覧（第三者確認用・折りたたみ）※復旧再適用
   ========================================================================== */
.cert-verify-list { margin: 2.25rem auto 0; max-width: 980px; border: 1.5px solid rgba(var(--brand-700-rgb),0.18); border-radius: 14px; background: #ffffff; box-shadow: 0 2px 12px rgba(var(--brand-700-rgb),0.05); overflow: hidden; }
.cert-verify-list__summary { cursor: pointer; list-style: none; min-height: 44px; padding: 1rem 1.25rem; font-weight: 800; font-size: clamp(0.95rem, 2.6vw, 1.08rem); line-height: 1.4; color: #14181e; display: flex; align-items: center; gap: 0.6rem; background: var(--surface-2); }
.cert-verify-list__summary::-webkit-details-marker { display: none; }
.cert-verify-list__summary svg { color: var(--icon-accent); flex-shrink: 0; }
.cert-verify-list__summary::after { content: "＋"; margin-left: auto; font-weight: 800; color: var(--icon-accent); flex-shrink: 0; }
.cert-verify-list[open] .cert-verify-list__summary::after { content: "−"; }
.cert-verify-list__body { padding: 0.25rem 1.25rem 1.5rem; }
.cert-verify-list__intro { font-size: 0.86rem; color: #4d5560; line-height: 1.8; text-align: left; max-width: 60em; margin: 0.75rem 0 0.5rem; }
.cert-verify-group__title { font-size: 0.92rem; font-weight: 800; color: #2E4034; margin: 1.6rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid rgba(var(--brand-700-rgb),0.12); }
.cert-verify-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.7rem; }
.cert-verify-item { border: 1px solid rgba(var(--brand-700-rgb),0.12); border-radius: 10px; padding: 0.9rem 1rem; background: #fcfdff; }
.cert-verify-item__name { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.95rem; font-weight: 700; color: #14181e; line-height: 1.45; word-break: break-word; }
.cert-verify-item__name::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin-top: -0.15rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 8px;
  background-color: #f1f4f8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E4034' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v10H7zM15 3v4h4M10 11h6M10 14h4'/%3E%3Ccircle cx='7' cy='18' r='3'/%3E%3Cpath d='m5.8 20-.5 2L7 21l1.7 1-.5-2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 19px 19px;
}
.cert-verify-item--institution[data-issuer-logo] .cert-verify-item__name::before {
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cert-verify-item--institution[data-issuer-logo="deeplearning-ai"] .cert-verify-item__name::before {
  background-image: url("assets/issuers/deeplearning-ai.jpg");
  background-image: image-set(url("assets/issuers/deeplearning-ai-32w.webp") 1x, url("assets/issuers/deeplearning-ai-64w.webp") 2x);
}
.cert-verify-item--institution[data-issuer-logo="erasmus-university-rotterdam"] .cert-verify-item__name::before {
  background-image: url("assets/issuers/erasmus-university-rotterdam.jpg");
  background-image: image-set(url("assets/issuers/erasmus-university-rotterdam-32w.webp") 1x, url("assets/issuers/erasmus-university-rotterdam-64w.webp") 2x);
}
.cert-verify-item--institution[data-issuer-logo="university-of-virginia"] .cert-verify-item__name::before {
  background-image: url("assets/issuers/university-of-virginia.jpg");
  background-image: image-set(url("assets/issuers/university-of-virginia-32w.webp") 1x, url("assets/issuers/university-of-virginia-64w.webp") 2x);
}
.cert-verify-item--institution[data-issuer-logo="lund-university"] .cert-verify-item__name::before {
  background-image: url("assets/issuers/lund-university.jpg");
  background-image: image-set(url("assets/issuers/lund-university-32w.webp") 1x, url("assets/issuers/lund-university-64w.webp") 2x);
}
.cert-verify-item__meta { display: block; font-size: 0.76rem; color: #5e6878; margin-top: 0.25rem; }
.cert-verify-item__meta--institution { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.35rem; }
.cert-verify-item__issuer-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; max-width: 100%; min-height: 44px; margin-block: -0.35rem; color: #2E4034; font-weight: 700; text-decoration: none; border-radius: 8px; }
.cert-verify-item__issuer-official { padding: 0.12rem 0.35rem; color: #35516f; background: rgba(67,99,140,0.09); border-radius: 999px; font-size: 0.66rem; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.cert-verify-item__date { flex-basis: 100%; white-space: nowrap; }
.cert-verify-item__issuer-link:hover { text-decoration: underline; }
.cert-verify-item__issuer-link:focus-visible { outline: 2.5px solid var(--color-primary-light); outline-offset: 3px; }
.cert-verify-item__credential-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; margin-top: 0.45rem; color: #5e6878; font-size: 0.74rem; line-height: 1.5; }
.cert-verify-item__credential-id-label { font-weight: 700; }
.cert-verify-item__credential-id code { max-width: 100%; padding: 0.12rem 0.4rem; color: #25384d; background: rgba(67,99,140,0.08); border: 1px solid rgba(67,99,140,0.13); border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.95em; font-weight: 700; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.cert-verify-item__desc { font-size: 0.82rem; color: #4d5560; line-height: 1.75; text-align: left; margin: 0.55rem 0 0.65rem; }
.cert-verify-item__link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-size: 0.82rem; font-weight: 700; color: #2E4034; word-break: normal; overflow-wrap: anywhere; line-height: 1.5; }
.cert-verify-item__link svg { color: var(--icon-accent); flex-shrink: 0; }
.cert-verify-item__link:hover { text-decoration: underline; }
@media (hover: none) and (pointer: coarse) { .cert-verify-item__link, .cert-verify-item__issuer-link { -webkit-tap-highlight-color: transparent; } }

/* ===== 認定: Credly+その他資格の集約折りたたみ ※復旧再適用 ===== */
.cert-collapse { max-width: 980px; margin: 1.75rem auto 0; }
.cert-collapse > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.25rem; font-weight: 800; line-height: 1.4; font-size: clamp(0.88rem, 2.3vw, 1.02rem); color: #2E4034; background: var(--surface-2); border: 1.5px solid rgba(var(--brand-700-rgb), 0.18); border-radius: 12px; }
.cert-collapse > summary::-webkit-details-marker { display: none; }
.cert-collapse > summary svg { color: var(--icon-accent); flex-shrink: 0; }
.cert-collapse > summary::after { content: "＋"; font-weight: 800; color: var(--icon-accent); flex-shrink: 0; }
.cert-collapse[open] > summary::after { content: "−"; }
.cert-collapse[open] > summary { margin-bottom: 1.25rem; }

/* ===== 実績: 指標カウントアップ + 仕事内容カード + 進め方フロー ※復旧再適用 ===== */
.proof-lead { max-width: 48em; margin: 0 auto 2.25rem; text-align: left; font-size: clamp(0.92rem, 2.2vw, 1.04rem); line-height: 1.9; color: #363c45; }
.proof-lead strong { color: #14181e; font-weight: 800; }
.proof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); max-width: 980px; margin: 0 auto 1rem; }
.proof-stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; background: var(--surface-2); border: 1.5px solid rgba(var(--brand-700-rgb), 0.14); border-radius: 14px; box-shadow: 0 2px 10px rgba(var(--brand-700-rgb), 0.05); }
.proof-stat__icon { width: clamp(28px, 7vw, 34px); height: auto; color: var(--icon-accent); margin-bottom: 0.55rem; }
.proof-stat__num { display: block; font-size: clamp(2rem, 6vw, 2.85rem); font-weight: 900; line-height: 1.08; color: var(--icon-accent); letter-spacing: -0.02em; }
.proof-stat__label { display: block; margin-top: 0.45rem; font-size: clamp(0.74rem, 1.8vw, 0.82rem); color: #4d5560; line-height: 1.5; }
.proof-subtitle { text-align: center; font-size: clamp(1.02rem, 2.6vw, 1.22rem); font-weight: 800; color: #14181e; margin: 2.6rem 0 1.2rem; }
.proof-subtitle small { display: block; margin-top: 0.35rem; font-size: 0.68em; font-weight: 600; color: #5e6878; }
.proof-works { max-width: 1040px; margin: 0 auto 0.5rem; }
.proof-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(0.85rem, 2vw, 1.25rem); }
.proof-work { display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1.3rem, 3vw, 1.7rem); background: #ffffff; border: 1.5px solid rgba(var(--brand-700-rgb), 0.12); border-radius: 16px; box-shadow: 0 2px 12px rgba(var(--brand-700-rgb), 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.proof-work:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--brand-700-rgb), 0.12); }
.proof-work__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--brand-700-rgb), 0.10), rgba(var(--brand-700-rgb), 0.03)); color: var(--icon-accent); flex-shrink: 0; }
.proof-work__icon::before { content: ""; position: absolute; inset: -6px; border: 1.4px dashed rgba(var(--brand-700-rgb), 0.25); border-radius: 50%; animation: proofSpin 18s linear infinite; }
.proof-work__icon svg { width: 28px; height: 28px; }
.proof-work__title { font-size: clamp(1.02rem, 2.6vw, 1.16rem); font-weight: 800; color: #14181e; line-height: 1.4; }
.proof-work__desc { font-size: clamp(0.85rem, 1.9vw, 0.92rem); color: #4d5560; line-height: 1.85; text-align: left; }
.proof-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.6rem, 2vw, 1.5rem); max-width: 1040px; margin: 0 auto 0.5rem; }
.proof-flow__step { flex: 1 1 200px; max-width: 240px; min-width: 180px; text-align: center; padding: 0.5rem; }
.proof-flow__shape { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; color: var(--icon-accent); margin-bottom: 0.85rem; }
.proof-flow__ring, .proof-flow__hex { position: absolute; inset: 0; width: 100%; height: 100%; }
.proof-flow__ring { transform-origin: 50% 50%; }
.proof-flow__num { position: relative; font-size: 1.3rem; font-weight: 900; color: var(--icon-accent); }
.proof-flow__label { display: block; font-size: clamp(0.94rem, 2.3vw, 1.06rem); font-weight: 800; color: #14181e; line-height: 1.45; }
.proof-flow__sub { display: block; margin-top: 0.45rem; font-size: clamp(0.78rem, 1.7vw, 0.85rem); color: #4d5560; line-height: 1.75; text-align: left; }
@keyframes proofSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .proof-flow__ring, .proof-work__icon::before { animation: none; } }
@media (max-width: 600px) { .proof-flow { gap: 1.4rem; } .proof-flow__step { max-width: 340px; } }
@media (max-width: 480px) { .proof-stats { grid-template-columns: repeat(2, 1fr); } .proof-stat { padding: 1.2rem 0.65rem; } }


/* ============================================================
   サイト運営に関するご案内 (notice.php)
   ============================================================ */
.notice-page {
  position: relative;
  min-height: 68vh;
  padding: calc(var(--header-height) + var(--notice-height, 0px) + clamp(1.5rem, 5vw, 3rem)) clamp(1.1rem, 5vw, 2rem) clamp(4rem, 10vw, 7rem);
  background:
    radial-gradient(ellipse 80% 52% at 50% -8%, rgba(var(--brand-700-rgb), 0.10), transparent 62%),
    var(--color-bg, #ffffff);
  overflow-x: hidden;
  overflow-x: clip;
}
.notice-page__container {
  max-width: 46rem;
  margin: 0 auto;
}
.notice-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.6vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-primary, #2E4034);
  padding: 0.42rem 0.9rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--brand-700-rgb), 0.05);
  line-height: 1.3;
}
.notice-page__eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.notice-page__title {
  margin: clamp(1.1rem, 3vw, 1.6rem) 0 0;
  font-size: clamp(1.55rem, 5.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__subtitle {
  margin: 0 0 1.1rem;
  font-size: clamp(1.12rem, 3vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__lead {
  margin: clamp(1rem, 2.5vw, 1.4rem) 0 0;
  max-width: 40em;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  line-height: 1.9;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__lead strong { color: var(--color-primary, #2E4034); font-weight: 700; }
.notice-page__scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.notice-page__scope-item {
  display: grid;
  align-content: start;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: 12px;
  background: rgba(var(--brand-700-rgb), 0.035);
}
.notice-page__scope-item > span {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary, #2E4034);
}
.notice-page__scope-item strong {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--color-text, #20242b);
}
.notice-page__scope-item small {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #525b67);
}
.notice-page__card {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--color-bg-card, #ffffff);
  border: 1px solid var(--color-border, rgba(var(--brand-700-rgb), 0.12));
  border-radius: var(--radius-xl);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: 0 10px 40px -16px rgba(var(--brand-700-rgb), 0.22);
}
.notice-page__body > p {
  margin: 0 0 1.1rem;
  font-size: clamp(0.95rem, 2vw, 1.02rem);
  line-height: 1.95;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__body > p:last-child { margin-bottom: 0; }
.notice-page__body strong { color: var(--color-primary, #2E4034); font-weight: 700; }
.notice-page__body ul {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0.5rem 1.2rem;
  background: rgba(var(--brand-700-rgb), 0.04);
  border-left: 3px solid var(--color-primary, #2E4034);
  border-radius: 0 12px 12px 0;
}
.notice-page__body li {
  padding: 0.55rem 0;
  font-size: clamp(0.9rem, 1.9vw, 0.98rem);
  line-height: 1.7;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__body li + li { border-top: 1px dashed rgba(var(--brand-700-rgb), 0.16); }
.notice-page__phase-title {
  margin: clamp(1.2rem, 3vw, 1.6rem) 0 0.65rem;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.5;
  color: var(--color-primary, #2E4034);
  text-align: left;
}
.notice-page__phase-title--after {
  margin-top: clamp(1.6rem, 4vw, 2.1rem);
  padding-top: clamp(1.2rem, 3vw, 1.6rem);
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.2);
}
.notice-page__body .notice-page__after-handover {
  background: var(--surface-1, #f5f6f4);
  border-left-color: var(--color-text-secondary, #525b67);
}
.notice-page__body a {
  color: var(--brand-700);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.notice-page__note {
  padding: 0.9rem 1rem;
  background: rgba(var(--brand-700-rgb), 0.055);
  border-left: 3px solid rgba(var(--brand-700-rgb), 0.52);
  border-radius: 0 10px 10px 0;
}
.notice-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  align-items: center;
}
.notice-page__table-wrap {
  max-width: 100%;
  margin: 0 0 1.2rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.notice-page__timeline {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.notice-page__timeline caption {
  margin-bottom: 0.65rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text, #20242b);
  text-align: left;
}
.notice-page__timeline th,
.notice-page__timeline td {
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  line-height: 1.65;
  text-align: left;
  vertical-align: top;
}
.notice-page__timeline th {
  background: rgba(var(--brand-700-rgb), 0.07);
  color: var(--color-primary, #2E4034);
}
.notice-page__timeline td:first-child {
  white-space: nowrap;
  font-weight: 700;
}
.notice-page__sources a {
  overflow-wrap: anywhere;
}
.notice-doc {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(67, 99, 140, 0.08), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(67, 99, 140, 0.4);
  border-radius: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 44px;
}
.notice-doc:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(var(--brand-700-rgb), 0.45);
  border-color: rgba(var(--brand-700-rgb), 0.7);
}
.notice-doc__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--color-primary, #2E4034);
  color: #ffffff;
}
.notice-doc__icon svg { width: 22px; height: 22px; }
.notice-doc__meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notice-doc__label {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.9vw, 0.98rem);
  color: var(--color-text, #20242b);
  line-height: 1.45;
}
.notice-doc__sub { font-size: 0.78rem; color: var(--color-text-secondary, #525b67); line-height: 1.45; }
.notice-doc__arrow { flex-shrink: 0; color: var(--color-accent-warm, #324E72); display: grid; place-items: center; }
.notice-doc__arrow svg { width: 20px; height: 20px; }
.notice-page__date {
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text-secondary, #525b67);
  text-align: left;
}
.notice-page__home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding: 0.72rem 1.35rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  color: #ffffff;
  background: var(--gradient-primary, var(--brand-700));
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.notice-page__home:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(var(--brand-700-rgb), 0.5); }
.notice-page__home svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 480px) {
  .notice-page__scope { grid-template-columns: 1fr; }
  .notice-doc { flex-wrap: wrap; }
  .notice-doc__meta { flex-basis: calc(100% - 60px); }
}

/* ===== Site notice at the end of the main content, before the footer ===== */
.site-notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.7rem;
  flex-wrap: wrap;
  padding:
    clamp(0.8rem, 1.5vw, 1.05rem)
    max(var(--space-lg), env(safe-area-inset-right, 0px))
    clamp(0.8rem, 1.5vw, 1.05rem)
    max(var(--space-lg), env(safe-area-inset-left, 0px));
  background: #f3f5f1;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.16);
  color: var(--brand-900);
  text-align: center;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  line-height: 1.5;
}
.site-notice-bar__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  background: rgba(var(--brand-700-rgb), 0.08);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
.site-notice-bar__tag svg { width: 13px; height: 13px; flex-shrink: 0; }
.site-notice-bar__text { color: #4d5560; }
.site-notice-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--brand-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.site-notice-bar__link svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 640px) {
  .site-notice-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 0.2rem 0.6rem;
    padding: 0.7rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
  }
  .site-notice-bar__tag {
    grid-column: 1;
    grid-row: 1;
  }
  .site-notice-bar__text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    line-height: 1.45;
  }
  .site-notice-bar__link {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    min-height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notice-doc, .notice-page__home { transition: none; }
  .notice-doc:hover, .notice-page__home:hover { transform: none; }
}


/* ===== Client Network Constellation (クライアント・案件実績) — token-driven ===== */
.client-net { position: relative; margin: 1.4rem 0 1.6rem; }
.client-net__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.client-net__link {
  fill: none;
  stroke: var(--color-primary, #2E4034);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.30;
  stroke-dasharray: 4 9;
}
@keyframes clientNetFlow { to { stroke-dashoffset: -39; } }
.client-net__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.55rem, 2vw, 1.1rem);
  align-items: stretch;
}
.client-net__node {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 0.9rem;
  background: var(--color-bg-card, #ffffff);
  border: 1px solid var(--color-border, rgba(var(--brand-700-rgb), 0.14));
  border-radius: 12px;
  font-size: clamp(0.78rem, 1.7vw, 0.92rem);
  font-weight: 600; color: var(--color-text, #20242b); line-height: 1.35;
  box-shadow: 0 4px 16px -10px rgba(var(--brand-700-rgb), 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.client-net__node:hover { transform: translateY(-2px); border-color: var(--color-primary, #2E4034); box-shadow: 0 8px 22px -10px rgba(var(--brand-700-rgb), 0.35); }
.client-net__node small { display: block; font-weight: 500; opacity: 0.72; font-size: 0.82em; margin-top: 1px; line-height: 1.3; }
.client-net__dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-primary, #2E4034);
  box-shadow: 0 0 0 4px rgba(var(--brand-700-rgb), 0.12);
  animation: clientNetPulse 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.2s);
}
@keyframes clientNetPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--brand-700-rgb), 0.10); } 50% { box-shadow: 0 0 0 6px rgba(var(--brand-700-rgb), 0.03); } }
.client-net__hub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 1rem 0.6rem; min-height: 88px;
  background: var(--gradient-primary, var(--brand-700));
  border-radius: 16px; color: #ffffff; text-align: center;
  box-shadow: 0 12px 30px -12px rgba(var(--brand-700-rgb), 0.55);
}
.client-net__hub-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.2rem); line-height: 1; letter-spacing: 0.02em; }
.client-net__hub-num small { font-size: 0.5em; font-weight: 700; margin-left: 1px; }
.client-net__hub-cap { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; opacity: 0.92; }
@media (max-width: 600px) { .client-net__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .client-net__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .client-net__link { animation: none; stroke-dasharray: none; opacity: 0.20; }
  .client-net__dot { animation: none; }
  .client-net__node { transition: none; }
}

/* ===== 行動経済学コンバージョン・スタック (#contact) — 左揃え・トークン駆動 ===== */
.cta-psych { list-style: none; margin: 0 auto clamp(1.2rem, 3vw, 1.7rem); padding: 0; max-width: 44rem; display: grid; gap: 0.55rem; }
.cta-psych__item { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.9rem; background: var(--color-bg-card, #ffffff); border: 1px solid var(--color-border, rgba(var(--brand-700-rgb), 0.14)); border-left: 3px solid var(--color-primary, #2E4034); border-radius: 10px; text-align: left; }
.cta-psych__ic { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--brand-700-rgb), 0.08); color: var(--color-primary, #2E4034); }
.cta-psych__ic svg { width: 17px; height: 17px; }
.cta-psych__txt { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.cta-psych__txt strong { color: var(--color-text, #14181e); font-weight: 700; font-size: clamp(0.9rem, 1.9vw, 1rem); line-height: 1.5; }
.cta-psych__txt small { color: var(--color-text-secondary, #525b67); font-size: 0.8rem; line-height: 1.55; }
.cta-psych__nudge { max-width: 44rem; margin: 0 auto clamp(1.3rem, 4vw, 1.9rem); text-align: left; font-size: 0.85rem; color: var(--color-text-secondary, #525b67); line-height: 1.6; }
.cta-psych__nudge strong { color: var(--color-primary, #2E4034); font-weight: 700; }

/* ===== ヒーロー 地平線イラスト（自然×テクノロジー）+ サービス・ショーケース ===== */

.svc-showcase { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.6rem, 1.8vw, 1rem); margin: clamp(1.2rem, 3vw, 2rem) auto clamp(1.6rem, 4vw, 2.4rem); max-width: 74rem; }
.svc-showcase__item { margin: 0; }
.svc-showcase__item img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--color-border, rgba(var(--brand-700-rgb), 0.14)); box-shadow: 0 6px 20px -12px rgba(var(--brand-700-rgb), 0.30); background: #ffffff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.svc-showcase__item figcaption { margin-top: 0.5rem; text-align: left; font-size: clamp(0.74rem, 1.5vw, 0.85rem); font-weight: 700; color: var(--color-text, #14181e); line-height: 1.4; }
.svc-showcase__item:hover img { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(var(--brand-700-rgb), 0.42); }
@media (max-width: 860px) { .svc-showcase { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .svc-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .svc-showcase__item img { transition: none; } .svc-showcase__item:hover img { transform: none; } }

/* ===== 写真ショーケース/ヒーロー帯（実務画像・マルチデバイス安全） ===== */
.svc-showcase__item img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ===== 認定の専門領域ギャラリー / 年表バンド（実務画像・マルチデバイス安全） ===== */
.cert-gallery__head { text-align: left; font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 800; color: var(--color-text, #14181e); margin: clamp(1.4rem, 3vw, 2.2rem) 0 0.8rem; }
.cert-gallery__head small { font-weight: 500; font-size: 0.72em; color: var(--color-text-secondary, #525b67); margin-left: 0.4rem; }
.cert-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.6vw, 1rem); margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); }
.cert-gallery__item { margin: 0; }
.cert-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; border: 1px solid var(--color-border, rgba(var(--brand-700-rgb), 0.14)); box-shadow: 0 5px 18px -12px rgba(var(--brand-700-rgb), 0.3); }
.cert-gallery__item figcaption { margin-top: 0.45rem; text-align: left; font-size: clamp(0.76rem, 1.5vw, 0.88rem); font-weight: 700; color: var(--color-text, #14181e); line-height: 1.4; }
.cert-gallery__item figcaption small { display: block; font-weight: 500; font-size: 0.82em; color: var(--color-text-secondary, #525b67); margin-top: 1px; }
@media (max-width: 900px) { .cert-gallery { grid-template-columns: repeat(3, 1fr); } }
/* 専門能力カードの活用例・根拠の折畳トグル(ページ短縮・情報はDOM保持) */
.cap-fold { margin-top: 0.6rem; }
.cap-fold > summary.cap-fold__summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: #43638c; padding: 0.3rem 0; min-height: 44px; }
.cap-fold > summary.cap-fold__summary::-webkit-details-marker { display: none; }
.cap-fold > summary.cap-fold__summary::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.cap-fold[open] > summary.cap-fold__summary::before { transform: rotate(45deg); }


/* #company 資格詳細テーブルの折畳トグル */
.qual-fold { margin-top: 0.6rem; }
.qual-fold > summary.qual-detail-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: #43638c; padding: 0.6rem 1rem; min-height: 44px; border: 1px solid rgba(67,99,140,0.3); border-radius: 0.625rem; background: #f4f7fb; }
.qual-fold > summary.qual-detail-summary::-webkit-details-marker { display: none; }
.qual-fold > summary.qual-detail-summary svg { flex-shrink: 0; }


/* ===== Designer eyebrow: flat typographic + 左spine motif（脱グラデピル・署名ディテール） ===== */
.muramura-statement__eyebrow,
.pain-solution__eyebrow,
.privacy-commitment__eyebrow,
.top-certifications__eyebrow,
.credly-dashboard__eyebrow,
.services-eyebrow,
.trust-mega__eyebrow,
.how-to-start__eyebrow,
.authority-matrix__eyebrow,
.notice-page__eyebrow,
.search-era__eyebrow,
.benefits-eyebrow,
.company-section__eyebrow,
.capabilities-detail__badge,
.capabilities-section__badge {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: none !important; box-shadow: none !important; border: 0 !important;
  padding: 0 !important; border-radius: 0 !important;
  color: var(--brand-700); font-family: var(--font-display); font-weight: 700;
  font-size: var(--font-size-sm); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; line-height: 1.4; margin-bottom: var(--space-md);
}
.muramura-statement__eyebrow::before,
.pain-solution__eyebrow::before,
.privacy-commitment__eyebrow::before,
.top-certifications__eyebrow::before,
.credly-dashboard__eyebrow::before,
.services-eyebrow::before,
.trust-mega__eyebrow::before,
.how-to-start__eyebrow::before,
.authority-matrix__eyebrow::before,
.notice-page__eyebrow::before,
.search-era__eyebrow::before,
.benefits-eyebrow::before,
.company-section__eyebrow::before,
.capabilities-detail__badge::before,
.capabilities-section__badge::before {
  content: ""; width: 2rem; height: 2px; background: var(--brand-700); flex-shrink: 0;
}
:lang(ja) .muramura-statement__eyebrow,
:lang(ja) .pain-solution__eyebrow,
:lang(ja) .privacy-commitment__eyebrow,
:lang(ja) .top-certifications__eyebrow,
:lang(ja) .credly-dashboard__eyebrow,
:lang(ja) .services-eyebrow,
:lang(ja) .trust-mega__eyebrow,
:lang(ja) .how-to-start__eyebrow,
:lang(ja) .authority-matrix__eyebrow,
:lang(ja) .notice-page__eyebrow,
:lang(ja) .search-era__eyebrow,
:lang(ja) .benefits-eyebrow,
:lang(ja) .company-section__eyebrow,
:lang(ja) .capabilities-detail__badge,
:lang(ja) .capabilities-section__badge { letter-spacing: 0.04em; }


/* ===== ヒーロー: 摩擦除去コールアウト + 対応エリア/形式バッジ（旧: 未スタイルで視認性不良 → フラット化） ===== */
.hero-trust-callout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.1rem;
  max-width: 40em;
  margin: var(--space-md) auto 0;
  padding: 0;
  line-height: 1.5;
}
.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-700);          /* #2E4034 on hero bg = 10.7:1 (AA) */
  white-space: nowrap;
  line-height: 1.4;
}
.hero-trust-item svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: var(--brand-600);
  stroke: currentColor;
}
.hero-area-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 40em;
  margin: var(--space-sm) auto 0;
  padding: 0;
}
.hero-area-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.35rem 0.9rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.3;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.hero-area-badge--onsite {
  background: var(--brand-50);       /* sage */
  color: var(--brand-700);           /* 9.8:1 (AA) */
  border: 1px solid rgba(46, 64, 52, 0.22);
}
.hero-area-badge--remote {
  background: var(--accent-50);      /* light blue */
  color: var(--accent-deep);         /* #324E72 ≈ 8:1 (AA) */
  border: 1px solid rgba(67, 99, 140, 0.3);
}
.hero-area-badge--free {
  background: var(--brand-700);      /* solid green — the strongest (free 60min) */
  color: #ffffff;                    /* 11:1 (AA) */
  border: 1px solid var(--brand-700);
}
@media (max-width: 374px) {
  .hero-trust-item, .hero-area-badge { font-size: var(--font-size-xs); }
  .hero-area-badge--free { white-space: normal; }
}

/* ==========================================================================
   Designer polish layer (2026-07-01) — WCAG AA contrast-safe
   ========================================================================== */
:root {
  --color-bg: #f7f3ec;
  --color-bg-secondary: #ebe5da;
  --color-bg-card: #fffefb;
  --color-bg-card-hover: #f3eee5;
  --surface-2: #f0eadf;
  --color-text: #14181e;
  --color-text-secondary: #3f4854;
  --color-text-muted: #525b67;
  --accent: #324E72;
  --accent-deep: #253f5b;
  --accent-50: #e9eef4;
  --accent-warm: #8f3d23;
  --designer-hairline: rgba(var(--brand-700-rgb), 0.16);
  --designer-shadow: 0 1px 1px rgba(var(--brand-700-rgb), 0.04), 0 18px 46px -30px rgba(var(--brand-700-rgb), 0.42);
  --designer-shadow-hover: 0 2px 3px rgba(var(--brand-700-rgb), 0.06), 0 24px 56px -28px rgba(var(--brand-700-rgb), 0.5);
}

body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(90deg, rgba(var(--brand-700-rgb), 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--brand-700-rgb), 0.018) 1px, transparent 1px),
    linear-gradient(180deg, #fbf8f2 0%, var(--color-bg) 42%, #f3eee5 100%);
  background-size: 40px 40px, 40px 40px, auto;
}

::selection {
  background: rgba(var(--brand-700-rgb), 0.18);
  color: var(--color-text);
}

.header {
  background: rgba(255, 254, 251, 0.9);
  border-bottom: 1px solid var(--designer-hairline);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 14px 34px -30px rgba(var(--brand-700-rgb), 0.36);
}

.header.scrolled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 16px 40px -28px rgba(var(--brand-700-rgb), 0.44);
}

.nav-list a {
  color: var(--color-text-secondary);
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--brand-700);
}

.nav-cta,
.btn-primary,
.btn-trust--primary,
.pain-card__cta,
.notice-page__home,
.cookie-accept {
  background: linear-gradient(135deg, #1f2e26 0%, #2e4034 58%, #253f5b 100%);
  color: #ffffff;
  box-shadow: 0 10px 26px -16px rgba(var(--brand-700-rgb), 0.7);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-trust--primary:hover,
.btn-trust--primary:focus-visible,
.pain-card__cta:hover,
.pain-card__cta:focus-visible {
  color: #ffffff;
  box-shadow: 0 16px 36px -18px rgba(var(--brand-700-rgb), 0.78);
}

.line-cta {
  background: #047a39;
  color: #ffffff;
}

.line-cta:hover,
.line-cta:focus-visible {
  background: linear-gradient(135deg, #034f26 0%, #066c35 100%);
  color: #ffffff;
}

.page-nav {
  background: rgba(255, 254, 251, 0.88);
  border-bottom: 1px solid var(--designer-hairline);
  box-shadow: 0 8px 26px -24px rgba(var(--brand-700-rgb), 0.55);
}

.page-nav__list {
  max-width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}

.page-nav__link {
  border-radius: 10px;
  color: var(--color-text-secondary);
}

.page-nav__link:hover,
.page-nav__link:focus-visible,
.page-nav__link.is-active {
  background: rgba(var(--brand-700-rgb), 0.08);
  color: var(--brand-700);
}

.page-nav__link--cta {
  background: var(--brand-700);
  color: #ffffff;
}

.page-nav__link--cta:hover,
.page-nav__link--cta:focus-visible {
  background: #1f2e26;
  color: #ffffff;
}

.hero {
  align-items: flex-start;
  padding-top: calc(var(--header-height) + var(--notice-height, 0px) + clamp(3rem, 7vw, 6rem));
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.96) 0%, rgba(247, 243, 236, 0.86) 64%, rgba(247, 243, 236, 0.96) 100%),
    linear-gradient(125deg, rgba(143, 61, 35, 0.08) 0%, transparent 32%),
    linear-gradient(305deg, rgba(50, 78, 114, 0.08) 0%, transparent 36%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--brand-700-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--brand-700-rgb), 0.04) 1px, transparent 1px);
  background-size: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 96px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%);
}

.hero-bg {
  opacity: 0.64;
}

.ai-orb {
  opacity: 0.36;
  filter: saturate(0.65);
}


.hero-content {
  max-width: min(1120px, 100%);
  text-align: left;
}

.hero-badge,
.industry-tag,
.hero-area-badge,
.trust-cert,
.qualification-tag,
.service-card__certs li,
.pain-solution__trust-badge,
.capabilities-trust-badge {
  border-radius: 10px;
}

.hero-badge {
  background: rgba(255, 254, 251, 0.76);
  border-color: rgba(var(--brand-700-rgb), 0.26);
  box-shadow: 0 12px 34px -28px rgba(var(--brand-700-rgb), 0.45);
}

.hero-title {
  max-width: 12ch;
  margin-inline: 0;
  letter-spacing: 0;
  line-height: 0.98;
  font-size: clamp(3rem, 8vw, 6.8rem);
  background: linear-gradient(132deg, #14181e 0%, #1f2e26 48%, #324e72 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-subtitle {
  color: var(--accent-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-desc,
.section-desc,
.trust-mega__lead,
.authority-matrix__lead,
.how-to-start__lead,
.top-certifications__lead,
.pain-solution__lead {
  color: var(--color-text-secondary);
}

.hero-desc,
.hero-creds,
.hero-creds__footer {
  margin-left: 0;
  margin-right: auto;
}

.hero-stats {
  justify-content: flex-start;
  gap: clamp(0.65rem, 2vw, 1.5rem);
  margin-bottom: var(--space-lg);
}

.stat {
  min-width: clamp(92px, 13vw, 150px);
  padding: 0.7rem 0.9rem;
  background: rgba(255, 254, 251, 0.74);
  border: 1px solid rgba(var(--brand-700-rgb), 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px -20px rgba(var(--brand-700-rgb), 0.38);
}

.stat-value {
  color: var(--brand-700);
}

.hero-creds__label,
.hero-creds__footer {
  text-align: left;
}

.hero-creds__grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 18vw, 170px), 1fr));
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

.hero-cred__link {
  padding: clamp(0.75rem, 1.8vw, 1rem);
  border-radius: 12px;
  background: rgba(255, 254, 251, 0.84);
  border-color: rgba(var(--brand-700-rgb), 0.14);
  box-shadow: 0 8px 24px -24px rgba(var(--brand-700-rgb), 0.4);
}

.hero-cred__link:hover,
.hero-cred__link:focus-visible {
  box-shadow: var(--designer-shadow-hover);
}

.hero-cred__mark {
  width: clamp(48px, 8vw, 68px);
  height: clamp(48px, 8vw, 68px);
}

.hero-creds__footer {
  background: rgba(255, 254, 251, 0.84);
  border-color: rgba(var(--brand-700-rgb), 0.14);
  box-shadow: var(--designer-shadow);
}

.hero-creds__links,
.hero-cta,
.hero-trust-callout,
.hero-area-badges {
  justify-content: flex-start;
}


.quick-answers {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4.25rem) 0;
  background:
    linear-gradient(180deg, #fffefb 0%, #f6f1e8 100%);
  border-block: 1px solid rgba(var(--brand-700-rgb), 0.1);
}

.quick-answers__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 auto 0.65rem;
  max-width: 760px;
  color: var(--color-text);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

.quick-answers__title svg {
  flex-shrink: 0;
  color: var(--brand-700);
}

.quick-answers__lead {
  max-width: 42em;
  margin: 0 auto clamp(1.35rem, 3vw, 2rem);
  color: var(--color-text-secondary);
  line-height: 1.8;
  text-align: left;
}

.quick-answers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.75rem, 2vw, 1rem);
}

.quick-answer {
  background: rgba(255, 254, 251, 0.94);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 12px;
  box-shadow: var(--designer-shadow);
  overflow: clip;
}

.quick-answer summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0.95rem 3rem 0.95rem 1rem;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 800;
  line-height: 1.55;
  list-style: none;
}

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

.quick-answer summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--brand-700-rgb), 0.22);
  border-radius: 8px;
  color: var(--brand-700);
  transform: translateY(-50%);
}

.quick-answer[open] summary::after {
  content: "-";
  background: var(--brand-700);
  color: #ffffff;
}

.quick-answer__body {
  padding: 0 1rem 1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.quick-answer__body p {
  margin: 0 0 0.8rem;
}

.quick-answer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--brand-700);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.quick-answer__link:hover,
.quick-answer__link:focus-visible {
  color: var(--accent-deep);
}

.trust-mega,
.top-certifications,
.how-to-start,
.authority-matrix,
.capabilities-detail,
.works-section,
.contact-section {
  border-block-color: rgba(var(--brand-700-rgb), 0.1);
}

.trust-mega,
.top-certifications,
.how-to-start {
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.98) 0%, rgba(246, 241, 232, 0.92) 100%);
}

.pain-solution,
.authority-matrix,
.capabilities-detail {
  background:
    linear-gradient(180deg, #f0eadf 0%, #ebe5da 100%);
}

.feature-card,
.service-card,
.work-card,
.partner-card,
.company-philosophy,
.profile-content,
.capability-card,
.mission-card,
.timeline,
.pain-card,
.trust-stat,
.step-card,
.top-cert-card,
.credly-badge-card,
.auth-cap-row,
.proof-work,
.portfolio-section,
.contact-channels {
  border-color: rgba(var(--brand-700-rgb), 0.14);
  box-shadow: var(--designer-shadow);
}

.feature-card:hover,
.service-card:hover,
.work-card:hover,
.partner-card:hover,
.capability-card:hover,
.pain-card:hover,
.trust-stat:hover,
.step-card:hover,
.top-cert-card:hover,
.credly-badge-card:hover,
.auth-cap-row:hover,
.proof-work:hover {
  border-color: rgba(var(--brand-700-rgb), 0.32);
  box-shadow: var(--designer-shadow-hover);
}

.contact-section {
  background:
    linear-gradient(135deg, rgba(255, 254, 251, 0.98) 0%, rgba(235, 229, 218, 0.94) 58%, rgba(233, 238, 244, 0.95) 100%);
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
  background: #fffefb;
  border-color: rgba(var(--brand-700-rgb), 0.24);
  border-radius: 10px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(var(--brand-700-rgb), 0.18);
}

.footer {
  background:
    linear-gradient(180deg, #ebe5da 0%, #dfe6df 100%);
}

@media (max-width: 768px) {
  .hero-content,
  .hero-creds__label,
  .hero-creds__footer {
    text-align: left;
  }

  .hero-title {
    font-size: clamp(2.65rem, 13vw, 4.3rem);
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .stat {
    min-width: 0;
    padding: 0.65rem 0.4rem;
  }

  .stat-label {
    font-size: clamp(0.66rem, 2.5vw, 0.76rem);
  }

  .hero-creds__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-cta,
  .hero-trust-callout,
  .hero-area-badges,
  .hero-creds__links {
    justify-content: stretch;
  }

  .hero-cta .btn,
  .line-cta-wrap,
  .line-cta,
  .hero-creds__link,
  .hero-area-badge {
    width: 100%;
    justify-content: center;
  }

  .quick-answers__title,
  .quick-answers__lead {
    text-align: left;
    justify-content: flex-start;
  }
}

@media (max-width: 374px) {
  .hero-stats {
    grid-template-columns: 1fr;
  }

  .hero-creds__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-text-secondary: #20242b;
    --color-text-muted: #363c45;
    --color-bg: #ffffff;
    --color-bg-card: #ffffff;
    --color-border: rgba(0, 0, 0, 0.34);
  }

  body {
    background-image: none;
  }

  .btn-primary,
  .btn-trust--primary,
  .pain-card__cta,
  .line-cta {
    background: #000000;
    color: #ffffff;
  }

  a {
    text-decoration-thickness: 2px;
  }
}

.page-nav + .hero {
  padding-top: clamp(2.25rem, 5vw, 4.75rem);
}

@media (max-width: 768px) {
  .page-nav + .hero {
    padding-top: clamp(1.35rem, 5vw, 2.4rem);
  }
}

@media (max-width: 479px) {
  .hero-desc {
    max-width: calc(100% - 4rem);
    margin-left: 0;
    margin-right: auto;
  }
}


/* ============================================================
   ELEVATION — "Quiet editorial authority"（最高峰デザイナー品質・AA維持 / Rule #0-16）
   ============================================================ */

/* 1) 資格ラベルの🎓を一貫SVG(認定シール)アイコンへ（::before・全73を1ルールで統治） */
.pain-card__service-meta::before,
.pain-card__cert::before {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.38em;
  vertical-align: -0.14em;
  background-color: var(--verify);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 2) ヒーロー数値 — Space Grotesk + 等幅数字（最高レバレッジ：揃った数字＝設計された印象） */
.stat-value,
.stat-num,
.trust-stat__num,
.credly-dashboard__count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--tracking-num);
}
.stat-value small,
.trust-stat__num small { font-family: var(--font-sans); font-variant-numeric: normal; }

/* 3) ヒーロー英字タイトルに display 書体（Space Grotesk）。署名グラデは維持 */
.hero-title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* 4) セクション見出しの統一 — 凡庸な全800を排し 600基調＋強調語700ブランド緑（階層=ウェイト極性） */
.section-title,
.pain-solution__title,
.trust-mega__title,
.top-certifications__title,
.how-to-start__title,
.quick-answers__title,
.authority-matrix__title,
.search-era__title,
.capabilities-assurance__title,
.hybrid-approach__title,
.privacy-commitment__title,
.portfolio-section__title,
.benefits-section__title,
.works-section__title,
.company-section__title {
  font-weight: var(--weight-head);
  letter-spacing: var(--tracking-jp-head);
  color: var(--color-text);
  text-wrap: balance;
  font-feature-settings: "palt" 1;
}
[class*="__title"] strong,
.section-title strong {
  font-weight: var(--weight-head-strong);
  color: var(--brand-700);
  -webkit-text-fill-color: currentColor;
}

/* 5) eyebrow — ピル撤廃→ヘアライン・キッカー（和文は字間控えめ・大文字化しない） */
.pain-solution__eyebrow,
.trust-mega__eyebrow,
.top-certifications__eyebrow,
.how-to-start__eyebrow,
.authority-matrix__eyebrow,
.search-era__eyebrow,
.quick-answers__eyebrow,
.privacy-commitment__eyebrow,
.benefits-eyebrow,
.services-eyebrow,
.company-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--brand-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-head);
  letter-spacing: 0.08em;
  text-transform: none;
  margin-bottom: var(--space-sm);
}
.pain-solution__eyebrow::before,
.trust-mega__eyebrow::before,
.top-certifications__eyebrow::before,
.how-to-start__eyebrow::before,
.authority-matrix__eyebrow::before,
.search-era__eyebrow::before,
.quick-answers__eyebrow::before,
.privacy-commitment__eyebrow::before,
.benefits-eyebrow::before,
.services-eyebrow::before,
.company-section__eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--brand-700);
  flex-shrink: 0;
}

/* 6) 日本語プロースは左揃え（複数行の説明/リード）— Rule #0-12 */
.section-desc,
[class*="__lead"],
[class*="__intro"],
.contact-intro p,
.services-intro {
  text-align: left;
  max-width: var(--measure-jp-wide);
  margin-inline: auto;
  line-height: var(--leading-jp-body);
}

/* 8) btn-primary ホバー — 反転降格(glow=elev-1)を修正し正しく持ち上げる */
.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
  color: #fff;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .btn-primary:hover { transform: none; }
}

/* インライン絵文字置換用の一貫SVGアイコン */
.ico-inline { width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.4em; flex-shrink: 0; stroke: currentColor; }


/* ============================================================
   さらに上 — アートディレクション署名（≥960px のみ・モバイル不変）
   ============================================================ */

/* A) ヒーロー 60/40 — ステートメント(左) + 証拠の縦レジャー(右) */
@media (min-width: 960px) {
  .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.92fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    max-width: min(1240px, 100%);
  }
  .hero-main,
  .hero-evidence {
    position: relative;
    z-index: 1;
    min-width: 0;
  }
  .hero-main { grid-column: 1; }
  .hero-evidence {
    grid-column: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  }

  /* 証拠レジャー：3枚のカード→ブランド緑のスパインに連なる帳簿 */
  .hero-stats {
    flex-direction: column;
    gap: 0;
    margin: 0;
    border-left: 2px solid var(--brand-700);
    padding-left: clamp(1rem, 1.5vw, 1.5rem);
  }
  .hero-stats .stat {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    padding: 0.7rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    text-align: left;
    min-width: 0;
  }
  .hero-stats .stat:last-child { border-bottom: 0; }
  .hero-stats .stat-label {
    order: -1;
    min-width: 6em;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }
}


/* B) 資格カードの検証アフォーダンス: 破線テキスト→ソリッドなピルチップ（青=検証可能・主張↔証拠の1:1） */
.top-cert-card__verify {
  border-top: 0;
  margin-top: 0.6rem;
  padding: 0.32rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--verify-border);
  border-radius: var(--radius-pill);
  background: var(--verify-bg);
  color: var(--verify);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background .2s, color .2s;
}
.top-cert-card:hover .top-cert-card__verify,
.top-cert-card:focus-visible .top-cert-card__verify { background: var(--verify); color: #fff; }


/* ============================================================
   ヒーロー動的装飾 — 洗練オーロラ・メッシュ（GPU合成のみ・CLS0・reduced-motion完全停止）
   AI量産のパーティクルではなく、ブランド色がゆっくり呼吸する studio-grade ambient motion
   ============================================================ */
.hero-bg { overflow: hidden; }
@keyframes auroraA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(16%, 18%, 0) scale(1.22); } }
@keyframes auroraB { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-18%, -14%, 0) scale(1.24); } }
@keyframes auroraC { from { transform: translate3d(0,0,0) scale(0.9); opacity: 0.3; } to { transform: translate3d(-10%, 12%, 0) scale(1.18); opacity: 0.62; } }


/* ヒーロー入場の振付 — 要素が秩序立って立ち上がる（load時・LCP安全・reduced-motion停止） */
@media (prefers-reduced-motion: no-preference) {
  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-desc,
  .hero-stats,
  .hero-creds {
    animation: heroRise 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-badge    { animation-delay: 0.04s; }
  .hero-title    { animation-delay: 0.10s; }
  .hero-subtitle { animation-delay: 0.24s; }
  .hero-desc     { animation-delay: 0.34s; }
  .hero-stats    { animation-delay: 0.46s; }
  .hero-creds    { animation-delay: 0.58s; }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ============================================================
   スクロールリビール修正 — サイト全体に波及する出現アニメ
   （重大バグ修正: 従来 .is-visible にCSSが無く、capability/work/proof 等が opacity:0 で永久不可視だった）
   ============================================================ */
.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
@media (prefers-reduced-motion: reduce) {
  .is-visible { transition: none !important; }
}


/* ============================================================
   Capability Index — 3軸の「能力台帳」（ヒーロー左）。
   右カラムの「証拠台帳」(hero-stats / 認定) と対の視覚言語:
   左 border-left スパイン + hairline 罫 + 右寄せ数字。左右で1つのデザインシステム。
   方針(脱・AI生成): 引き算 / 型と余白で階層 / モーションは reveal のみ。
   中央寄せ hero-content の左カラムにアンカー(左寄り死角なし)。背面・aria-hidden・reduced-motion 静止。
   ============================================================ */

/* 継承 .ai-orb バゲージの無効化（base opacity/filter・紫グロー疑似要素を打ち消す） */
.ai-orb.axis-index { opacity: 1; filter: none; }
.ai-orb.axis-index::before,
.ai-orb.axis-index::after { content: none !important; }

/* ≥1280px: hero-content 左カラムにアンカー、垂直中心を右台帳へ整列 */
@media (min-width: 1280px) {
  .ai-orb.axis-index {
    display: flex; flex-direction: column;
    position: absolute;
    /* content-box は editorial pass で min(1180px,100%) に変更済み。それに合わせて左端へアンカー */
    left: calc(50% - min(1180px, 100%) / 2);   /* content-box 左端 */
    right: auto;
    width: calc(min(1180px, 100%) * 0.54);      /* 左カラム内・右側に意図的な余白 */
    top: 57%;
    transform: translateY(-50%);
    height: auto;                               /* 継承の固定高を打ち消し全行を表示 */
    padding-left: clamp(20px, 1.8vw, 34px);
    border-left: 2px solid var(--brand-700);    /* 署名スパイン（右 hero-stats と対称） */
    z-index: 2;
    pointer-events: none;
    contain: layout;                            /* paint 抑制を外し行のクリップを防止 */
  }
}

/* eyebrow（右「主要な認定資格」ラベルと対の小見出し） */
.ai-orb.axis-index .cap-eyebrow {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-muted); letter-spacing: 0.13em;
  margin-bottom: clamp(10px, 1.2vw, 18px);
  opacity: 0; transform: translateY(10px);
  animation: capRise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0s forwards;
}

/* 台帳行: [ 番号 | 本体(名称+代表領域) | 領域数 ] */
.ai-orb.axis-index .cap-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; column-gap: clamp(14px, 1.5vw, 24px);
  padding: clamp(15px, 1.7vw, 24px) 0;
  border-bottom: 1px solid var(--color-border);
  opacity: 0; transform: translateY(12px);
  animation: capRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.ai-orb.axis-index .cap-row:nth-of-type(1) { animation-delay: 0.10s; }
.ai-orb.axis-index .cap-row:nth-of-type(2) { animation-delay: 0.19s; }
.ai-orb.axis-index .cap-row:nth-of-type(3) { animation-delay: 0.28s; }

.ai-orb.axis-index .cap-no {
  font-family: var(--font-num); font-size: 0.74rem; font-weight: 700;
  color: var(--accent); letter-spacing: 0.06em;
}
.ai-orb.axis-index .cap-name {
  display: block; font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(1.08rem, 1.35vw, 1.4rem);
  color: var(--brand-700); line-height: 1.28; letter-spacing: 0.005em;
}
.ai-orb.axis-index .cap-essence {
  display: block; margin-top: 5px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  color: var(--color-text-muted); line-height: 1.55; letter-spacing: 0.01em;
}
.ai-orb.axis-index .cap-count { display: flex; align-items: baseline; gap: 3px; justify-self: end; }
.ai-orb.axis-index .cap-count b {
  font-family: var(--font-num); font-weight: 700;
  font-size: clamp(1.9rem, 2.5vw, 2.7rem);
  color: var(--brand-700); line-height: 0.82;
}
.ai-orb.axis-index .cap-count small {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; color: var(--color-text-muted);
}

/* 合計行（10+9+6=25 を締める） */
.ai-orb.axis-index .cap-sum {
  display: flex; align-items: baseline; gap: 7px;
  padding-top: clamp(14px, 1.5vw, 22px);
  opacity: 0; transform: translateY(12px);
  animation: capRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s forwards;
}
.ai-orb.axis-index .cap-sum__eq { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.ai-orb.axis-index .cap-sum__n {
  font-family: var(--font-num); font-weight: 700; font-size: clamp(1.5rem, 1.9vw, 2rem);
  color: var(--brand-700); line-height: 0.9;
}
.ai-orb.axis-index .cap-sum__label { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.02em; }

@keyframes capRise { to { opacity: 1; transform: translateY(0); } }

/* reduced-motion: reveal を省き即時表示（構造は無損失） */
@media (prefers-reduced-motion: reduce) {
  .ai-orb.axis-index .cap-eyebrow,
  .ai-orb.axis-index .cap-row,
  .ai-orb.axis-index .cap-sum {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ============================================================
   Professional editorial pass: less generated, more crafted
   - Keep claims/CTA/evidence intact
   - Remove abstract AI effects from the hero
   - Tighten mobile width so primary text never clips
   ============================================================ */
:root {
  --color-bg: #fbfaf6;
  --color-bg-secondary: #f4f1e9;
  --color-bg-card: #fffdfa;
  --color-bg-card-hover: #f8f5ee;
  --surface-2: #f3f1e9;
  --color-text: #11161a;
  --color-text-secondary: #39434d;
  --color-text-muted: #52606d;
  --color-border: rgba(var(--brand-700-rgb), 0.14);
  --color-border-light: rgba(var(--brand-700-rgb), 0.08);
  --designer-hairline: rgba(var(--brand-700-rgb), 0.14);
  --designer-shadow: 0 1px 1px rgba(17, 22, 26, 0.04), 0 18px 42px -34px rgba(var(--brand-700-rgb), 0.42);
  --designer-shadow-hover: 0 1px 2px rgba(17, 22, 26, 0.06), 0 24px 52px -34px rgba(var(--brand-700-rgb), 0.5);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(180deg, #fffefa 0%, #fbfaf6 48%, #f2eee5 100%);
  background-size: auto;
}

.page-nav {
  overflow: hidden;
}

.page-nav .container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-nav .container::-webkit-scrollbar {
  display: none;
}

.page-nav__list {
  width: max-content;
  min-width: 100%;
  justify-content: center;
}

.page-nav__link {
  min-height: 44px;
  border-radius: 8px;
}

.hero {
  min-height: auto;
  align-items: flex-start;
  padding-top: calc(var(--header-height) + var(--notice-height, 0px) + 4.75rem);
  padding-bottom: 5rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.98) 0%, rgba(251, 250, 246, 0.96) 72%, rgba(243, 239, 230, 0.98) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 62%, rgba(var(--brand-700-rgb), 0.08) 62%, rgba(var(--brand-700-rgb), 0.08) calc(62% + 1px), transparent calc(62% + 1px));
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
}

.hero-bg {
  opacity: 0 !important;
}

.hero-content {
  width: 100%;
  max-width: min(1180px, 100%);
  text-align: left;
}

.hero-badge {
  padding: 0;
  margin-bottom: 1.35rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
  letter-spacing: 0;
}

.hero-badge .badge-icon {
  color: var(--brand-700);
}

.hero-title {
  max-width: 10.6ch;
  margin-inline: 0;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 6.4vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--color-text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-wrap: balance;
}

.hero-subtitle {
  margin-bottom: 1.55rem;
  color: var(--accent-deep);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0;
}

.hero-desc {
  max-width: 39em;
  margin: 0 0 1.75rem;
  color: var(--color-text-secondary);
  line-height: 1.9;
}

.hero-stats,
.hero-creds,
.hero-creds__footer,
.hero-trust-callout,
.hero-area-badges {
  margin-left: 0;
  margin-right: auto;
}

.hero-stats {
  justify-content: flex-start;
  gap: 0.75rem;
}

.stat {
  border-radius: 14px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--designer-shadow);
}

.stat-value {
  color: var(--brand-700);
  font-size: 2.55rem;
}

.hero-creds__label {
  text-align: left;
  letter-spacing: 0.08em;
}

.hero-creds__overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.hero-creds__overview p {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
  margin: 0;
  padding: 0.8rem;
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.hero-creds__overview strong {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: clamp(1.25rem, 2.7vw, 1.7rem);
  line-height: 1;
}

.hero-creds__overview span {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  line-height: 1.5;
}

.hero-creds__details {
  margin-top: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(255, 253, 250, 0.86);
}

.hero-creds__details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.hero-creds__details > summary::-webkit-details-marker {
  display: none;
}

.hero-creds__details > summary::after {
  content: "+";
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 1.15rem;
}

.hero-creds__details[open] > summary::after {
  content: "−";
}

.hero-creds__details > summary:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

.hero-creds__details .hero-creds__grid {
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.hero-cred__link,
.hero-creds__footer,
.quick-answer,
.feature-card,
.service-card,
.work-card,
.partner-card,
.company-philosophy,
.profile-content,
.capability-card,
.mission-card,
.timeline,
.pain-card,
.trust-stat,
.step-card,
.top-cert-card,
.credly-badge-card,
.auth-cap-row,
.proof-work,
.portfolio-section,
.contact-channels {
  border-radius: 14px;
  background-color: var(--color-bg-card);
  box-shadow: var(--designer-shadow);
}

.hero-cred__link:hover,
.hero-cred__link:focus-visible,
.feature-card:hover,
.service-card:hover,
.work-card:hover,
.partner-card:hover,
.capability-card:hover,
.pain-card:hover,
.trust-stat:hover,
.step-card:hover,
.top-cert-card:hover,
.credly-badge-card:hover,
.auth-cap-row:hover,
.proof-work:hover {
  transform: translateY(-1px);
  box-shadow: var(--designer-shadow-hover);
}

.hero-cta,
.hero-creds__links,
.hero-trust-callout,
.hero-area-badges {
  justify-content: flex-start;
}

.btn,
.line-cta,
.hero-creds__link,
.hero-area-badge,
.pain-card__cta,
.pain-card__services-summary,
.pain-card__service-price,
.pain-card__price {
  border-radius: 12px;
}

.btn-primary,
.btn-trust--primary,
.pain-card__cta,
.nav-cta,
.notice-page__home {
  background: #24332a;
  color: #ffffff;
  box-shadow: 0 14px 30px -22px rgba(var(--brand-700-rgb), 0.72);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.pain-card__cta:hover,
.pain-card__cta:focus-visible {
  background: #1f2e26;
  color: #ffffff;
}

.line-cta {
  background: #047a39;
  color: #ffffff;
}

.hero-trust-callout {
  max-width: 42em;
  gap: 0.45rem 0.95rem;
}

.hero-trust-item {
  color: var(--color-text-secondary);
  white-space: normal;
}

.hero-area-badge {
  min-height: 36px;
  white-space: normal;
}

.pain-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.pain-card__pain {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-light);
}

.pain-card__pain-label,
.pain-card__solution-label {
  padding: 0;
  background: transparent;
  border-radius: 0;
  letter-spacing: 0;
}

.pain-card__pain-label::before,
.pain-card__solution-label::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.pain-card__pain-label::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.pain-card__solution-label::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
}

.pain-card__solution-title strong {
  background: transparent;
  padding: 0;
  border-bottom: 2px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 0;
}

.pain-card__arrow {
  border-radius: 8px;
  box-shadow: none;
}

.quick-answers {
  background: #ffffff;
}

.quick-answers__title,
.quick-answers__lead {
  text-align: left;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.quick-answer summary {
  font-weight: 700;
}

.how-to-start {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.how-to-start__header {
  max-width: 1100px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-inline: 1.5rem;
  text-align: left;
}

.how-to-start__title {
  margin-bottom: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-jp-head);
}

.how-to-start__lead {
  margin: 0;
}

.how-to-start__steps::before {
  content: none;
}

.step-card {
  gap: 0.85rem;
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--brand-700);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.step-card:hover {
  transform: none;
  border-color: rgba(var(--brand-700-rgb), 0.32);
  box-shadow: 0 16px 36px -32px rgba(var(--brand-700-rgb), 0.48);
}

.step-card__num,
.step-card--final .step-card__num {
  position: static;
  width: auto;
  height: auto;
  transform: none;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-deep);
  box-shadow: none;
  font-family: var(--font-num);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
}

.step-card__num::before {
  content: "STEP";
  margin-right: 0.45rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
}

.step-card__icon,
.step-card--final .step-card__icon {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: var(--radius-sm);
}

.step-card__icon svg {
  width: 25px;
  height: 25px;
}

.step-card__title {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0;
}

.step-card__details {
  padding: 0.8rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border-light);
  border-radius: 0;
}

.step-card__time,
.step-card--final .step-card__time {
  align-self: flex-start;
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px solid rgba(var(--brand-700-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--brand-700);
  letter-spacing: 0;
}

.how-to-start__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: var(--radius-sm) !important;
  line-height: 1.4;
  white-space: normal;
}

.how-to-start__cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (min-width: 900px) {
  .how-to-start__header {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto;
    column-gap: clamp(3rem, 7vw, 6rem);
    align-items: end;
  }

  .how-to-start__eyebrow {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .how-to-start__title {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  .how-to-start__lead {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    max-width: 42em;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(var(--brand-700-rgb), 0.22);
  }
}

.top-certifications::before {
  content: none;
}

.top-certifications__header {
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
}

.top-certifications__title {
  line-height: 1.4;
  letter-spacing: var(--tracking-jp-head);
}

.top-certifications__lead {
  margin: 0;
}

.authority-tiers {
  display: block;
  max-width: none;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border);
}

.authority-tier,
.authority-tier--top,
.authority-tier--global,
.authority-tier--specialist,
.authority-tier--foundation {
  display: grid;
  grid-template-columns: 92px minmax(180px, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.authority-tier:hover {
  transform: none;
  background: rgba(var(--brand-700-rgb), 0.025);
  box-shadow: none;
}

.authority-tier--top::before {
  content: none;
}

.authority-tier__rank,
.authority-tier--top .authority-tier__rank,
.authority-tier--global .authority-tier__rank,
.authority-tier--specialist .authority-tier__rank,
.authority-tier--foundation .authority-tier__rank {
  align-self: start;
  padding: 0.15rem 0;
  background: transparent;
  border-radius: 0;
  color: var(--accent-deep);
  font-family: var(--font-num);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.authority-tier__label {
  font-weight: 700;
  letter-spacing: 0;
}

.authority-tier__detail {
  color: var(--color-text-secondary);
}

.top-cert-card,
.top-cert-card--stanford,
.top-cert-card--ms,
.top-cert-card--google,
.top-cert-card--cybersec {
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--brand-700);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.top-cert-card::before {
  content: none;
}

.top-cert-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-700-rgb), 0.3);
  box-shadow: 0 18px 38px -34px rgba(var(--brand-700-rgb), 0.52);
}

@media (min-width: 900px) {
  .top-certifications__header {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(3rem, 7vw, 6rem);
    align-items: end;
  }

  .top-certifications__eyebrow {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .top-certifications__title {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  .top-certifications__lead {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    max-width: 42em;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(var(--brand-700-rgb), 0.22);
  }

  .top-certifications__header .authority-tiers {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 640px) {
  .authority-tier,
  .authority-tier--top,
  .authority-tier--global,
  .authority-tier--specialist,
  .authority-tier--foundation {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 0.45rem 0.8rem;
    padding: 1rem 0;
  }

  .authority-tier__rank {
    grid-column: 1;
    grid-row: 1;
  }

  .authority-tier__label {
    grid-column: 2;
    grid-row: 1;
  }

  .authority-tier__detail {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.hero-badge,
.hero-title,
.hero-subtitle,
.hero-desc,
.hero-stats,
.hero-creds {
  animation: none !important;
}

@media (min-width: 960px) {
  .hero-content {
    grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.9fr);
    column-gap: 4rem;
  }

  .hero-stats {
    border-left: 2px solid rgba(var(--brand-700-rgb), 0.72);
  }

  .hero-stats .stat {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  .page-nav__list {
    justify-content: flex-start;
    padding-inline: 0.35rem 0.75rem;
    padding-block: 0.25rem;
  }

  .page-nav__link {
    padding-inline: 0.65rem;
    padding-block: 0.35rem;
    min-height: 44px;
  }

  .hero {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
  }

  .hero::before {
    background: none;
  }

  .hero-content,
  .hero-creds__label,
  .hero-creds__footer {
    text-align: left;
  }

  .hero-title {
    max-width: 10ch;
    font-size: 3.35rem;
    line-height: 1.04;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .hero-desc {
    max-width: 100%;
    margin-right: 0;
  }

  .hero-creds__overview {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.5rem;
  }

  .stat {
    min-width: 0;
    padding: 0.65rem 0.45rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  .hero-cta .btn,
  .line-cta-wrap,
  .line-cta,
  .hero-creds__link,
  .hero-area-badge {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    max-width: 9.6ch;
    font-size: 3rem;
  }

  .hero-badge {
    align-items: flex-start;
  }

  .hero-creds__grid {
    gap: 0.65rem;
  }

  .hero-cred__link {
    padding: 0.75rem 0.55rem;
  }

  .hero-cred__name {
    font-size: 0.78rem;
  }
}

@media (max-width: 374px) {
  .hero-title {
    font-size: 2.62rem;
  }

  .hero-stats,
  .hero-creds__grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile overflow repair and removal of CTA orbital dots */
.line-cta-wrap::before,
.line-cta-wrap::after {
  content: none !important;
}

.hero-badge > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .hero-badge {
    display: flex;
    width: 100%;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .hero-stats .stat,
  .stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .stat-label {
    min-width: 0;
    font-size: 0.82rem;
  }

  .stat-value {
    flex-shrink: 0;
  }
}

@media (max-width: 520px) {
  .container {
    padding-inline: 1rem;
  }

  .hero-content,
  .hero-badge,
  .hero-desc,
  .hero-stats,
  .hero-creds,
  .hero-trust-callout,
  .hero-area-badges {
    width: 100%;
    max-width: 340px;
    margin-left: 0;
    margin-right: auto;
  }

  .hero-title {
    max-width: 9.4ch;
    font-size: 2.86rem;
  }

  .hero-stats .stat,
  .stat {
    padding-inline: 0.75rem;
  }
}

/* ============================================================
   Hero ambient — 上質な動的装飾（柔らかなブランド色光がゆっくり漂う）
   Linear/Stripe 系の抑制された品位。GPU(transform)のみ・背面・
   reduced-motion 静止・reduced-data 省略。テキストの可読性(AA)を損なわない低アルファ。
   ============================================================ */
.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 42%, #000 52%, transparent 100%);
          mask-image: radial-gradient(125% 105% at 50% 42%, #000 52%, transparent 100%);
}
.hero-ambient__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.hero-ambient__orb--a {
  width: 46vw; height: 46vw; max-width: 680px; max-height: 680px;
  top: -14%; left: -7%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--brand-700-rgb), 0.13), rgba(var(--brand-700-rgb), 0) 66%);
  animation: heroAmbientA 27s ease-in-out infinite;
}
.hero-ambient__orb--b {
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px;
  bottom: -20%; right: -9%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0) 66%);
  animation: heroAmbientB 33s ease-in-out infinite;
}
.hero-ambient__orb--c {
  width: 34vw; height: 34vw; max-width: 500px; max-height: 500px;
  top: 30%; left: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--brand-700-rgb), 0.07), rgba(var(--brand-700-rgb), 0) 68%);
  animation: heroAmbientC 39s ease-in-out infinite;
}
@keyframes heroAmbientA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3.5%, 3%, 0) scale(1.08); }
}
@keyframes heroAmbientB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-4%, -3%, 0) scale(1.1); }
}
@keyframes heroAmbientC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%      { transform: translate3d(-3%, 4%, 0) scale(0.9); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient__orb { animation: none !important; }
}
@media (prefers-reduced-data: reduce) {
  .hero-ambient { display: none; }
}

/* ============================================================
   Hero Foresight Curve — 事業を体現する動的装飾
   実線=見えている成長軌道 / ノード=現在地 / 破線=その先の予測（予見可能な先を越えて）。
   背面・pointer-events:none。描画は一度のみ、恒常モーションは node パルス＋scan 走査。
   reduced-motion 静止・reduced-data 省略。テキスト可読性(AA)を保つ抑えた不透明度。
   ============================================================ */
.hero-foresight {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 100%);
}
.hero-foresight__solid {
  stroke: url(#foresightStroke);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.62;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: foresightDraw 2.6s cubic-bezier(0.35, 0, 0.1, 1) 0.35s forwards;
}
@keyframes foresightDraw { to { stroke-dashoffset: 0; } }
.hero-foresight__proj {
  stroke: var(--brand-700);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: foresightProjIn 0.9s ease 2.7s forwards;
}
@keyframes foresightProjIn { to { opacity: 0.42; } }
.hero-foresight__area {
  opacity: 0;
  animation: foresightAreaIn 1.6s ease 0.9s forwards;
}
@keyframes foresightAreaIn { to { opacity: 1; } }
.hero-foresight__dot { fill: var(--brand-700); opacity: 0.5; }
.hero-foresight__node { fill: var(--brand-700); }
.hero-foresight__pulse {
  fill: none;
  stroke: var(--brand-700);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: foresightPulse 3s ease-out infinite 2.8s;
}
@keyframes foresightPulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}
.hero-foresight__scan { fill: var(--accent); opacity: 0.9; }
.hero-foresight__scan--2 { fill: var(--brand-700); opacity: 0.68; }

/* 予測の信頼区間コーン（予見の先の“幅”） */
.hero-foresight__cone { opacity: 0; animation: foresightConeIn 1.1s ease 2.9s forwards; }
@keyframes foresightConeIn { to { opacity: 1; } }
.hero-foresight__bound {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: foresightBoundIn 1.1s ease 2.9s forwards;
}
@keyframes foresightBoundIn { to { opacity: 0.32; } }

/* 現在地ノードのグロー + 二重パルス + リング型データ点 */
.hero-foresight__glow { opacity: 0; animation: foresightGlowIn 1.2s ease 2.6s forwards; }
@keyframes foresightGlowIn { to { opacity: 1; } }
.hero-foresight__pulse--2 { animation-delay: 4.3s; }
.hero-foresight__dot--ring { fill: none; stroke: var(--brand-700); stroke-width: 2; opacity: 0.55; }

/* 参照軸・目盛り・時間軸ラベル（曲線の成長軌跡を参照するグリッド） */
.hero-foresight__axis {
  stroke: var(--brand-700);
  stroke-width: 1;
  opacity: 0;
  animation: foresightAxisIn 0.6s ease-out 2.8s forwards;
}
@keyframes foresightAxisIn { to { opacity: 0.32; } }
.hero-foresight__tick {
  stroke: var(--brand-700);
  stroke-width: 1;
  opacity: 0;
  animation: foresightTickIn 0.6s ease-out 2.9s forwards;
}
@keyframes foresightTickIn { to { opacity: 0.34; } }
.hero-foresight__label {
  fill: var(--brand-700);
  opacity: 0;
  animation: foresightLabelIn 0.7s ease-out 3.0s forwards;
}
@keyframes foresightLabelIn { to { opacity: 0.68; } }
.hero-foresight__label--minor { animation-name: foresightLabelMinorIn; }
@keyframes foresightLabelMinorIn { to { opacity: 0.42; } }

/* リッチ化: 微グリッド / インクリボン / 第2予測 / 宝石ノード(register+鏡面) / ゴースト未来 */
.hero-foresight__grid { opacity: 0; animation: foresightGridIn 1.2s ease 2.5s forwards; }
.hero-foresight__grid line { stroke: var(--brand-700); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes foresightGridIn { to { opacity: 0.05; } }
.hero-foresight__ink { opacity: 0; animation: foresightInkIn 1.9s cubic-bezier(0.35, 0, 0.1, 1) 0.55s forwards; }
@keyframes foresightInkIn { to { opacity: 0.5; } }
.hero-foresight__proj2 { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; animation: foresightProj2In 0.9s ease 3.1s forwards; }
@keyframes foresightProj2In { to { opacity: 0.28; } }
.hero-foresight__reg { stroke: var(--brand-700); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; animation: foresightRegIn 0.6s ease-out 3.0s forwards; }
@keyframes foresightRegIn { to { opacity: 0.4; } }
.hero-foresight__spec { fill: rgb(245, 248, 244); opacity: 0; animation: foresightSpecIn 0.7s ease-out 3.15s forwards; }
@keyframes foresightSpecIn { to { opacity: 0.9; } }
.hero-foresight__ghost { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; animation: foresightGhostIn 0.9s ease 3.3s forwards; }
@keyframes foresightGhostIn { to { opacity: 0.36; } }
.hero-foresight__future { fill: var(--accent-deep); opacity: 0; animation: foresightFutureIn 0.8s ease 3.4s forwards; }
@keyframes foresightFutureIn { to { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  .hero-foresight__solid { animation: none !important; stroke-dashoffset: 0 !important; }
  .hero-foresight__proj  { animation: none !important; opacity: 0.42 !important; }
  .hero-foresight__area  { animation: none !important; opacity: 1 !important; }
  .hero-foresight__cone  { animation: none !important; opacity: 1 !important; }
  .hero-foresight__bound { animation: none !important; opacity: 0.32 !important; }
  .hero-foresight__glow  { animation: none !important; opacity: 1 !important; }
  .hero-foresight__pulse { animation: none !important; opacity: 0 !important; }
  .hero-foresight__axis { animation: none !important; opacity: 0.32 !important; }
  .hero-foresight__tick { animation: none !important; opacity: 0.34 !important; }
  .hero-foresight__label { animation: none !important; opacity: 0.68 !important; }
  .hero-foresight__grid  { animation: none !important; opacity: 0.05 !important; }
  .hero-foresight__ink   { animation: none !important; opacity: 0.5 !important; }
  .hero-foresight__proj2 { animation: none !important; opacity: 0.28 !important; }
  .hero-foresight__reg   { animation: none !important; opacity: 0.4 !important; }
  .hero-foresight__spec  { animation: none !important; opacity: 0.9 !important; }
  .hero-foresight__ghost { animation: none !important; opacity: 0.36 !important; }
  .hero-foresight__future { animation: none !important; opacity: 0.5 !important; }
  .hero-foresight__label--minor { animation: none !important; opacity: 0.42 !important; }
  .hero-foresight__scan  { display: none !important; }
}
@media (prefers-reduced-data: reduce) { .hero-foresight { display: none; } }

/* ============================================================
   実写ドキュメンタリー層 (2026-07-04)
   — AI生成イメージから実事業写真への転換に伴う写真コンポーネント。
   方針: 最終レイヤーの造形言語（radius 8px カード / 画像単体 12px・
   --designer-shadow・hairline 罫・figcaption 2段組）に準拠。
   業態の偏り防止のため、写真は各セクションの「主張の証拠」として
   文脈分散配置（拠点/相談/教育/メディア/映像）。
   reduced-motion: アニメ不使用のため対象なし。
   reduced-data: 装飾帯 .media-band のみ省略（本文写真は保持）。
   ============================================================ */

/* --- 対談カード非リンク化に伴う中立化（死にCTA除去後、ホバーの持ち上がりを無効化） --- */
.interview-card { cursor: default; }
.interview-card:hover { transform: none; }
.interview-card:hover .interview-image { transform: none; }

/* --- 対談: 出典表記（オーバーレイ内・暗幕上の白系テキストで AA 確保） --- */
.interview-source {
  margin-top: 0.6rem;
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.5;
}

/* --- 対談: 取材時の実写 2枚組（©クレジット付き一次証拠） --- */
.interview-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.interview-shots__item { margin: 0; }
.interview-shots__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--designer-shadow);
  background: var(--color-bg-secondary);
  display: block;
}
.interview-shots__item figcaption {
  margin-top: 0.45rem;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  line-height: 1.4;
  color: var(--color-text);
}
.interview-shots__item figcaption small {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* --- 歩み: 空き家改修の実写 2枚組（旧 timeline-band の後継・880px 幅を踏襲） --- */
.timeline-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 880px;
  margin: 0 auto var(--space-xl);
}
.timeline-photos__item { margin: 0; }
.timeline-photos__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--designer-shadow);
  background: var(--color-bg-secondary);
  display: block;
}
.timeline-photos__item figcaption {
  margin-top: 0.45rem;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  line-height: 1.4;
  color: var(--color-text);
}
.timeline-photos__item figcaption small {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* --- 事業概要: 拠点の実写ギャラリー（外観ワイド + 内観の編集的 2枚組） --- */
.base-gallery {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: 2rem;
}
.base-gallery__item { margin: 0; }
.base-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--designer-shadow);
  background: var(--color-bg-secondary);
  display: block;
}
.base-gallery__item--wide img { aspect-ratio: 16 / 10; }
.base-gallery__item figcaption {
  margin-top: 0.45rem;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  line-height: 1.4;
  color: var(--color-text);
}
.base-gallery__item figcaption small {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* --- 教育・登壇: 登壇実写（portfolio-block 内の単写真） --- */
.portfolio-shot {
  margin: var(--space-md) 0 0;
  max-width: 560px;
}
.portfolio-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--designer-shadow);
  background: var(--color-bg-secondary);
  display: block;
}
.portfolio-shot figcaption {
  margin-top: 0.45rem;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  line-height: 1.4;
  color: var(--color-text);
}
.portfolio-shot figcaption small {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* --- モバイル分岐（320px〜560px: 1列化・縦積みで文字被り/はみ出しゼロ） --- */
@media (max-width: 560px) {
  .interview-shots { grid-template-columns: 1fr; }
  .timeline-photos { grid-template-columns: 1fr; }
  .base-gallery { grid-template-columns: 1fr; }
  .base-gallery__item img,
  .base-gallery__item--wide img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Hero Foresight リッチ化 第2弾 + ビジョン・ビスタ + 写真グレード統一 (2026-07-04)
   — 追加要素: レーダースイープ / データ点の逐次点灯 / 現在地の周回衛星 /
     スキャン彗星テール / コーン内ドリフト粒 / 風景ビジュアル背景。
   すべて transform/opacity のみ・reduced-motion 完全静止・reduced-data 省略。
   ============================================================ */

/* --- レーダースイープ（プロット領域を走る計器の更新線・極薄） --- */
.hero-foresight__sweep {
  stroke: var(--brand-700);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: foresightSweepIn 1s ease 3.2s forwards;
}
@keyframes foresightSweepIn { to { opacity: 0.07; } }

/* --- データ点の逐次点灯（曲線の描画 2.6s に同期して左→右へ） --- */
.hero-foresight__dot--seq1 { opacity: 0; animation: foresightDotIn 0.5s ease-out 0.95s forwards; }
.hero-foresight__dot--seq2 { opacity: 0; animation: foresightDotRingIn 0.5s ease-out 1.3s forwards; }
.hero-foresight__dot--seq3 { opacity: 0; animation: foresightDotIn 0.5s ease-out 1.65s forwards; }
.hero-foresight__dot--seq4 { opacity: 0; animation: foresightDotIn 0.5s ease-out 2.0s forwards; }
.hero-foresight__dot--seq5 { opacity: 0; animation: foresightDotRingIn 0.5s ease-out 2.35s forwards; }
@keyframes foresightDotIn { to { opacity: 0.5; } }
@keyframes foresightDotRingIn { to { opacity: 0.55; } }

/* --- 現在地の周回衛星（“いま動いている”計器表現） --- */
.hero-foresight__sat { fill: var(--accent); opacity: 0; animation: foresightSatIn 0.8s ease 3.4s forwards; }
@keyframes foresightSatIn { to { opacity: 0.55; } }

/* --- スキャン粒子の彗星テール（先頭粒の残光） --- */
.hero-foresight__tail--1 { opacity: 0.38; }
.hero-foresight__tail--2 { opacity: 0.24; }
.hero-foresight__tail--3 { opacity: 0.12; }

/* --- 予測コーン内のドリフト粒（可能性の粒・低速・極薄） --- */
.hero-foresight__drift { fill: var(--accent); opacity: 0; }
.hero-foresight__drift--1 { animation: foresightDriftIn 1.2s ease 3.6s forwards; }
.hero-foresight__drift--2 { animation: foresightDriftIn2 1.2s ease 3.8s forwards; }
.hero-foresight__drift--3 { animation: foresightDriftIn3 1.2s ease 4.0s forwards; }
@keyframes foresightDriftIn  { to { opacity: 0.3; } }
@keyframes foresightDriftIn2 { to { opacity: 0.2; } }
@keyframes foresightDriftIn3 { to { opacity: 0.26; } }

/* --- ビジョン・ビスタ: スマートシュリンク構想の風景（下寄せ・原寸比率・内容可視） ---
   方針変更(2026-07-04): 画像に焼き込まれたコピー/アイコンが読めるよう、
   cover ズーム＋下端グラデ消しをやめ、ヒーロー下端に原寸比率で下寄せ配置。
   上端のみ背景へフェードし、下端はセクション境界にフラッシュ（切らない・消さない）。 */
.hero-vista {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* 上端フェード: 画像の空部分をヒーロー背景へ溶かす（下端はフェードなし＝内容を見せる） */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 16%, #000 38%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 16%, #000 38%);
}
.hero-vista picture { display: block; width: 100%; height: auto; }
.hero-vista img {
  width: 100%;
  height: auto; /* 原寸比率・クロップなし（リセット層 img[width][height]{height:auto} とも一致） */
  display: block;
  opacity: 0;
  /* 美観グレード: 内容が読める不透明度なので控えめに */
  filter: saturate(1.08) contrast(1.03) brightness(1.02);
  transform-origin: 50% 82%;
  animation: heroVistaIn 1.2s ease 0s forwards, heroVistaDrift 60s ease-in-out 2s infinite alternate; /* LCP: 遅延なしで即フェード開始 */
}
@keyframes heroVistaIn { to { opacity: 0.55; } }
@keyframes heroVistaDrift { from { transform: scale(1); } to { transform: scale(1.02); } }
@media (max-width: 768px) {
  .hero-vista img { animation-name: heroVistaInMobile, heroVistaDrift; }
}
@keyframes heroVistaInMobile { to { opacity: 0.45; } }

/* --- 教育・登壇: 記録写真 2枚組 --- */
.portfolio-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
  max-width: 880px;
}
.portfolio-shots .portfolio-shot { margin: 0; max-width: none; }
@media (max-width: 560px) {
  .portfolio-shots { grid-template-columns: 1fr; }
}

/* --- ビジョンポスター（自社制作・クリックで拡大） --- */
.vision-poster {
  display: block;
  margin-top: var(--space-lg);
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.vision-poster figure { margin: 0; }
.vision-poster img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--designer-shadow);
  background: var(--color-bg-secondary);
}
.vision-poster figcaption {
  margin-top: 0.45rem;
  text-align: left;
  font-weight: 700;
  font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
  line-height: 1.4;
  color: var(--color-text);
}
.vision-poster figcaption small {
  display: block;
  font-weight: 500;
  font-size: 0.82em;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.vision-poster:hover, .vision-poster:focus-visible { transform: translateY(-1px); }
.vision-poster:hover img { box-shadow: var(--designer-shadow-hover); }
.vision-poster:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* --- 写真の色味統一グレード: 彩度を軽く整え、ブランド緑→藍を soft-light で薄く重ねる。
       実写(<picture>使用)にのみ適用され、イラスト系(直<img>)には掛からない。 --- */
.svc-showcase__item picture,
.interview-shots__item picture,
.timeline-photos__item picture,
.base-gallery__item picture,
.portfolio-shot picture {
  position: relative;
  display: block;
}
.svc-showcase__item picture::after,
.interview-shots__item picture::after,
.timeline-photos__item picture::after,
.base-gallery__item picture::after,
.portfolio-shot picture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(46, 64, 52, 0.20), rgba(50, 78, 114, 0.12) 55%, rgba(46, 64, 52, 0.12));
  mix-blend-mode: soft-light;
}
.svc-showcase__item picture::after { border-radius: 14px; }
.svc-showcase__item picture img,
.interview-shots__item img,
.timeline-photos__item img,
.base-gallery__item img,
.portfolio-shot img {
  filter: saturate(0.9) contrast(1.02) brightness(1.01);
}

/* --- ユーザー設定尊重（新要素の完全静止・省データ） --- */
@media (prefers-reduced-motion: reduce) {
  .hero-foresight__sweep { display: none !important; }
  .hero-foresight__orbit { display: none !important; }
  .hero-foresight__tail  { display: none !important; }
  .hero-foresight__drift { display: none !important; }
  .hero-foresight__dot--seq1, .hero-foresight__dot--seq3, .hero-foresight__dot--seq4 { animation: none !important; opacity: 0.5 !important; }
  .hero-foresight__dot--seq2, .hero-foresight__dot--seq5 { animation: none !important; opacity: 0.55 !important; }
  .hero-vista img { animation: none !important; opacity: 0.55 !important; transform: none !important; }
}
@media (prefers-reduced-data: reduce) {
  .hero-vista { display: none; }
}

/* --- ビスタのメッセージ帯を専用スペース化: 画像下部の焼き込みコピー
   （人口が減る地域ほど…/スマートシュリンク3ステップ/結び）に hero 内 UI が
   被らないよう、hero の下端余白を画像メッセージ帯の高さぶん確保（Rule #0-6）。
   画像は全幅表示（高さ=56.3vw）でメッセージ帯は下から約22vw（帯上端=画像高の61%）。
   余白 24vw は帯高と線形連動するため、上限キャップなしで全画面幅において被らない
   （固定上限は超ワイド画面で被りが再発する欠陥だったため撤廃・下限のみ150px）。 --- */
.hero { padding-bottom: max(150px, 24vw); }

/* --- ハイブリッド宣言の見出し色を復旧: editorial 層(L15372)が紺グラデ背景の
   見出しにまで --color-text(ほぼ黒)を一括適用し「紺地に黒文字」で読めなかった。
   白 (#fff on #1e1f4a ≈ 15:1) で AA を大きく満たす。 --- */
.hybrid-approach__title { color: #ffffff; }

/* --- 教育・登壇 記録写真: 2枚組 → 3枚組へ拡張 --- */
.portfolio-shots { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
@media (max-width: 860px) {
  .portfolio-shots { grid-template-columns: 1fr; max-width: 560px; }
}

/* --- hero-creds 検証リンクの多行対応 (2026-07-05 / Rule #0-6) ---
   リンク4本化により狭幅でラベルが2行折返しした際、旧 padding: 0（縦）では
   ピル上下の余白がゼロで窮屈だった。縦パディングを持たせ、SP は全幅ボタン化して
   途中折返しを解消する。 --- */
.hero-creds__link { padding: 10px var(--space-lg); }
@media (max-width: 560px) {
  .hero-creds__links { gap: 0.55rem; }
  .hero-creds__link {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px var(--space-md);
  }
}


/* --- 京都新聞カード: リセット層 img[width][height]{height:auto}（詳細度0,2,1）に
   固定高が負けて画像高がバラバラだった問題を是正（ヒーロー画像と同型の不具合） --- */
.portfolio-press-card img[width][height] { height: 200px; }
@media (max-width: 900px) {
  .portfolio-press-card img[width][height] { height: 180px; }
}

/* ============================================================
   Multi-device hardening (2026-07-25)
   320px〜1920px+ の実ブラウザ監査で確認したナビ、タップ領域、
   notice.php の表・余白・リンク配置を最終カスケードで統治する。
   ============================================================ */

/* 主要トグルは入力手段に依存せず44pxを確保する。 */
.lang-picker-toggle,
.pain-card__services-summary,
.capability-card__details > summary {
  min-height: 44px;
}

.lang-picker-menu li {
  min-height: 44px;
}

/* ドロワーは画面外配置を transform に統一し、開いた後も閉じるボタンを最前面に残す。 */
@media (max-width: 1024px) {
  .nav {
    right: 0;
    height: calc(100dvh - var(--notice-height, 0px));
    max-height: calc(100dvh - var(--notice-height, 0px));
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
    transform: translateX(110%);
    transition: transform var(--transition-slow);
  }

  .nav.is-open {
    right: 0;
    transform: translateX(0);
  }

  .header:has(.nav.is-open),
  .header.header--menu-open {
    z-index: 3000 !important;
  }

  .header:has(.nav.is-open) .mobile-menu-btn,
  .header.header--menu-open .mobile-menu-btn {
    position: relative;
    z-index: 1501;
    background: #ffffff;
    border-radius: var(--radius-sm);
  }

  .nav-list a {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
}

/* 言語一覧を開いている間は、親ヘッダーごと下部固定UIより前面に出す。 */
.header:has(.lang-picker-toggle[aria-expanded="true"]),
.header.header--lang-open {
  z-index: 3000 !important;
}

/* 769〜1280pxでもナビ項目を省略せず、全リンクへ到達できるようにする。 */
@media (min-width: 769px) and (max-width: 1280px) {
  .nav-list li:nth-child(7),
  .nav-list li:nth-child(8) {
    display: list-item !important;
  }
}

/* 320pxでもブランドを消さず、言語ボタンだけをコンパクト表示する。 */
@media (max-width: 340px) {
  .logo-img {
    display: block !important;
    max-width: 96px !important;
    max-height: 28px !important;
  }

  .header-inner > .lang-switch {
    margin-right: 0.2rem !important;
  }

  .lang-picker-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
  }

  .lang-picker-current {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .lang-picker-toggle svg:last-child {
    display: none;
  }
}

/* Keep the notice readable before the footer at every width. */
.site-notice-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: clamp(0.85rem, 1.5vw, 1.25rem) clamp(1rem, 3vw, 3rem);
  text-align: left;
  font-size: clamp(0.875rem, 0.82rem + 0.18vw, 1rem);
  line-height: 1.7;
}
.site-notice-bar__tag {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  margin-top: 0.2rem;
}
.site-notice-bar__text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.site-notice-bar__link {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  min-height: 44px;
  min-width: 44px;
  white-space: normal;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .site-notice-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .site-notice-bar__tag {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }
  .site-notice-bar__text {
    grid-column: 1;
    grid-row: 2;
  }
  .site-notice-bar__link {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 1024px) {
  .site-notice-bar__link {
    min-height: 44px;
  }
}

/* 初回Cookie通知と翻訳トーストを同じ段へ置かない。 */
body:has(.cookie-notice.show) .i18n-toast {
  top: calc(var(--notice-height, 0px) + var(--header-height, 70px) + 68px) !important;
  bottom: auto !important;
}

/* 横向きの短い画面では、同意操作を優先して固定UI同士の重なりをなくす。 */
@media (max-width: 1024px) and (max-height: 480px) {
  body:has(.cookie-notice.show) .sticky-cta-mobile,
  body:has(.cookie-notice.show) .trust-banner {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .cookie-notice.show {
    bottom: var(--bottom-safe, 0px) !important;
    max-height: calc(
      100dvh -
      var(--notice-height, 0px) -
      var(--header-height, 70px) -
      0.5rem
    );
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:has(.cookie-notice.show) .i18n-toast {
    display: none !important;
  }
}

/* 320px用の全リンク一括ボタン化を本文リンクでは打ち消す。 */
@media (max-width: 374px) {
  p a:not(.btn):not(.line-cta):not(.pain-card__cta) {
    display: inline;
    min-width: 0;
    min-height: 0;
  }
}

/* 最小幅でもグリッド列の下限が親幅を超えない。 */
.cert-verify-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (max-width: 600px) {
  .cert-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 横向き端末でも言語一覧の末尾まで到達できる。 */
@media (max-width: 1024px) {
  .lang-picker-menu {
    max-height: calc(
      100dvh -
      var(--notice-height, 0px) -
      var(--header-height, 70px) -
      var(--bottom-stack-cta, 0px) -
      var(--bottom-stack-trust, 0px) -
      1rem
    );
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lang-picker-menu {
    max-height: calc(
      100dvh -
      var(--notice-height, 0px) -
      var(--header-height, 70px) -
      var(--bottom-stack-trust, 0px) -
      var(--bottom-safe, 0px) -
      1rem
    );
  }
}

/* 1文字の外部リンクも、モバイルで確実に押せる操作面を持たせる。 */
.inline-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: -0.7rem 0;
  vertical-align: middle;
}

/* notice.php は下部固定UIを持たないため、サイト共通の予約余白を解除する。 */
.notice-body {
  padding-bottom: 0 !important;
}

.notice-body main,
.notice-body #main-content {
  padding-bottom: 0 !important;
}

.notice-body .footer {
  padding-bottom: var(--space-xl) !important;
}

.notice-body .notice-page {
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* 情報区分は中間幅を2列、狭幅を1列へ自然に切り替える。 */
.notice-page__scope {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.notice-page__scope-item > span {
  font-size: 0.72rem;
}

.notice-page__scope-item strong {
  font-size: 0.88rem;
}

.notice-page__scope-item small {
  font-size: 0.78rem;
}

/* 関連先・出典は、折り返しても行全体を押せる44pxターゲットにする。 */
.notice-page__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--brand-700-rgb), 0.04);
}

.notice-page__sources li {
  padding: 0;
}

.notice-page__sources a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0;
  text-align: left;
}

/* PDFカードは常に3列を保ち、矢印だけが次行へ落ちないようにする。 */
.notice-doc {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
}

@media (max-width: 480px) {
  .notice-doc {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.9rem;
  }

  .notice-doc__meta {
    flex-basis: auto;
  }
}

/* 法的な位置づけと相談先を、資格者の職域を混同しない形で表示する。 */
.notice-page__legal-position {
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid rgba(67, 99, 140, 0.28);
  border-left: 4px solid var(--accent-deep);
  border-radius: 0 12px 12px 0;
  background: rgba(67, 99, 140, 0.055);
}

.notice-page__legal-position h2 {
  margin: 0 0 1rem;
  color: var(--brand-900);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.45;
  text-align: left;
}

.notice-page__legal-position .notice-page__kicker {
  margin-bottom: 0.4rem;
  color: var(--verify);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

.notice-page__legal-position h3 {
  margin: 0 0 0.7rem;
  color: var(--color-text);
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  line-height: 1.5;
  text-align: left;
}

.notice-page__legal-position > p {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(0.9rem, 1.9vw, 0.98rem);
  line-height: 1.85;
  text-align: left;
}

.notice-page__legal-position > p + p {
  margin-top: 0.75rem;
}

.notice-page__entity-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.35rem;
}

.notice-page__entity {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--verify-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
}

.notice-page__entity > span,
.notice-page__registration-grid section > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--verify);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.notice-page__legal-position .notice-page__entity h3 {
  margin-bottom: 0.4rem;
  color: var(--brand-900);
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.notice-page__entity p {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
}

.notice-page__registration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.2rem 0;
  border-top: 1px solid var(--color-border-strong);
}

.notice-page__registration-grid section {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.25rem) 0;
  border-bottom: 1px solid var(--color-border-strong);
}

.notice-page__registration-grid h3 {
  margin: 0 0 0.55rem;
  color: var(--brand-900);
  font-size: clamp(0.96rem, 2.2vw, 1.08rem);
  line-height: 1.55;
}

.notice-page__registration-grid p {
  color: var(--color-text);
  font-size: clamp(0.88rem, 1.8vw, 0.96rem);
  line-height: 1.85;
}

.notice-page__legal-position dl {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
}

.notice-page__legal-position dl > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 1.28fr);
  gap: 0.35rem 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(67, 99, 140, 0.18);
}

.notice-page__legal-position dt {
  color: var(--accent-deep);
  font-weight: 700;
  line-height: 1.65;
}

.notice-page__legal-position dd {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  line-height: 1.75;
}

.notice-page__legal-position .notice-page__legal-position-note {
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(67, 99, 140, 0.24);
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

@media (max-width: 600px) {
  .notice-page__legal-position dl > div {
    grid-template-columns: 1fr;
  }
}

/* タブレット縦幅までは、時系列を横スクロール表ではなく縦カードへ変換する。 */
@media (max-width: 768px) {
  .notice-page__table-wrap {
    overflow: visible;
  }

  .notice-page__timeline {
    display: block;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    background: transparent;
  }

  .notice-page__timeline caption {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 0 0.75rem;
    white-space: normal;
    overflow-wrap: normal;
  }

  .notice-page__timeline thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .notice-page__timeline tbody,
  .notice-page__timeline tr,
  .notice-page__timeline td {
    display: block;
    width: 100%;
  }

  .notice-page__timeline tr {
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(var(--brand-700-rgb), 0.16);
    border-radius: 10px;
    background: #ffffff;
  }

  .notice-page__timeline td,
  .notice-page__timeline td:first-child {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.7rem 0.75rem;
    border: 0;
    white-space: normal;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .notice-page__timeline td + td {
    border-top: 1px dashed rgba(var(--brand-700-rgb), 0.16);
  }

  .notice-page__timeline td::before {
    content: attr(data-label);
    color: var(--color-primary);
    font-weight: 700;
  }
}

@media (max-width: 374px) {
  .notice-page__timeline td,
  .notice-page__timeline td:first-child {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* 複数行になりやすいフッター本文はモバイルで左揃えにする。 */
.footer-nav-group a,
.footer-social a,
.footer-legal a,
.footer-address a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .footer-brand,
  .footer-nav-group {
    text-align: left;
  }

  .footer-logo {
    justify-content: flex-start;
  }

  .footer-nav-group ul,
  .footer-social {
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .legal-divider,
  .legal-separator {
    display: none;
  }
}

/* ============================================================
   Header brand scale (2026-07-25)
   横長ロゴをヘッダー高の範囲で大きく見せ、狭い端末では操作領域を守る。
   ============================================================ */
.header .logo {
  flex: 0 1 auto;
  min-width: 0;
}

.header .logo picture {
  width: clamp(11.25rem, 13vw, 13.75rem);
  max-width: 100%;
  flex: 0 1 auto;
}

.header .logo-img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 55px !important;
}

@media (max-width: 1024px) {
  .header .logo picture {
    width: clamp(10.25rem, 24vw, 11.25rem);
  }

  .header .logo-img {
    max-height: 45px !important;
  }
}

@media (max-width: 479px) {
  .header .logo picture {
    width: clamp(9rem, 42vw, 10.25rem);
  }

  .header .logo-img {
    max-height: 41px !important;
  }
}

@media (max-width: 340px) {
  .header .logo picture {
    width: 8.5rem;
  }

  .header .logo-img {
    max-height: 34px !important;
  }
}

/* ============================================================
   公開根拠 — editorial evidence bento
   数値の大小ではなく、検証方法・事業の歩み・支援範囲を役割別に見せる
   ============================================================ */
.trust-mega {
  background: var(--color-bg);
}

.trust-mega__inner {
  max-width: 1180px;
}

.trust-mega__eyebrow {
  border-radius: 999px;
  box-shadow: none;
}

.trust-mega__highlight {
  color: var(--brand-700);
}

.trust-mega__highlight::after {
  height: 0.36em;
  background: rgba(var(--brand-700-rgb), 0.12);
}

.trust-mega__lead {
  max-width: 48rem;
}

.trust-mega__stats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  max-width: 1100px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: left;
}

.trust-mega__stats .trust-stat {
  grid-column: span 3;
  min-width: 0;
  min-height: 250px;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  overflow: hidden;
  align-items: flex-start;
  gap: 0;
  color: var(--brand-700);
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  isolation: isolate;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.trust-mega__stats .trust-stat:hover {
  color: var(--brand-700);
  border-color: rgba(var(--brand-700-rgb), 0.45);
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
}

.trust-mega__stats .trust-stat:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 4px;
  box-shadow: var(--ring-focus);
}

.trust-mega__stats .trust-stat::after,
.trust-mega__stats .trust-stat--credly::after {
  content: attr(data-index);
  position: absolute;
  top: auto;
  right: 0.85rem;
  bottom: -0.35rem;
  z-index: -1;
  padding: 0;
  color: rgba(var(--brand-700-rgb), 0.055);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: clamp(4.5rem, 9vw, 7.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;
  transform: none;
  pointer-events: none;
}

.trust-stat__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin-bottom: auto;
  padding-bottom: 1.2rem;
}

.trust-stat__icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  color: var(--brand-700);
  background: rgba(var(--brand-700-rgb), 0.08);
  border: 1px solid rgba(var(--brand-700-rgb), 0.12);
  border-radius: 50%;
}

.trust-stat__icon svg {
  width: 1.12rem;
  height: 1.12rem;
}

.trust-stat__kicker {
  color: var(--color-text-secondary);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.13em;
}

.trust-mega__stats .trust-stat__num {
  margin: 0 0 0.4rem;
  color: var(--brand-700);
  background: none;
  font-size: clamp(2.7rem, 5.8vw, 4.25rem);
  line-height: 0.92;
  -webkit-text-fill-color: currentColor;
}

.trust-mega__stats .trust-stat__num small {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.21em;
  letter-spacing: 0.13em;
  vertical-align: 0.45em;
}

.trust-mega__stats .trust-stat__label {
  margin-bottom: 0.55rem;
  color: #20242b;
  font-size: clamp(0.94rem, 1.5vw, 1.08rem);
  line-height: 1.45;
}

.trust-mega__stats .trust-stat__sub {
  position: relative;
  z-index: 1;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: left;
}

.trust-stat__proof {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.62rem;
  color: var(--brand-700);
  background: var(--brand-100);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.trust-stat__action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin-top: 1rem;
  color: currentColor;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.trust-stat__action svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.trust-stat:hover .trust-stat__action svg {
  transform: translateX(3px);
}

.trust-mega__stats .trust-stat--history {
  grid-column: span 6;
  min-height: 300px;
  color: #ffffff;
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.trust-mega__stats .trust-stat--history:hover {
  color: #ffffff;
  border-color: var(--brand-700);
  box-shadow: var(--elev-4);
}

.trust-mega__stats .trust-stat--history:focus-visible {
  outline-color: #ffffff;
}

.trust-mega__stats .trust-stat--history::after {
  color: rgba(255, 255, 255, 0.06);
}

.trust-stat--history .trust-stat__head {
  margin-bottom: 0;
}

.trust-stat--history .trust-stat__icon {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
}

.trust-stat--history .trust-stat__kicker,
.trust-stat--history .trust-stat__sub {
  color: rgba(255, 255, 255, 0.84);
}

.trust-mega__stats .trust-stat--history .trust-stat__num,
.trust-mega__stats .trust-stat--history .trust-stat__label {
  color: #ffffff;
}

.trust-stat__milestones {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.19);
  border-bottom: 1px solid rgba(255, 255, 255, 0.19);
}

.trust-stat__milestones > span {
  min-width: 0;
  padding: 0.8rem 0.65rem;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.6;
}

.trust-stat__milestones > span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.19);
}

.trust-stat__milestones b {
  display: block;
  margin-bottom: 0.12rem;
  color: #ffffff;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.trust-mega__stats .trust-stat--support,
.trust-mega__stats .trust-stat--domains {
  grid-column: span 6;
  min-height: 205px;
}

/* 事業概要 — 経歴の要点だけを示し、詳しい年表を正規情報にする */
.company-career-summary {
  margin: 0 0 3rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--surface-2);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: var(--radius-sm);
  text-align: left;
}

.company-career-summary__header {
  max-width: 56rem;
  margin-bottom: 1.25rem;
}

.company-career-summary__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--brand-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.company-career-summary__header h4 {
  margin: 0 0 0.55rem;
  padding: 0;
  border: 0;
  color: #20242b;
  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
  line-height: 1.55;
}

.company-career-summary__header p,
.company-career-summary__item p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.company-career-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.company-career-summary__item {
  min-width: 0;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.11);
  border-radius: var(--radius-sm);
}

.company-career-summary__item--current {
  border-top: 3px solid var(--brand-700);
}

.company-career-summary__item--entity {
  background: rgba(255, 255, 255, 0.68);
  border-style: dashed;
}

.company-career-summary__tag,
.timeline-source-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
}

.company-career-summary__item strong {
  display: block;
  margin: 0.7rem 0 0.4rem;
  color: #20242b;
  font-size: 0.9rem;
  line-height: 1.55;
}

.company-career-summary__item p {
  font-size: 0.82rem;
}

.company-career-summary__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin-top: 1.1rem;
  color: var(--brand-700);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.company-career-summary__link svg {
  width: 1rem;
  height: 1rem;
}

.company-career-summary__link:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 詳しい経歴 — 現在の事業・別法人・資料区分を視覚的に分離 */
.timeline--enhanced .timeline-item {
  margin-bottom: 0.55rem;
  padding: 0.85rem 1rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.08);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.timeline--enhanced .timeline-item::before {
  top: 1.18rem;
}

.timeline--enhanced .timeline-item--milestone::before {
  top: 1.05rem;
}

.timeline--enhanced .timeline-item--entity {
  background: var(--surface-2);
  border-color: rgba(var(--brand-700-rgb), 0.2);
  border-style: dashed;
}

.timeline--enhanced .timeline-item--entity::before {
  border-radius: 3px;
  background: var(--surface-2);
}

.timeline--enhanced .timeline-item--current-business {
  background: rgba(var(--brand-700-rgb), 0.045);
  border-color: rgba(var(--brand-700-rgb), 0.32);
}

.timeline--enhanced .timeline-year {
  margin-right: 0;
  margin-left: 0;
}

.timeline-content__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.timeline-source-tag {
  min-height: 1.55rem;
  font-size: 0.64rem;
}

.timeline-source-tag--entity {
  background: #ffffff;
  border-style: dashed;
}

.timeline-source-tag--record {
  color: #274667;
  background: #e7eef5;
  border-color: rgba(39, 70, 103, 0.2);
}

.timeline-source-tag--source {
  color: #675225;
  background: #f4eedf;
  border-color: rgba(103, 82, 37, 0.2);
}

.timeline-source-tag--current {
  color: #ffffff;
  background: var(--brand-700);
  border-color: var(--brand-700);
}

@media (max-width: 960px) {
  .trust-mega__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-mega__stats .trust-stat,
  .trust-mega__stats .trust-stat--support,
  .trust-mega__stats .trust-stat--domains {
    grid-column: span 1;
  }

  .trust-mega__stats .trust-stat--history {
    grid-column: 1 / -1;
  }

  .company-career-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-career-summary__item--entity {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .trust-mega__inner {
    padding: 0 clamp(0.8rem, 4vw, 1rem);
  }

  .trust-mega__stats {
    grid-template-columns: 1fr;
  }

  .trust-mega__stats .trust-stat,
  .trust-mega__stats .trust-stat--history,
  .trust-mega__stats .trust-stat--support,
  .trust-mega__stats .trust-stat--domains {
    grid-column: 1;
    min-height: 0;
  }

  .trust-mega__stats .trust-stat {
    padding: 1.2rem;
  }

  .trust-stat__head {
    margin-bottom: 1.25rem;
  }

  .trust-stat--history .trust-stat__head {
    margin-bottom: 0;
  }

  .company-career-summary__grid {
    grid-template-columns: 1fr;
  }

  .company-career-summary__item--entity {
    grid-column: auto;
  }

  .timeline--enhanced .timeline-item {
    padding: 0.8rem 0.8rem 0.9rem;
  }
}

@media (max-width: 374px) {
  .trust-stat__milestones {
    grid-template-columns: 1fr;
  }

  .trust-stat__milestones > span + span {
    border-top: 1px solid rgba(255, 255, 255, 0.19);
    border-left: 0;
  }
}

@media (hover: none), (pointer: coarse) {
  .trust-mega__stats .trust-stat:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-mega__stats .trust-stat,
  .trust-stat__action svg {
    transition: none;
  }
}

/* 事業概要は入れ子になるため、画面ではなくコンポーネント自身の幅で段組みを決める。 */
.company-career-summary {
  container-name: career-summary;
  container-type: inline-size;
}

.company-career-summary__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.company-career-summary__item--entity {
  grid-column: auto;
}

@container career-summary (max-width: 46rem) {
  .company-career-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-career-summary__item--entity {
    grid-column: 1 / -1;
  }
}

@container career-summary (max-width: 34rem) {
  .company-career-summary__grid {
    grid-template-columns: 1fr;
  }

  .company-career-summary__item--entity {
    grid-column: auto;
  }
}

/* ============================================================
   実績指標 — 4等分カードではなく、根拠の役割が伝わるエビデンス・レジャー
   ============================================================ */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, auto));
  gap: clamp(0.7rem, 1.5vw, 0.95rem);
  max-width: 1040px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
}

.proof-stats .proof-stat {
  position: relative;
  min-width: 0;
  padding: clamp(1.1rem, 2.1vw, 1.45rem);
  overflow: hidden;
  align-items: flex-start;
  color: var(--brand-700);
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: var(--radius-sm);
  box-shadow: none;
  text-align: left;
  isolation: isolate;
}

.proof-stats .proof-stat:not(.proof-stat--history) {
  grid-column: span 7;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  grid-template-areas: "icon body action";
  align-items: center;
  column-gap: clamp(0.9rem, 2vw, 1.3rem);
  min-height: 145px;
  border-left: 3px solid rgba(var(--brand-700-rgb), 0.72);
}

.proof-stats .proof-stat--history {
  grid-column: span 5;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  min-height: 465px;
  padding: clamp(1.45rem, 3vw, 2rem);
  color: #ffffff;
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.proof-stats .proof-stat--history::after {
  content: attr(data-index);
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  z-index: -1;
  color: rgba(255, 255, 255, 0.055);
  font-family: var(--font-sans);
  font-size: clamp(8rem, 17vw, 12rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.1em;
  pointer-events: none;
}

.proof-stats .proof-stat__icon {
  grid-area: icon;
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  place-items: center;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid rgba(var(--brand-700-rgb), 0.13);
  border-radius: 50%;
}

.proof-stats .proof-stat__icon svg,
.proof-stats svg.proof-stat__icon {
  flex: 0 0 auto;
}

.proof-stats svg.proof-stat__icon {
  padding: 0.62rem;
}

.proof-stats .proof-stat--history .proof-stat__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  padding: 0.68rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
}

.proof-stat__body {
  grid-area: body;
  min-width: 0;
}

.proof-stat:not(.proof-stat--history) .proof-stat__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.8rem, 1.8vw, 1.15rem);
  align-items: end;
}

.proof-stat__kicker {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.14em;
}

.proof-stat:not(.proof-stat--history) .proof-stat__kicker {
  grid-column: 1 / -1;
  margin-bottom: 0.34rem;
}

.proof-stats .proof-stat__num {
  display: block;
  margin: 0;
  color: var(--brand-700);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.proof-stats .proof-stat__num > .stat-num {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-break: normal;
  overflow-wrap: normal;
}

.proof-stats .proof-stat__num small {
  display: inline-block;
  margin-left: 0.28rem;
  font-size: 0.4em;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: 0.25em;
}

.proof-stat__title {
  display: block;
  min-width: 0;
  color: #20242b;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  font-weight: 800;
  line-height: 1.45;
}

.proof-stats .proof-stat__label {
  grid-column: 2;
  display: block;
  margin: 0.25rem 0 0;
  color: var(--color-text-secondary);
  font-size: clamp(0.75rem, 1.25vw, 0.82rem);
  line-height: 1.65;
  text-align: left;
}

.proof-stats .proof-stat--history .proof-stat__kicker,
.proof-stats .proof-stat--history .proof-stat__label {
  color: rgba(255, 255, 255, 0.84);
}

.proof-stats .proof-stat--history .proof-stat__num {
  margin: 0.8rem 0 0.65rem;
  color: #ffffff;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.88;
}

.proof-stats .proof-stat--history .proof-stat__num small {
  font-size: 0.14em;
  letter-spacing: 0.15em;
  vertical-align: 0.62em;
}

.proof-stats .proof-stat--history .proof-stat__title {
  color: #ffffff;
  font-size: clamp(1.06rem, 2vw, 1.3rem);
}

.proof-stats .proof-stat--history .proof-stat__label {
  margin: 0.75rem 0 0;
  max-width: 25rem;
  font-size: clamp(0.78rem, 1.4vw, 0.86rem);
  line-height: 1.8;
}

.proof-stat__action {
  grid-area: action;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 44px;
  padding: 0.35rem 0.15rem;
  color: var(--brand-700);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.38);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}

.proof-stat__action svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.proof-stat__action:hover {
  color: var(--brand-700);
  border-color: currentColor;
}

.proof-stat__action:hover svg {
  transform: translateX(3px);
}

.proof-stat__action:focus-visible {
  outline: 3px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 2px;
}

.proof-stat--history .proof-stat__action {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.15rem;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.48);
}

.proof-stat--history .proof-stat__action:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.proof-stat--history .proof-stat__action:focus-visible {
  outline-color: #ffffff;
}

.proof-stat__status {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  padding: 0.28rem 0.62rem;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid rgba(var(--brand-700-rgb), 0.13);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.proof-stat__status svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .proof-stats {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .proof-stats .proof-stat--history,
  .proof-stats .proof-stat:not(.proof-stat--history) {
    grid-column: 1;
    grid-row: auto;
  }

  .proof-stats .proof-stat--history {
    min-height: 370px;
  }
}

@media (max-width: 640px) {
  .proof-stats .proof-stat:not(.proof-stat--history) {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-areas:
      "icon body"
      ". action";
    row-gap: 0.65rem;
    min-height: 0;
  }

  .proof-stats .proof-stat__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .proof-stat:not(.proof-stat--history) .proof-stat__body {
    grid-template-columns: 1fr;
  }

  .proof-stat:not(.proof-stat--history) .proof-stat__kicker,
  .proof-stat:not(.proof-stat--history) .proof-stat__label {
    grid-column: 1;
  }

  .proof-stat:not(.proof-stat--history) .proof-stat__title {
    margin-top: 0.35rem;
  }

  .proof-stats .proof-stat__label {
    margin-top: 0.3rem;
  }

  .proof-stat__action,
  .proof-stat__status {
    justify-self: start;
  }
}

@media (max-width: 374px) {
  .proof-stats .proof-stat {
    padding: 1rem;
  }

  .proof-stats .proof-stat--history {
    min-height: 350px;
    padding: 1.2rem;
  }

  .proof-stats .proof-stat--history .proof-stat__icon {
    margin-bottom: 1.7rem;
  }

  .proof-stats .proof-stat--history .proof-stat__num {
    font-size: 3.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proof-stat__action svg {
    transition: none;
  }
}

/* 資格・修了記録の掲載量を「注目5件」と誤認させない可視ラベル */
.top-certifications__featured-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  color: var(--color-text-secondary);
  font-size: clamp(0.78rem, 1.7vw, 0.88rem);
  line-height: 1.5;
  text-align: left;
}

.top-certifications__featured-heading > span {
  color: var(--brand-700);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
}

.top-certifications__featured-heading > strong {
  color: var(--color-text);
  font-family: var(--font-num);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-variant-numeric: tabular-nums lining-nums;
}

.top-certifications__featured-heading > small {
  padding-left: 0.65rem;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.92em;
}

.cert-collapse__summary-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
}

.cert-collapse__summary-text strong {
  color: var(--color-text);
  font-size: 1em;
  line-height: 1.4;
}

.cert-collapse__summary-text small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.65rem;
  color: var(--color-text-muted);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.45;
}

.cert-collapse__summary-text small > span {
  white-space: nowrap;
}

.cert-collapse__summary-text .cert-collapse__scope {
  flex-basis: 100%;
  white-space: normal;
}

@media (max-width: 480px) {
  .top-certifications__featured-heading > small {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .cert-collapse > summary {
    justify-content: flex-start;
    padding-inline: 1rem;
  }

  .cert-collapse > summary::after {
    margin-left: auto;
  }
}

/* ==========================================================================
   資格・認定ハブ: 保有量、発行元、第三者検証を一画面で把握
   ========================================================================== */
.credential-ledger {
  grid-column: 1 / -1;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(0.9rem, 2.4vw, 1.25rem);
  color: var(--color-text);
  background: linear-gradient(120deg, #fffdfa 0%, #f7f3ea 100%);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: var(--designer-shadow);
  text-align: left;
}

.credential-ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  margin-bottom: 0.9rem;
}

.credential-ledger__head span {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.credential-ledger__head h3 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  line-height: 1.45;
}

.credential-ledger__grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(360px, 1.75fr) minmax(190px, 0.95fr);
  gap: clamp(0.55rem, 1.4vw, 0.9rem);
  margin: 0;
}

.credential-ledger__item {
  display: flex;
  min-width: 0;
  min-height: 148px;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: clamp(0.8rem, 2vw, 1.05rem);
  background: rgba(255, 253, 250, 0.84);
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 16px;
}

.credential-ledger__item--primary {
  color: var(--color-text);
  background: #edf3ed;
  border-color: rgba(var(--brand-700-rgb), 0.22);
}

.credential-ledger__item--breakdown {
  background: #fffaf0;
  border-color: rgba(142, 104, 53, 0.18);
}

.credential-ledger__item--verification {
  background: #f1f5fa;
  border-color: rgba(50, 78, 114, 0.24);
}

.credential-ledger__item dt {
  display: grid;
  gap: 0.2rem;
  font-size: clamp(0.72rem, 1.45vw, 0.82rem);
  font-weight: 700;
  line-height: 1.45;
}

.credential-ledger__kicker {
  color: var(--color-text-muted);
  font-family: var(--font-num);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.credential-ledger__item dd {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.credential-ledger__item dd strong {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
  white-space: nowrap;
}

.credential-ledger__item dd span {
  font-size: 0.82rem;
  font-weight: 800;
}

.credential-ledger__item dd > small {
  display: block;
  max-width: 18em;
  margin-left: 0.25rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.55;
}

.credential-ledger__item--primary dd,
.credential-ledger__item--verification dd {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
}

.credential-ledger__item--primary dd > small,
.credential-ledger__item--verification dd > small {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
}

.credential-ledger__item dd strong {
  color: var(--brand-700);
}

.credential-ledger__equation {
  align-items: center !important;
  justify-content: space-between;
  gap: clamp(0.25rem, 1vw, 0.65rem) !important;
}

.credential-ledger__equation > b {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.credential-ledger__equation-part {
  display: grid !important;
  min-width: 0;
  gap: 0.25rem;
}

.credential-ledger__equation-part strong {
  font-size: clamp(1.7rem, 4vw, 2.5rem) !important;
}

.credential-ledger__equation-part small {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 1.2vw, 0.68rem);
  font-weight: 700;
  line-height: 1.35;
}

.credential-ledger__equation-part--total {
  padding: 0.55rem;
  background: rgba(var(--brand-700-rgb), 0.08);
  border-radius: 10px;
}

.credential-ledger__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  margin-top: 0.9rem;
}

.credential-ledger__footer p {
  max-width: 56em;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  line-height: 1.65;
}

.credential-ledger__cta {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  color: #ffffff;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.credential-ledger__cta:hover {
  color: #ffffff;
  background: var(--brand-800, #213329);
}

.credential-ledger__cta:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .top-certifications__header {
    grid-template-rows: auto auto auto auto;
  }

  .top-certifications__header .credential-ledger {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .top-certifications__header .authority-tiers {
    grid-row: 4;
  }

  .top-certifications__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .top-certifications__grid > .top-cert-card {
    grid-column: span 2;
  }

  .top-certifications__grid > .top-cert-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .top-certifications__grid > .top-cert-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

@media (max-width: 768px) {
  .credential-ledger__grid {
    grid-template-columns: 1fr;
  }

  .credential-ledger__item--primary {
    grid-column: auto;
  }

  .credential-ledger__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-ledger__cta {
    width: 100%;
  }

  .credential-ledger__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 374px) {
  .credential-ledger__grid {
    grid-template-columns: 1fr;
  }

  .credential-ledger__item--primary {
    grid-column: auto;
  }

  .credential-ledger__item {
    min-height: 118px;
  }

  .credential-ledger__equation {
    flex-wrap: wrap;
  }
}

/* 長い認定名を省略せず、証明書名を最後まで読めるようにする。 */
.credly-badge-card__name {
  display: block;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.cert-verify-list {
  max-width: 1120px;
  border-radius: var(--radius-sm);
  box-shadow: var(--designer-shadow);
}

.cert-verify-list__summary {
  gap: clamp(0.65rem, 1.8vw, 1rem);
  padding: clamp(0.9rem, 2.5vw, 1.25rem);
  background: var(--surface-2);
  text-align: left;
}

.cert-verify-list__summary > svg {
  width: 24px;
  height: 24px;
}

.cert-verify-list__count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 0.15rem;
  color: var(--brand-700);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
}

.cert-verify-list__count strong {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.cert-verify-list__count small {
  font-size: 0.72rem;
  font-weight: 800;
}

.cert-verify-list__summary-text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
}

.cert-verify-list__summary-text strong {
  color: var(--color-text);
  font-size: clamp(0.95rem, 2.5vw, 1.12rem);
  line-height: 1.35;
}

.cert-verify-list__summary-text small {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
}

.cert-verify-list__body {
  padding: 0.4rem clamp(0.75rem, 2.5vw, 1.4rem) 1.5rem;
}

.cert-verify-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin: 1rem 0 1.25rem;
  padding: 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.cert-verify-tools__label {
  display: flex;
  width: min(100%, 520px);
  flex-direction: column;
  gap: 0.35rem;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 800;
}

.cert-verify-tools__input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1.5px solid #718e9f;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.88rem;
}

.cert-verify-tools__input:focus-visible {
  outline: 3px solid rgba(var(--brand-700-rgb), 0.2);
  outline-offset: 1px;
  border-color: var(--brand-700);
}

.cert-verify-tools__status {
  flex: 0 0 auto;
  margin: 0 0 0.7rem;
  color: var(--color-text-muted);
  font-family: var(--font-num);
  font-size: 0.76rem;
  font-weight: 700;
}

.cert-verify-item {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

.cert-verify-item--has-issuer-logo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  gap: 0.25rem 0.75rem;
  padding: 1rem;
}

.cert-verify-item--has-issuer-logo > :not(.cert-verify-item__issuer-marks) {
  grid-column: 2;
}

.cert-verify-item--has-issuer-logo .cert-verify-item__name::before {
  content: none;
}

.cert-verify-item__issuer-marks {
  position: relative;
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
}

.cert-verify-item__issuer-picture {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 10px;
  box-shadow: 0 3px 10px -6px rgba(var(--brand-700-rgb), 0.45);
}

.cert-verify-item__issuer-picture:first-child {
  top: 0;
  left: 0;
}

.cert-verify-item__issuer-picture:last-child:not(:first-child) {
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.cert-verify-item__issuer-picture:only-child {
  width: 48px;
  height: 48px;
}

.cert-verify-item__issuer-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cert-verify-item__name {
  min-width: 0;
}

.cert-verify-item__meta {
  color: var(--color-text-muted);
  line-height: 1.6;
}

.cert-verify-item__link {
  width: fit-content;
  margin-top: 0.55rem;
  padding: 0.45rem 0.7rem;
  color: var(--brand-700);
  background: rgba(var(--brand-700-rgb), 0.07);
  border: 1px solid rgba(var(--brand-700-rgb), 0.24);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.cert-verify-item__link:hover {
  background: rgba(var(--brand-700-rgb), 0.12);
  border-color: var(--brand-700);
}

.cert-verify-item__details {
  margin-top: 0.35rem;
  border-top: 1px solid var(--color-border);
}

.cert-verify-item__details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent-deep);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  list-style: none;
}

.cert-verify-item__details > summary::-webkit-details-marker {
  display: none;
}

.cert-verify-item__details > summary::before {
  content: "+";
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-num);
  line-height: 1;
}

.cert-verify-item__details[open] > summary::before {
  content: "−";
}

.cert-verify-item__details > summary:focus-visible {
  outline: 2.5px solid var(--color-primary-light);
  outline-offset: 2px;
}

.cert-verify-item__details .cert-verify-item__desc {
  margin: 0 0 0.7rem;
  padding-left: 0;
}

.cert-verify-item[hidden],
.cert-verify-group[hidden] {
  display: none !important;
}

.issuer-showcase {
  max-width: 1120px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.issuer-showcase__head {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: 1rem;
  text-align: left;
}

.issuer-showcase__eyebrow {
  grid-column: 1 / -1;
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
}

.issuer-showcase__head h4 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.1rem, 2.7vw, 1.45rem);
  line-height: 1.4;
}

.issuer-showcase__head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.7;
}

.issuer-showcase__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.issuer-showcase__item {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.issuer-showcase__item picture,
.issuer-showcase__item img {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.issuer-showcase__item img {
  object-fit: contain;
  background: #ffffff;
  border: 1px solid rgba(var(--brand-700-rgb), 0.14);
  border-radius: 10px;
}

.issuer-showcase__note {
  margin: 0.85rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.65;
  text-align: left;
}

@media (max-width: 1024px) {
  .issuer-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cert-verify-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .cert-verify-tools__status {
    margin: 0;
  }

  .issuer-showcase__head {
    display: block;
  }

  .issuer-showcase__head h4 {
    margin-top: 0.35rem;
  }

  .issuer-showcase__head p {
    margin-top: 0.45rem;
  }

  .issuer-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issuer-showcase__item {
    min-height: 66px;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.7rem;
  }

  .issuer-showcase__item picture,
  .issuer-showcase__item img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

@media (max-width: 480px) {
  .cert-verify-list__summary > svg {
    display: none;
  }

  .cert-verify-item--has-issuer-logo {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 0.65rem;
    padding: 0.85rem;
  }

  .cert-verify-item__issuer-marks {
    width: 40px;
    height: 40px;
  }

  .cert-verify-item__issuer-picture:only-child {
    width: 40px;
    height: 40px;
  }

  .cert-verify-item__issuer-picture:first-child:not(:only-child) {
    width: 34px;
    height: 34px;
  }

  .cert-verify-item--has-issuer-logo > .cert-verify-item__link,
  .cert-verify-item--has-issuer-logo > .cert-verify-item__details {
    grid-column: 1 / -1;
  }

  .cert-verify-item__link {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .credential-ledger__cta,
  .issuer-showcase__item,
  .cert-verify-item__link {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .credential-ledger,
  .credential-ledger__item,
  .cert-verify-list,
  .cert-verify-item,
  .issuer-showcase,
  .issuer-showcase__item {
    border-color: currentColor;
  }
}

@media print {
  .cert-verify-list > .cert-verify-list__body,
  .cert-verify-item__details > .cert-verify-item__desc {
    display: block !important;
  }

  .cert-verify-tools,
  .cert-verify-item__details > summary {
    display: none !important;
  }
}

/* ============================================================
   Credential-forward art direction (2026-08-20)
   説明は短く、資格そのものは常時見える。
   色数ではなく、サイズ差・ロゴ・罫線・余白でリズムをつくる。
   ============================================================ */

/* Hero: 右の証拠を上段、資格ウォールを全幅の下段へ */
.hero-creds {
  width: 100%;
  max-width: none;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: rgba(255, 254, 250, 0.9);
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 旧の能力インデックスは、常時表示の資格ウォールと表示領域が重なるため収束 */
.ai-orb.axis-index {
  display: none !important;
}

.hero-creds__label {
  margin: 0 0 0.75rem;
  color: var(--brand-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero-creds__overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr) minmax(0, 0.95fr);
  gap: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: var(--radius-sm);
}

.hero-creds__overview p {
  min-height: 94px;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  align-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hero-creds__overview p + p {
  border-left: 1px solid rgba(var(--brand-700-rgb), 0.14);
}

.hero-creds__overview strong {
  font-size: clamp(1.75rem, 4vw, 3.1rem);
  letter-spacing: -0.055em;
}

.hero-creds__overview span {
  max-width: 24em;
  color: var(--color-text-secondary);
  font-size: clamp(0.74rem, 1.4vw, 0.84rem);
  line-height: 1.45;
}

.hero-creds__showcase {
  margin-top: clamp(0.85rem, 2vw, 1.2rem);
}

.hero-creds__showcase-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0 0.1rem 0.7rem;
}

.hero-creds__showcase-head strong {
  color: var(--color-text);
  font-size: clamp(0.95rem, 2vw, 1.12rem);
}

.hero-creds__showcase-head span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-creds__showcase .hero-creds__grid {
  margin: 0;
  padding: 0;
}

.hero-cred {
  min-width: 0;
}

.hero-cred__link {
  position: relative;
  min-height: 152px;
  justify-content: center;
  gap: 0.42rem;
  padding: 1rem 0.75rem 0.85rem;
  overflow: hidden;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.hero-cred__link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(var(--brand-700-rgb), 0.56);
}

.hero-cred__mark {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
}

.hero-cred__name {
  max-width: 20em;
  color: var(--color-text);
  font-size: clamp(0.78rem, 1.35vw, 0.9rem);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.hero-cred__issuer {
  color: var(--color-text-muted);
  font-size: clamp(0.7rem, 1.1vw, 0.78rem);
  line-height: 1.4;
}

.hero-cred__verify {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-grid;
  width: 32px;
  height: 32px;
  margin: 0;
  place-items: center;
  color: var(--brand-700);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(var(--brand-700-rgb), 0.18);
  border-radius: 50%;
  font-size: 0;
  opacity: 1;
}

.hero-cred__verify svg {
  width: 13px;
  height: 13px;
}

.hero-creds__footer {
  display: flex;
  max-width: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.hero-creds__more {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
}

.hero-creds__links {
  flex: 0 0 auto;
}

.hero-creds__link {
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  background: var(--color-bg-card);
  font-size: 0.76rem;
}

@media (min-width: 960px) {
  .hero-evidence {
    display: contents;
  }

  .hero-main {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-stats {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .hero-creds {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    z-index: 1;
  }

  .hero-creds__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.25vw, 0.8rem);
  }

  .hero-creds__grid > .hero-cred {
    grid-column: span 2;
  }

  .hero-creds__grid > .hero-cred:nth-child(1),
  .hero-creds__grid > .hero-cred:nth-child(5) {
    grid-column: span 3;
  }

  .hero-creds__grid > .hero-cred:nth-child(1) .hero-cred__link,
  .hero-creds__grid > .hero-cred:nth-child(5) .hero-cred__link {
    background: var(--surface-2);
    border-color: rgba(var(--brand-700-rgb), 0.26);
  }

  .hero-creds__grid > .hero-cred:nth-child(1) .hero-cred__mark,
  .hero-creds__grid > .hero-cred:nth-child(5) .hero-cred__mark {
    width: 76px;
    height: 76px;
  }
}

@media (min-width: 769px) and (max-width: 959px) {
  .hero-creds__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hero-creds__overview {
    grid-template-columns: 1fr 1fr;
  }

  .hero-creds__overview p:first-child {
    grid-column: 1 / -1;
  }

  .hero-creds__overview p:nth-child(2) {
    border-left: 0;
    border-top: 1px solid rgba(var(--brand-700-rgb), 0.14);
  }

  .hero-creds__overview p:nth-child(3) {
    border-top: 1px solid rgba(var(--brand-700-rgb), 0.14);
  }

  .hero-creds__showcase-head {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
  }

  .hero-creds__grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(158px, auto));
    grid-auto-columns: minmax(148px, 46%);
    grid-auto-flow: column;
    gap: 0.55rem;
    padding: 0 0 0.65rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .hero-creds__grid > .hero-cred {
    grid-column: auto;
    scroll-snap-align: start;
  }

  .hero-cred__link {
    min-height: 158px;
  }

  .hero-creds__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-creds__links {
    width: 100%;
  }
}

@media (max-width: 374px) {
  .hero-creds__overview {
    grid-template-columns: 1fr;
  }

  .hero-creds__overview p,
  .hero-creds__overview p:nth-child(2),
  .hero-creds__overview p:nth-child(3) {
    grid-column: 1;
    border-top: 1px solid rgba(var(--brand-700-rgb), 0.14);
    border-left: 0;
  }

  .hero-creds__overview p:first-child {
    border-top: 0;
  }

  .hero-creds__grid {
    grid-template-columns: none;
    grid-auto-columns: minmax(142px, 78%);
  }
}

/* Smart Shrink: 説明カード群ではなく、DX → AX → HUMAN の一本の経路 */
.smart-shrink {
  max-width: 1080px;
  border-radius: var(--radius-sm);
}

.smart-shrink__summary {
  grid-template-columns: minmax(190px, 0.4fr) minmax(0, 1.6fr);
  padding: clamp(1.1rem, 2.8vw, 1.55rem);
  background: var(--surface-2);
}

.smart-shrink__headline strong {
  font-size: clamp(1.15rem, 2.7vw, 1.65rem);
  line-height: 1.4;
}

.smart-shrink__headline small {
  font-size: clamp(0.78rem, 1.4vw, 0.88rem);
}

.smart-shrink__intro {
  max-width: 56em !important;
  color: var(--color-text) !important;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem) !important;
  line-height: 1.8 !important;
}

.smart-shrink__principles {
  position: relative;
  gap: 0;
  margin-top: 1.35rem;
  border-block: 1px solid rgba(var(--brand-700-rgb), 0.18);
}

.smart-shrink__principles li,
.smart-shrink__principles li:nth-child(2),
.smart-shrink__principles li:nth-child(3) {
  position: relative;
  min-height: 132px;
  align-content: center;
  gap: 0.55rem;
  padding: 1.2rem clamp(1rem, 2.5vw, 1.45rem);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.smart-shrink__principles li + li {
  border-left: 1px solid rgba(var(--brand-700-rgb), 0.18);
}

.smart-shrink__principles li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -0.65rem;
  z-index: 1;
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  color: var(--brand-700);
  background: var(--color-bg-card);
  font-weight: 800;
  transform: translateY(-50%);
}

.smart-shrink__principles span {
  font-size: 0.76rem;
}

.smart-shrink__principles strong {
  font-size: clamp(0.9rem, 1.65vw, 1.02rem);
}

.smart-shrink__term-note {
  width: fit-content;
  margin-top: 0.75rem !important;
  padding: 0.22rem 0.55rem;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 0.74rem !important;
}

.smart-shrink__manifesto {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1.58fr);
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.8rem);
  background: var(--brand-700);
  border-color: var(--brand-700);
  border-radius: var(--radius-sm);
}

.smart-shrink__manifesto > span,
.smart-shrink__manifesto p,
.smart-shrink__manifesto strong {
  color: #ffffff;
}

.smart-shrink__manifesto > span {
  margin: 0;
  line-height: 1.65;
}

.smart-shrink__manifesto p {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.7;
}

.smart-shrink__promise-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.16);
}

.smart-shrink__promise-list li {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  border-top: 0;
}

.smart-shrink__promise-list li + li {
  border-left: 1px solid rgba(var(--brand-700-rgb), 0.16);
}

.smart-shrink__promise-list small {
  font-size: 0.875rem;
}

@media (max-width: 760px) {
  .smart-shrink__summary,
  .smart-shrink__manifesto {
    grid-template-columns: 1fr;
  }

  .smart-shrink__principles,
  .smart-shrink__promise-list {
    grid-template-columns: 1fr;
  }

  .smart-shrink__principles li,
  .smart-shrink__principles li:nth-child(2),
  .smart-shrink__principles li:nth-child(3),
  .smart-shrink__promise-list li {
    min-height: 0;
  }

  .smart-shrink__principles li + li,
  .smart-shrink__promise-list li + li {
    border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
    border-left: 0;
  }

  .smart-shrink__principles li:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 1rem;
    bottom: -0.65rem;
    transform: none;
  }
}

/* Qualification hub: 大きな数字と非対称ベントー */
.credential-ledger {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-sm);
}

.credential-ledger__head {
  margin: 0;
  padding: 1rem clamp(1rem, 2.5vw, 1.35rem);
  background: var(--surface-2);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.14);
}

.credential-ledger__grid {
  gap: 0;
}

.credential-ledger__item,
.credential-ledger__item--primary,
.credential-ledger__item--breakdown,
.credential-ledger__item--verification {
  min-height: 170px;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  background: var(--color-bg-card);
  border: 0;
  border-radius: 0;
}

.credential-ledger__item + .credential-ledger__item {
  border-left: 1px solid rgba(var(--brand-700-rgb), 0.16);
}

.credential-ledger__item--primary {
  color: #ffffff;
  background: var(--brand-700);
}

.credential-ledger__item--primary dt,
.credential-ledger__item--primary .credential-ledger__kicker,
.credential-ledger__item--primary dd strong,
.credential-ledger__item--primary dd span,
.credential-ledger__item--primary dd > small {
  color: #ffffff;
}

.credential-ledger__item dd strong {
  font-size: clamp(3rem, 6vw, 5rem);
}

.credential-ledger__equation-part strong {
  font-size: clamp(2rem, 4.2vw, 3rem) !important;
}

.credential-ledger__kicker,
.credential-ledger__item dd > small {
  font-size: 0.72rem;
}

.credential-ledger__footer {
  margin: 0;
  padding: 0.85rem clamp(1rem, 2.5vw, 1.35rem);
  background: var(--surface-2);
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.14);
}

.credential-ledger__footer p {
  font-size: 0.8rem;
}

@media (min-width: 900px) {
  .top-certifications__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(192px, auto);
  }

  .top-certifications__grid > .top-cert-card,
  .top-certifications__grid > .top-cert-card:nth-child(4),
  .top-certifications__grid > .top-cert-card:nth-child(5) {
    grid-column: span 4;
  }

  .top-certifications__grid > .top-cert-card:first-child {
    grid-row: span 2;
    grid-template-columns: 1fr;
    grid-template-areas:
      "rank"
      "logo"
      "body"
      "verify";
    align-content: space-between;
    padding: clamp(1.35rem, 2.8vw, 1.8rem);
    color: #ffffff;
    background: var(--brand-700);
    border-color: var(--brand-700);
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__logo--badge {
    width: clamp(104px, 10vw, 132px);
    height: clamp(104px, 10vw, 132px);
    margin: 0.65rem auto;
    background: rgba(255, 255, 255, 0.96);
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__body {
    gap: 0.45rem;
    text-align: center;
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__rank {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: none;
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__issuer,
  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__name,
  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__meta {
    color: #ffffff;
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__meta {
    opacity: 0.84;
  }

  .top-certifications__grid > .top-cert-card:first-child .top-cert-card__verify {
    justify-self: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.42);
  }
}

.top-cert-card {
  min-height: 192px;
  border-top-width: 3px;
}

.top-cert-card__rank {
  font-size: 0.7rem;
}

.top-cert-card__issuer,
.top-cert-card__meta {
  font-size: 0.8125rem;
}

.top-cert-card__verify {
  font-size: 0.875rem;
}

.top-cert-card__name {
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
}

/* Credly 11: 巨大な見出し + バッジウォール */
.credly-dashboard--spotlight {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem clamp(1.25rem, 3vw, 2.4rem);
  max-width: 1200px;
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-2);
  border-color: rgba(var(--brand-700-rgb), 0.2);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.credly-dashboard--spotlight::before {
  content: none;
}

.credly-dashboard--spotlight .credly-dashboard__header {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  text-align: left;
}

.credly-dashboard--spotlight .credly-dashboard__eyebrow {
  padding: 0;
  color: var(--brand-700);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.credly-dashboard--spotlight .credly-dashboard__title {
  margin-top: 1rem;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  line-height: 1.25;
}

.credly-dashboard--spotlight .credly-dashboard__count {
  display: block;
  width: fit-content;
  margin: 0 0 0.25rem;
  padding: 0;
  color: var(--brand-700);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-num);
  font-size: clamp(3.8rem, 7vw, 6rem);
  letter-spacing: -0.07em;
  line-height: 0.85;
}

.credly-dashboard--spotlight .credly-dashboard__lead {
  margin: 0.85rem 0 0;
  font-size: 0.84rem;
}

.credly-dashboard--spotlight .credly-dashboard__grid {
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.credly-dashboard--spotlight .credly-badge-card {
  min-height: 210px;
  gap: 0.35rem;
  padding: 0.85rem 0.65rem;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.credly-dashboard--spotlight .credly-badge-card picture,
.credly-dashboard--spotlight .credly-badge-card img {
  width: 78px;
  height: 78px;
}

.credly-dashboard--spotlight .credly-badge-card__name {
  min-height: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.credly-dashboard--spotlight .credly-badge-card__issuer,
.credly-dashboard--spotlight .credly-badge-card__date {
  font-size: 0.7rem;
}

.credly-dashboard--spotlight .credly-badge-card--featured::after {
  content: none;
}

.credly-dashboard--spotlight .credly-dashboard__sync-note {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}

.cert-collapse {
  margin-top: 1rem;
}

.credential-supplement {
  padding: clamp(0.5rem, 2vw, 1rem) clamp(0.75rem, 2.5vw, 1.25rem) 1.25rem;
}

.coursera-evidence-preview {
  padding-top: 1rem;
}

.coursera-evidence-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.coursera-evidence-preview__head span {
  color: var(--brand-700);
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.coursera-evidence-preview__head h3 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
}

.coursera-evidence-preview .credly-dashboard__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.coursera-evidence-preview .credly-badge-card {
  min-height: 235px;
  padding: 1rem 0.65rem;
}

@media (max-width: 900px) {
  .credly-dashboard--spotlight {
    grid-template-columns: 1fr;
  }

  .credly-dashboard--spotlight .credly-dashboard__header,
  .credly-dashboard--spotlight .credly-dashboard__grid,
  .credly-dashboard--spotlight .credly-dashboard__sync-note {
    grid-column: 1;
    grid-row: auto;
  }

  .credly-dashboard--spotlight .credly-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .coursera-evidence-preview .credly-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .credential-ledger__item + .credential-ledger__item {
    border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
    border-left: 0;
  }

  .credly-dashboard--spotlight {
    padding: 1rem;
  }

  .credly-dashboard--spotlight .credly-dashboard__grid {
    display: grid;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, minmax(190px, auto));
    grid-auto-columns: minmax(148px, 46%);
    grid-auto-flow: column;
    gap: 0.55rem;
    padding-bottom: 0.65rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .credly-dashboard--spotlight .credly-badge-card {
    min-height: 190px;
    scroll-snap-align: start;
  }

  .credly-dashboard--spotlight .credly-badge-card picture,
  .credly-dashboard--spotlight .credly-badge-card img {
    width: 68px;
    height: 68px;
  }

  .coursera-evidence-preview__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .coursera-evidence-preview .credly-dashboard__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 374px) {
  .credly-dashboard--spotlight .credly-dashboard__grid {
    grid-template-columns: none !important;
    grid-auto-columns: minmax(142px, 78%);
  }

  .coursera-evidence-preview .credly-dashboard__grid {
    grid-template-columns: 1fr;
  }
}

/* Issuer constellation: ロゴを罫線上に並べ、発行元の広がりを視覚化 */
.issuer-showcase {
  background: transparent;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

.issuer-showcase__grid {
  gap: 0;
  border-top: 1px solid rgba(var(--brand-700-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--brand-700-rgb), 0.16);
}

.issuer-showcase__item {
  min-height: 92px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.issuer-showcase__item + .issuer-showcase__item {
  border-left: 1px solid rgba(var(--brand-700-rgb), 0.13);
}

.issuer-showcase__item picture,
.issuer-showcase__item img {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

/* Search / AI: 長い説明を減らし、2つの設計層を編集的に対比 */
@media (min-width: 860px) {
  .search-era__header {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto;
    max-width: 1100px;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
  }

  .search-era__badge,
  .search-era__title {
    grid-column: 1;
  }

  .search-era__lead,
  .search-era__stance {
    grid-column: 2;
  }

  .search-era__lead {
    grid-row: 1;
    align-self: end;
    padding-left: 1.4rem;
    border-left: 1px solid rgba(var(--brand-700-rgb), 0.2);
  }

  .search-era__stance {
    grid-row: 2;
    align-self: start;
    margin-top: 0.65rem;
  }
}

.search-era__compare {
  background: transparent;
  border-inline: 0;
  border-radius: 0;
}

.search-era__column {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.search-era__column::after {
  position: absolute;
  right: 0.06em;
  bottom: -0.23em;
  color: rgba(var(--brand-700-rgb), 0.07);
  font-family: var(--font-num);
  font-size: clamp(7rem, 15vw, 11rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.search-era__column--old::after {
  content: "01";
}

.search-era__column--new::after {
  content: "02";
}

.search-era__col-head,
.search-era__list {
  position: relative;
  z-index: 1;
}

.search-era__list li {
  padding-block: 0.55rem;
}

.search-era__glossary > summary strong {
  font-size: clamp(0.82rem, 1.8vw, 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .hero-cred__link,
  .top-cert-card,
  .credly-dashboard--spotlight .credly-badge-card {
    transition: none;
  }
}

@media print {
  .hero-creds__grid,
  .credly-dashboard--spotlight .credly-dashboard__grid {
    overflow: visible;
  }
}

/* ======================================================================
   Sky & horizon direction — homepage visual layer (2026-08-26)
   Inspired by the reference site's atmospheric depth, restrained white
   navigation, blue-to-mint fields and editorial Japanese typography.
   The page content and DOM remain unchanged.
====================================================================== */

body:has(> main .hero) {
  --sky-navy: #03184d;
  --sky-navy-deep: #020f36;
  --sky-blue: #086dc4;
  --sky-blue-bright: #1689db;
  --sky-cyan: #a9ddf1;
  --sky-mint: #cdeecf;
  --sky-mint-deep: #72bba6;
  --sky-cloud: #f7fbfc;
  --sky-white: #ffffff;
  --sky-ink: #15476a;
  --sky-ink-deep: #0b3558;
  --sky-muted: #4b6d84;
  --sky-rule: rgba(21, 71, 106, 0.18);
  --sky-rule-soft: rgba(21, 71, 106, 0.1);
  --sky-glass: rgba(255, 255, 255, 0.72);
  --sky-glass-strong: rgba(255, 255, 255, 0.9);
  --sky-serif: "Noto Serif JP", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", Georgia, serif;
  --sky-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "YuGothic", system-ui, sans-serif;
  --sky-rail: 156px;
  --color-bg: var(--sky-white);
  --color-bg-secondary: #e6f2f5;
  --color-bg-card: var(--sky-glass);
  --color-bg-card-hover: var(--sky-glass-strong);
  --color-text: var(--sky-ink);
  --color-text-secondary: #365f7b;
  --color-text-muted: var(--sky-muted);
  --color-border: var(--sky-rule);
  --color-border-light: var(--sky-rule-soft);
  --color-border-strong: rgba(21, 71, 106, 0.32);
  --brand-900: var(--sky-navy-deep);
  --brand-800: var(--sky-navy);
  --brand-700: var(--sky-ink-deep);
  --brand-700-rgb: 11, 53, 88;
  --brand-600: var(--sky-ink);
  --brand-500: var(--sky-blue);
  --brand-100: #d8edf5;
  --brand-50: #eef7fa;
  --accent: var(--sky-blue);
  --accent-deep: #04549d;
  --accent-50: #e5f3fb;
  --card-radius: 4px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --elev-1: none;
  --elev-2: none;
  --elev-3: none;
  --elev-4: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  color: var(--sky-ink);
  background: var(--sky-white);
  font-family: var(--sky-sans);
}

body:has(> main .hero) main {
  display: block !important;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body:has(> main .hero) .container {
  width: 100%;
  max-width: 1380px;
  padding-inline: clamp(1.25rem, 4.6vw, 5rem);
}

/* White navigation rail on wide screens; compact white bar elsewhere. */
body:has(> main .hero) .header {
  color: var(--sky-ink-deep);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--sky-rule-soft);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body:has(> main .hero) .header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
}

body:has(> main .hero) .header-inner {
  max-width: 1540px;
  padding-inline: clamp(1rem, 2.5vw, 2.75rem);
}

body:has(> main .hero) .logo-img {
  filter: none;
}

body:has(> main .hero) .nav-list {
  gap: clamp(0.35rem, 0.9vw, 1rem);
}

body:has(> main .hero) .nav-list a {
  min-height: 44px;
  padding-inline: 0.35rem;
  color: var(--sky-ink-deep);
  font-size: clamp(0.7rem, 0.66rem + 0.1vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.035em;
}

body:has(> main .hero) .nav-list a:not(.nav-cta)::after {
  height: 1px;
  background: var(--sky-blue);
}

body:has(> main .hero) .nav-list .nav-cta {
  padding-inline: 1rem;
  color: var(--sky-white);
  background: var(--sky-ink-deep);
  border: 1px solid var(--sky-ink-deep);
  border-radius: 999px;
}

body:has(> main .hero) .nav-list .nav-cta:hover,
body:has(> main .hero) .nav-list .nav-cta:focus-visible {
  color: var(--sky-ink-deep) !important;
  background: transparent;
}

body:has(> main .hero) .lang-picker-toggle {
  min-height: 44px;
  color: var(--sky-ink-deep);
  background: transparent;
  border: 1px solid var(--sky-rule);
  border-radius: 999px;
  box-shadow: none;
}

body:has(> main .hero) .mobile-menu-btn {
  color: var(--sky-ink-deep);
  background: transparent;
  border-color: var(--sky-rule);
}

body:has(> main .hero) .hamburger span {
  background: var(--sky-ink-deep);
}

@media (min-width: 1180px) {
  body:has(> main .hero) .header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sky-rail);
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid var(--sky-rule-soft);
    border-bottom: 0;
  }

  body:has(> main .hero) .header-inner {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.5rem 1rem 1.25rem;
  }

  body:has(> main .hero) .logo {
    order: 1;
    width: 100%;
    margin: 0 0 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sky-rule-soft);
  }

  body:has(> main .hero) .logo picture,
  body:has(> main .hero) .logo-img {
    width: 100%;
    max-width: 124px;
    height: auto;
    margin-inline: auto;
  }

  body:has(> main .hero) .nav {
    position: static;
    display: block;
    order: 3;
    width: 100%;
    margin: 0;
    color: var(--sky-ink-deep);
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  body:has(> main .hero) .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  body:has(> main .hero) .nav-list li {
    width: 100%;
    border-bottom: 1px solid var(--sky-rule-soft);
  }

  body:has(> main .hero) .nav-list a,
  body:has(> main .hero) .nav-list .nav-cta {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0.55rem 0.35rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.7rem;
    line-height: 1.35;
  }

  body:has(> main .hero) .nav-list .nav-cta {
    color: var(--sky-blue);
  }

  body:has(> main .hero) .nav-list .nav-cta::before {
    content: "↗";
    margin-right: 0.5rem;
  }

  body:has(> main .hero) .nav-list a:hover,
  body:has(> main .hero) .nav-list a:focus-visible,
  body:has(> main .hero) .nav-list .nav-cta:hover,
  body:has(> main .hero) .nav-list .nav-cta:focus-visible {
    color: var(--sky-white) !important;
    background: var(--sky-blue);
  }

  body:has(> main .hero) .lang-switch {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    margin: 0 0 1.25rem;
  }

  body:has(> main .hero) .lang-picker-toggle {
    width: 100%;
    justify-content: center;
    padding-inline: 0.5rem;
    border-radius: 0;
  }

  body:has(> main .hero) .lang-picker-menu {
    top: 0;
    right: auto;
    bottom: auto;
    left: calc(100% + 0.75rem);
    width: min(240px, calc(100vw - var(--sky-rail) - 1.5rem));
    max-height: min(70vh, 630px);
    overflow-y: auto;
  }

  body:has(> main .hero) .mobile-menu-btn {
    display: none;
  }

  body:has(> main .hero) main,
  body:has(> main .hero) .footer {
    width: auto;
    margin-left: var(--sky-rail);
  }

  body:has(> main .hero) main {
    padding-top: 0;
  }

  body:has(> main .hero) :is(.trust-banner, .sticky-cta-mobile) {
    left: var(--sky-rail);
  }
}

/* Section route strip stays in DOM order as an airport-style wayfinding band. */
body:has(> main .hero) .page-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  margin-top: 0;
  color: var(--sky-ink-deep);
  background: rgba(255, 255, 255, 0.92);
  border-block: 1px solid var(--sky-rule-soft);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body:has(> main .hero) .page-nav .container {
  max-width: 1480px;
  padding-inline: 0;
}

body:has(> main .hero) .page-nav__list {
  justify-content: stretch;
  gap: 0;
}

body:has(> main .hero) .page-nav__list > li {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .page-nav__list > li:first-child {
  border-left: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .page-nav__link {
  min-height: 58px;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.45rem;
  color: var(--sky-ink-deep);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(0.66rem, 0.62rem + 0.1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

body:has(> main .hero) .page-nav__num {
  width: auto;
  min-width: 1.15rem;
  height: auto;
  color: var(--sky-blue);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--sky-serif);
  font-size: 0.8em;
}

body:has(> main .hero) .page-nav__link:hover,
body:has(> main .hero) .page-nav__link:focus-visible,
body:has(> main .hero) .page-nav__link.is-active,
body:has(> main .hero) .page-nav__link--cta {
  color: var(--sky-white);
  background: var(--sky-blue);
}

body:has(> main .hero) .page-nav__link:hover .page-nav__num,
body:has(> main .hero) .page-nav__link:focus-visible .page-nav__num,
body:has(> main .hero) .page-nav__link.is-active .page-nav__num,
body:has(> main .hero) .page-nav__link--cta .page-nav__num {
  color: currentColor;
  background: transparent;
}

/* Hero: deep sky, distant horizon and a translucent evidence cockpit. */
body:has(> main .hero) .hero {
  isolation: isolate;
  display: block;
  min-height: max(100vh, 980px);
  min-height: max(100dvh, 980px);
  padding: clamp(5.5rem, 9vw, 9rem) 0 clamp(7rem, 12vw, 12rem);
  color: var(--sky-white);
  background:
    radial-gradient(circle at 76% 38%, rgba(116, 213, 242, 0.42), transparent 23%),
    linear-gradient(180deg, var(--sky-navy-deep) 0%, var(--sky-navy) 21%, #0757a9 52%, #238fd2 72%, #a4dedb 100%);
  background-color: var(--sky-navy-deep);
  border: 0;
  overflow: hidden;
}

body:has(> main .hero) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(2, 15, 54, 0.72) 0%, rgba(3, 24, 77, 0.28) 48%, rgba(3, 24, 77, 0.08) 100%),
    linear-gradient(180deg, rgba(2, 15, 54, 0.42) 0%, transparent 54%, rgba(139, 221, 220, 0.24) 100%);
  transform: none;
  pointer-events: none;
}

body:has(> main .hero) .hero::after {
  content: "";
  position: absolute;
  top: clamp(5rem, 9vw, 8.5rem);
  right: clamp(2rem, 8vw, 8rem);
  z-index: 1;
  width: clamp(13rem, 23vw, 22rem);
  height: clamp(18rem, 32vw, 31rem);
  background:
    linear-gradient(180deg, rgba(193, 232, 246, 0.82) 0%, rgba(255, 255, 255, 0.62) 46%, rgba(0, 111, 199, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 48% 48% 45% 45% / 22% 22% 30% 30%;
  box-shadow: 0 0 90px rgba(121, 214, 242, 0.2);
  opacity: 0.42;
  mix-blend-mode: screen;
  transform: rotate(2deg);
  pointer-events: none;
}

body:has(> main .hero) .hero-vista {
  position: absolute;
  inset: 18% 0 0;
  z-index: 0;
  opacity: 0.6;
  filter: saturate(0.86) hue-rotate(156deg) contrast(1.06) brightness(0.62);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 38%, transparent 69%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 38%, transparent 69%);
}

body:has(> main .hero) .hero-vista picture,
body:has(> main .hero) .hero-vista img {
  width: 100%;
  height: 100%;
}

body:has(> main .hero) .hero-vista img {
  object-fit: cover;
  object-position: center 22%;
}

body:has(> main .hero) .hero-ambient {
  z-index: 1;
  opacity: 0.38;
  mix-blend-mode: screen;
}

body:has(> main .hero) .hero-ambient__orb {
  filter: blur(2px);
}

body:has(> main .hero) .hero-foresight {
  z-index: 2;
  opacity: 0.2;
  filter: grayscale(1) brightness(4);
  mix-blend-mode: screen;
}

body:has(> main .hero) .hero > .container {
  position: relative;
  z-index: 3;
}

body:has(> main .hero) .hero-content {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 0.96fr) minmax(27rem, 1.04fr);
  align-items: start;
  gap: clamp(3.5rem, 7vw, 8rem);
  padding: 0;
  margin: 0;
}

body:has(> main .hero) .hero-main,
body:has(> main .hero) .hero-evidence {
  position: relative;
  min-width: 0;
}

body:has(> main .hero) .hero-evidence {
  padding-top: clamp(9rem, 15vw, 14rem);
}

body:has(> main .hero) .hero-badge {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
  padding: 0.45rem 0;
  color: var(--sky-white);
  background: transparent;
  border: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 0;
  font-family: var(--sky-sans);
  font-size: clamp(0.72rem, 0.66rem + 0.16vw, 0.84rem);
  font-weight: 600;
  letter-spacing: 0.13em;
}

body:has(> main .hero) .hero-badge .badge-icon {
  color: currentColor;
}

body:has(> main .hero) .hero-title {
  max-width: 8.2em;
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
  color: var(--sky-white);
  background: none;
  font-family: var(--sky-sans);
  font-size: clamp(3.75rem, 5vw, 5.65rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(2, 15, 54, 0.24);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

body:has(> main .hero) .hero-subtitle {
  max-width: 18em;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--sky-white);
  font-family: var(--sky-serif);
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.95rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.16em;
}

body:has(> main .hero) .hero-desc {
  max-width: 38em;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.96rem, 0.88rem + 0.24vw, 1.08rem);
  line-height: 1.92;
}

body:has(> main .hero) .hero-cta {
  align-items: stretch;
  margin-bottom: 1.4rem;
}

body:has(> main .hero) .hero-cta .btn,
body:has(> main .hero) .hero-cta .line-cta {
  min-height: 56px;
  padding-inline: clamp(1.2rem, 2.4vw, 2rem);
  border-radius: 0;
  box-shadow: none;
}

body:has(> main .hero) .hero-cta .btn-primary {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border: 1px solid var(--sky-white);
}

body:has(> main .hero) .hero-cta .btn-primary:hover,
body:has(> main .hero) .hero-cta .btn-primary:focus-visible {
  color: var(--sky-white);
  background: transparent;
  transform: none;
}

body:has(> main .hero) .hero-cta .line-cta {
  color: var(--sky-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

body:has(> main .hero) .hero-cta .line-cta:hover,
body:has(> main .hero) .hero-cta .line-cta:focus-visible {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  transform: none;
}

body:has(> main .hero) .hero-trust-callout,
body:has(> main .hero) .hero-area-badges {
  justify-content: flex-start;
}

body:has(> main .hero) .hero-trust-callout {
  gap: 0.75rem 1.15rem;
  padding-top: 1rem;
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

body:has(> main .hero) .hero-area-badge {
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  color: var(--sky-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

body:has(> main .hero) .hero-stats {
  display: grid;
  max-width: none;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  color: var(--sky-white);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

body:has(> main .hero) .hero-stats .stat {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.1fr);
  align-items: baseline;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  color: var(--sky-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  box-shadow: none;
}

body:has(> main .hero) .hero-stats .stat-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.76rem, 0.7rem + 0.18vw, 0.88rem);
  letter-spacing: 0.04em;
}

body:has(> main .hero) .hero-stats .stat-value {
  color: var(--sky-white);
  font-family: var(--sky-serif);
  font-size: clamp(2.55rem, 4vw, 4.35rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

body:has(> main .hero) .hero-creds {
  max-width: none;
  margin-top: 0;
  padding: clamp(1.25rem, 2.8vw, 2.25rem);
  color: var(--sky-white);
  background: rgba(3, 24, 77, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body:has(> main .hero) .hero-creds :is(
  .hero-creds__label,
  .hero-creds__showcase-head,
  .hero-creds__showcase-head strong,
  .hero-creds__showcase-head span,
  .hero-cred__name,
  .hero-cred__issuer,
  .hero-creds__footer,
  p,
  span,
  strong
) {
  color: inherit;
}

body:has(> main .hero) .hero-creds__label,
body:has(> main .hero) .hero-creds__showcase-head {
  font-family: var(--sky-sans);
  letter-spacing: 0.1em;
}

body:has(> main .hero) .hero-creds__overview {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

body:has(> main .hero) .hero-creds__overview p {
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

body:has(> main .hero) .hero-creds__overview strong {
  font-family: var(--sky-serif);
  font-weight: 500;
}

body:has(> main .hero) .hero-cred__link {
  min-height: 100%;
  color: var(--sky-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  box-shadow: none;
}

body:has(> main .hero) .hero-cred__link:hover,
body:has(> main .hero) .hero-cred__link:focus-visible {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border-color: var(--sky-white);
  box-shadow: none;
  transform: none;
}

body:has(> main .hero) .hero-cred__link:hover :is(span, strong),
body:has(> main .hero) .hero-cred__link:focus-visible :is(span, strong) {
  color: var(--sky-ink-deep);
}

body:has(> main .hero) .hero-creds__link {
  min-height: 44px;
  color: var(--sky-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0;
}

body:has(> main .hero) .hero-creds__link:hover,
body:has(> main .hero) .hero-creds__link:focus-visible {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border-color: var(--sky-white);
}

/* Spacious editorial system across the rest of the page. */
body:has(> main .hero) main > section:not(.hero),
body:has(> main .hero) main > aside {
  position: relative;
  padding-block: clamp(5.5rem, 9vw, 10rem);
  border: 0;
  overflow: hidden;
}

body:has(> main .hero) main > section:not(.hero) > .container,
body:has(> main .hero) main > aside > .container {
  position: relative;
  z-index: 1;
}

body:has(> main .hero) :is(
  .quick-answers,
  .how-to-start,
  .capabilities-detail,
  .works-section,
  .company-section
) {
  background:
    radial-gradient(ellipse at 80% 24%, rgba(255, 255, 255, 0.72) 0 14%, transparent 38%),
    linear-gradient(125deg, #c9dff2 0%, #e5f4f2 48%, #d6f0d5 100%);
}

body:has(> main .hero) :is(
  .pain-solution,
  .top-certifications,
  .aio-section,
  .interview-section,
  .faq-section,
  .capabilities-section,
  .search-era,
  .portfolio-section
) {
  background: var(--sky-white);
}

body:has(> main .hero) :is(
  .section-title,
  .quick-answers__title,
  .pain-solution__title,
  .smart-shrink__headline,
  .trust-mega__title,
  .how-to-start__title,
  .top-certifications__title,
  .works-section__title,
  .company-section__title,
  .portfolio-section__title
) {
  max-width: 19em;
  margin-inline: 0;
  color: var(--sky-ink);
  background: none;
  font-family: var(--sky-serif);
  font-size: clamp(2.85rem, 5vw, 5.6rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.015em;
  text-align: left;
  text-wrap: balance;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

body:has(> main .hero) :is(
  .pain-solution__eyebrow,
  .trust-mega__eyebrow,
  .how-to-start__eyebrow,
  .top-certifications__eyebrow,
  .quick-answers__eyebrow,
  .company-section__eyebrow,
  .capabilities-detail__badge
) {
  justify-content: flex-start;
  color: var(--sky-ink-deep);
  font-family: var(--sky-sans);
  font-size: clamp(0.7rem, 0.65rem + 0.15vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}

body:has(> main .hero) :is(
  .section-desc,
  .quick-answers__lead,
  .pain-solution__lead,
  .trust-mega__lead,
  .how-to-start__lead,
  .top-certifications__lead,
  .capabilities-detail__intro,
  .contact-desc
) {
  max-width: 44em;
  margin-inline: 0;
  color: #365f7b;
  font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.9;
  text-align: left;
}

body:has(> main .hero) :is(
  .pain-solution__intro,
  .trust-mega__inner,
  .how-to-start__header,
  .top-certifications__header,
  .portfolio-section__header
) {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

body:has(> main .hero) :is(
  .btn,
  .section-cta a,
  .pain-card__cta,
  .top-certifications__footer a,
  .privacy-commitment__link
) {
  border-radius: 0;
  box-shadow: none;
}

body:has(> main .hero) :is(
  .quick-answer,
  .pain-card,
  .step-card,
  .top-cert-card,
  .capability-card,
  .aio-benefit-card,
  .feature-card,
  .mission-card,
  .portfolio-press-card,
  .trust-stat,
  .proof-stat,
  .proof-work,
  .credly-badge-card,
  .other-cert-tag,
  .cert-verify-item,
  .issuer-showcase__item
) {
  color: var(--sky-ink);
  background: var(--sky-glass);
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body:has(> main .hero) :is(
  .quick-answer,
  .pain-card,
  .step-card,
  .top-cert-card,
  .capability-card,
  .aio-benefit-card,
  .feature-card,
  .mission-card,
  .portfolio-press-card,
  .trust-stat,
  .proof-stat,
  .proof-work,
  .credly-badge-card,
  .other-cert-tag,
  .cert-verify-item,
  .issuer-showcase__item
):hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(21, 71, 106, 0.34);
  box-shadow: none;
}

/* Deep-blue evidence interlude. */
body:has(> main .hero) .trust-mega {
  color: var(--sky-white);
  background:
    radial-gradient(ellipse at 82% 22%, rgba(65, 173, 222, 0.36), transparent 31%),
    linear-gradient(145deg, var(--sky-navy-deep) 0%, #073f8b 58%, #1277bd 100%);
  background-color: var(--sky-navy-deep);
}

body:has(> main .hero) .trust-mega :is(
  .trust-mega__title,
  .trust-mega__title strong,
  .trust-mega__highlight,
  .trust-mega__lead,
  .trust-mega__lead strong,
  .trust-mega__eyebrow,
  .trust-stat__num,
  .trust-stat__label,
  .trust-stat__sub,
  .trust-stat__kicker,
  .trust-mega__footnote
) {
  color: var(--sky-white);
}

body:has(> main .hero) .trust-mega__title {
  max-width: 14em;
}

body:has(> main .hero) .trust-mega__lead,
body:has(> main .hero) .trust-stat__sub {
  color: rgba(255, 255, 255, 0.82);
}

body:has(> main .hero) .trust-mega__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

body:has(> main .hero) .trust-mega__stats .trust-stat {
  min-height: clamp(13rem, 19vw, 18rem);
  justify-content: space-between;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  color: var(--sky-white);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
}

body:has(> main .hero) .trust-mega__stats .trust-stat:hover,
body:has(> main .hero) .trust-mega__stats .trust-stat:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: none;
  transform: none;
}

body:has(> main .hero) .trust-mega__stats .trust-stat__num {
  font-family: var(--sky-serif);
  font-size: clamp(3.25rem, 5.5vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

body:has(> main .hero) .trust-mega__issuers {
  color: var(--sky-ink);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.66);
  border-radius: 4px;
}

body:has(> main .hero) .trust-mega .trust-mega__issuers-label {
  color: var(--sky-ink);
}

body:has(> main .hero) .trust-mega .trust-stat__icon {
  color: var(--sky-white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

body:has(> main .hero) .trust-mega__cta :is(.btn, a) {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border: 1px solid var(--sky-white);
}

body:has(> main .hero) .trust-mega__cta :is(.btn, a):hover,
body:has(> main .hero) .trust-mega__cta :is(.btn, a):focus-visible {
  color: var(--sky-white);
  background: transparent;
}

/* Quick answers and services use translucent wayfinding panels. */
body:has(> main .hero) .quick-answers__title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

body:has(> main .hero) .quick-answers__title svg {
  margin-top: 0.35em;
}

body:has(> main .hero) .quick-answers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: rgba(255, 255, 255, 0.44);
}

body:has(> main .hero) .quick-answer {
  min-width: 0;
  background: rgba(255, 255, 255, 0.62);
  border: 0;
}

body:has(> main .hero) .quick-answer summary {
  min-height: 7.5rem;
  padding: 1.4rem 2.75rem 1.4rem 1.4rem;
  color: var(--sky-ink);
  font-family: var(--sky-serif);
  font-size: clamp(1.08rem, 0.95rem + 0.35vw, 1.35rem);
  font-weight: 500;
  line-height: 1.65;
}

body:has(> main .hero) .quick-answer__body {
  padding: 1.35rem;
  color: #365f7b;
  background: rgba(255, 255, 255, 0.78);
  border-top: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .quick-answer__body p {
  line-height: 1.86;
  text-align: left;
}

body:has(> main .hero) .quick-answer__link {
  min-height: 44px;
  color: var(--sky-blue);
  border-top: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .smart-shrink {
  margin-block: clamp(3rem, 6vw, 5rem);
  color: var(--sky-ink);
  background:
    linear-gradient(135deg, rgba(199, 226, 244, 0.8), rgba(220, 243, 222, 0.86));
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) .smart-shrink :is(
  .smart-shrink__headline,
  .smart-shrink__lead,
  h3
) {
  color: var(--sky-ink);
}

body:has(> main .hero) .pain-solution__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

body:has(> main .hero) .pain-card {
  grid-column: span 7;
  min-width: 0;
  overflow: hidden;
  color: var(--sky-ink);
  background: #f5fafb;
}

body:has(> main .hero) .pain-card:nth-child(4n + 2),
body:has(> main .hero) .pain-card:nth-child(4n + 3) {
  grid-column: span 5;
}

body:has(> main .hero) .pain-card :is(
  .pain-card__pain,
  .pain-card__solution,
  .pain-card__services-details
) {
  color: var(--sky-ink);
  background: transparent;
  border-color: var(--sky-rule-soft);
  border-radius: 0;
}

body:has(> main .hero) .pain-card__pain {
  background: linear-gradient(110deg, #dcecf7, #e8f5ea);
}

body:has(> main .hero) .pain-card__service,
body:has(> main .hero) .pain-card__solution-list li {
  border-color: var(--sky-rule-soft);
}

body:has(> main .hero) .pain-card__cta {
  min-height: 48px;
  color: var(--sky-white);
  background: var(--sky-blue);
  border: 1px solid var(--sky-blue);
}

body:has(> main .hero) .pain-card__cta:hover,
body:has(> main .hero) .pain-card__cta:focus-visible {
  color: var(--sky-blue);
  background: transparent;
}

/* Steps and qualifications echo the reference's soft oval system. */
body:has(> main .hero) .how-to-start__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

body:has(> main .hero) .how-to-start__steps::before {
  content: none;
}

body:has(> main .hero) .step-card {
  min-height: 21rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.66);
}

body:has(> main .hero) .step-card__num {
  display: inline-grid;
  width: 4.5rem;
  height: 6rem;
  place-items: center;
  justify-content: center;
  color: var(--sky-navy-deep);
  background: linear-gradient(180deg, #b9e5f5 0%, #0c76c6 100%);
  border-radius: 48% 48% 45% 45% / 23% 23% 30% 30%;
  font-family: var(--sky-serif);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 500;
}

body:has(> main .hero) .step-card__num::before {
  content: none;
}

body:has(> main .hero) .step-card__title {
  color: var(--sky-ink);
  font-family: var(--sky-serif);
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.55;
}

body:has(> main .hero) .top-certifications__grid {
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

body:has(> main .hero) .top-cert-card {
  min-width: 0;
  color: var(--sky-ink);
  background: #f4f9fb;
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) .top-cert-card:hover,
body:has(> main .hero) .top-cert-card:focus-visible {
  color: var(--sky-ink);
  background: var(--sky-white);
  box-shadow: none;
  transform: none;
}

body:has(> main .hero) .top-cert-card :is(
  .top-cert-card__rank,
  .top-cert-card__name,
  .top-cert-card__issuer,
  .top-cert-card__meta
) {
  color: var(--sky-ink);
}

body:has(> main .hero) .top-cert-card .top-cert-card__rank {
  color: var(--sky-white) !important;
  background: var(--sky-blue);
}

body:has(> main .hero) :is(
  .credential-ledger,
  .credly-dashboard,
  .coursera-evidence-preview,
  .issuer-showcase,
  .cert-verify-list,
  .authority-hierarchy
) {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) :is(
  .credly-badge-card,
  .other-cert-tag,
  .cert-verify-item,
  .issuer-showcase__item
) {
  color: var(--sky-ink);
  background: rgba(255, 255, 255, 0.64);
  border-color: var(--sky-rule-soft);
}

/* Capability, results and company surfaces. */
body:has(> main .hero) :is(
  .capabilities-grid,
  .aio-benefits-grid,
  .features-grid,
  .services-grid,
  .mission-vision,
  .faq-list
) {
  gap: clamp(1rem, 2vw, 1.75rem);
}

body:has(> main .hero) .capabilities-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

body:has(> main .hero) .capability-card {
  grid-column: span 6 !important;
  min-width: 0;
  color: var(--sky-ink) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid var(--sky-rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body:has(> main .hero) .capability-card:nth-child(4n + 1),
body:has(> main .hero) .capability-card:nth-child(4n) {
  grid-column: span 7 !important;
}

body:has(> main .hero) .capability-card:nth-child(4n + 2),
body:has(> main .hero) .capability-card:nth-child(4n + 3) {
  grid-column: span 5 !important;
}

body:has(> main .hero) .capability-card :is(
  .capability-card__head,
  .capability-card__details,
  .capability-card__examples,
  .capability-card__source,
  .cap-fold__summary
) {
  color: var(--sky-ink);
  background: transparent;
  border-color: var(--sky-rule-soft);
  border-radius: 0;
}

body:has(> main .hero) .aio-benefits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(> main .hero) .aio-benefit-card,
body:has(> main .hero) .feature-card {
  color: var(--sky-ink);
  background: #f5fafb;
}

body:has(> main .hero) .works-section :is(
  .proof-stat,
  .proof-work,
  .portfolio-press-card
) {
  color: var(--sky-ink);
  background: rgba(255, 255, 255, 0.68);
}

body:has(> main .hero) .works-section .proof-stat--history,
body:has(> main .hero) .works-section .proof-stat--history:hover {
  color: var(--sky-white);
  background: var(--sky-blue);
  border-color: var(--sky-blue);
}

body:has(> main .hero) :is(
  .works-section,
  .interview-section,
  .portfolio-section,
  .company-career-summary,
  .timeline-photos
) picture,
body:has(> main .hero) :is(
  .works-section,
  .interview-section,
  .portfolio-section,
  .company-career-summary,
  .timeline-photos
) img {
  border-radius: 28px;
  filter: saturate(0.78) contrast(1.03) brightness(1.02);
  transition: filter var(--transition-base);
}

body:has(> main .hero) :is(
  .works-section,
  .interview-section,
  .portfolio-section,
  .company-career-summary,
  .timeline-photos
) :is(a, figure):hover img {
  filter: none;
}

body:has(> main .hero) .interview-card,
body:has(> main .hero) .portfolio-timeline,
body:has(> main .hero) .company-career-summary {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) .faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
}

body:has(> main .hero) .faq-item {
  min-width: 0;
  background: #f5fafb;
  border: 1px solid var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) .faq-question {
  min-height: 7rem;
  padding: 1.5rem;
  color: var(--sky-ink);
  font-family: var(--sky-serif);
  font-size: clamp(1.08rem, 0.98rem + 0.3vw, 1.32rem);
  font-weight: 500;
  line-height: 1.65;
}

body:has(> main .hero) .faq-answer {
  color: #365f7b;
  background: var(--sky-white);
  border-top: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .faq-answer :is(p, li) {
  line-height: 1.86;
  text-align: left;
}

body:has(> main .hero) :is(
  .mission-card,
  .company-profile,
  .company-table,
  .portfolio-block,
  .capabilities-assurance,
  .capabilities-guide
) {
  color: var(--sky-ink);
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--sky-rule);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) :is(.mission-card h3, .portfolio-block__title) {
  color: var(--sky-ink);
  font-family: var(--sky-serif);
  font-weight: 500;
}

body:has(> main .hero) :is(.company-table th, .company-table td, .timeline-item) {
  border-color: var(--sky-rule-soft);
}

/* Conversion area: a night-sky close with a white, calm form surface. */
body:has(> main .hero) .privacy-commitment {
  color: var(--sky-ink);
  background: linear-gradient(110deg, #d2e8f5, #e0f3df);
  border-block: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .privacy-commitment__note small {
  color: #365f7b;
}

body:has(> main .hero) .contact-section {
  margin-bottom: var(--bottom-stack-trust, 56px);
  color: var(--sky-white);
  background:
    radial-gradient(ellipse at 80% 20%, rgba(54, 170, 218, 0.4), transparent 30%),
    linear-gradient(145deg, var(--sky-navy-deep) 0%, #063f88 62%, #0a70b4 100%);
  background-color: var(--sky-navy-deep);
}

body:has(> main .hero) .contact-section > .container {
  text-align: left;
}

body:has(> main .hero) .contact-section .section-title,
body:has(> main .hero) .contact-section .section-title.light {
  display: block;
  max-width: 14ch;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  color: var(--sky-white) !important;
  text-align: left;
  text-shadow: none;
}

body:has(> main .hero) .contact-section .section-title::after {
  display: none;
}

body:has(> main .hero) .contact-section :is(
  .section-title,
  .section-title.light,
  .contact-intro,
  .contact-intro p,
  .contact-intro .highlight-text,
  .contact-desc,
  .social-proof,
  .cta-psych__txt strong,
  .contact-channels h3,
  .contact-channels__note
) {
  color: var(--sky-white);
}

body:has(> main .hero) .contact-intro .highlight-text {
  color: var(--sky-white) !important;
  text-shadow: none;
}

body:has(> main .hero) .contact-section :is(
  .cta-psych__txt small,
  .cta-psych__nudge
) {
  color: rgba(255, 255, 255, 0.78);
}

body:has(> main .hero) .contact-intro,
body:has(> main .hero) .contact-desc {
  max-width: 48rem;
  margin-inline: 0;
  text-align: left;
}

body:has(> main .hero) .social-proof {
  justify-content: flex-start;
  width: fit-content;
  margin-inline: 0;
  color: var(--sky-white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  box-shadow: none;
}

body:has(> main .hero) .cta-psych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: none;
  margin-inline: 0;
  padding: 1px;
  background: rgba(255, 255, 255, 0.18);
}

body:has(> main .hero) .cta-psych__item {
  min-width: 0;
  padding: 1.25rem;
  background: rgba(3, 24, 77, 0.34);
  border: 0;
  border-radius: 0;
}

body:has(> main .hero) .cta-psych__ic {
  color: var(--sky-white);
  background: transparent;
  border-radius: 50%;
}

body:has(> main .hero) .contact-channels {
  max-width: 920px;
  margin-inline: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}

body:has(> main .hero) .contact-channels .line-cta {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border: 1px solid var(--sky-white);
  border-radius: 0;
}

body:has(> main .hero) .footer {
  color: var(--sky-white);
  background: var(--sky-navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body:has(> main .hero) .footer :is(a, p, small, h2, h3, h4) {
  color: inherit;
}

body:has(> main .hero) .footer :is(
  .footer-owner__label,
  .footer-owner__name,
  .footer-owner__meta,
  .footer-address,
  .footer-address span,
  .footer-address a,
  .footer-area strong,
  .footer-business-id
) {
  color: var(--sky-white) !important;
}

body:has(> main .hero) .footer-logo-img {
  filter: invert(1) grayscale(1) brightness(2);
}

body:has(> main .hero) .footer-security-note {
  color: var(--sky-ink);
  background: var(--sky-white);
  border: 1px solid var(--sky-white);
  border-radius: 4px;
  box-shadow: none;
}

body:has(> main .hero) .footer-security-note :is(svg, strong) {
  color: var(--sky-ink);
}

body:has(> main .hero) .footer-security-note small {
  color: #365f7b;
  border-color: var(--sky-rule-soft);
}

body:has(> main .hero) .trust-banner,
body:has(> main .hero) .sticky-cta-mobile {
  color: var(--sky-white);
  background: rgba(3, 24, 77, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body:has(> main .hero) .sticky-cta-mobile a {
  color: var(--sky-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 0;
}

body:has(> main .hero) .trust-banner__content:focus-visible {
  outline: 3px solid var(--sky-white);
  outline-offset: 3px;
}

body:has(> main .hero) :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--sky-navy-deep);
  outline-offset: 3px;
}

body:has(> main .hero) :is(
  .trust-mega,
  .footer,
  .trust-banner,
  .sticky-cta-mobile,
  .contact-channels,
  .hero
) :is(a, button, summary):focus-visible {
  outline-color: var(--sky-white);
}

@media (max-width: 1179px) {
  body:has(> main .hero) main,
  body:has(> main .hero) .footer {
    margin-left: 0;
  }

  body:has(> main .hero) main {
    padding-top: var(--header-height);
  }

  body:has(> main .hero) .page-nav {
    top: var(--header-height);
  }

  body:has(> main .hero) :is(.trust-banner, .sticky-cta-mobile) {
    left: 0;
  }

  body:has(> main .hero) .hero-content {
    grid-template-columns: minmax(0, 0.92fr) minmax(23rem, 1.08fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  body:has(> main .hero) .hero-title {
    font-size: clamp(3.6rem, 6.2vw, 5.25rem);
  }

  body:has(> main .hero) .hero-evidence {
    padding-top: clamp(7rem, 12vw, 10rem);
  }
}

@media (max-width: 1100px) {
  body:has(> main .hero) .trust-mega__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(> main .hero) .cta-psych {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(> main .hero) .pain-card,
  body:has(> main .hero) .pain-card:nth-child(n),
  body:has(> main .hero) .capability-card,
  body:has(> main .hero) .capability-card:nth-child(n) {
    grid-column: span 6 !important;
  }
}

@media (max-width: 1023px) {
  body:has(> main .hero) .page-nav__list {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body:has(> main .hero) .page-nav__list > li {
    flex: 0 0 auto;
    min-width: 8.25rem;
  }

  body:has(> main .hero) .hero-content {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(4rem, 9vw, 7rem);
  }

  body:has(> main .hero) .hero-evidence {
    width: min(100%, 46rem);
    padding-top: 0;
    margin-left: auto;
  }

  body:has(> main .hero) .hero::after {
    top: 6rem;
    right: 5%;
    opacity: 0.3;
  }
}

@media (max-width: 767px) {
  body:has(> main .hero) .header-inner {
    padding-inline: clamp(1rem, 4vw, 1.4rem);
  }

  body:has(> main .hero) .nav {
    color: var(--sky-ink-deep);
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid var(--sky-rule-soft);
    box-shadow: none;
  }

  body:has(> main .hero) .nav-list a,
  body:has(> main .hero) .nav-list .nav-cta {
    border-radius: 0;
  }

  body:has(> main .hero) .page-nav__link {
    min-height: 54px;
    padding-inline: 0.95rem;
  }

  body:has(> main .hero) .hero {
    min-height: 0;
    padding: clamp(5rem, 16vw, 7rem) 0 clamp(6rem, 18vw, 8rem);
  }

  body:has(> main .hero) .hero::before {
    background:
      linear-gradient(180deg, rgba(2, 15, 54, 0.62) 0%, rgba(3, 24, 77, 0.28) 54%, rgba(92, 191, 202, 0.18) 100%),
      linear-gradient(90deg, rgba(2, 15, 54, 0.42), transparent);
  }

  body:has(> main .hero) .hero::after {
    top: 6rem;
    right: -3.5rem;
    width: 11rem;
    height: 15rem;
    opacity: 0.28;
  }

  body:has(> main .hero) .hero-vista {
    inset: 14% 0 0;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.74) 30%, transparent 58%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.74) 30%, transparent 58%);
  }

  body:has(> main .hero) .hero-content {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(4.5rem, 14vw, 7rem);
    padding: 0;
  }

  body:has(> main .hero) .hero-main,
  body:has(> main .hero) .hero-evidence {
    padding-top: 0;
  }

  body:has(> main .hero) .hero-badge {
    max-width: calc(100% - 2.5rem);
    margin-bottom: clamp(2.75rem, 11vw, 4rem);
  }

  body:has(> main .hero) .hero-title {
    max-width: 7.5em;
    margin-bottom: 1.75rem;
    font-size: clamp(3rem, 12.6vw, 4.6rem);
    line-height: 0.9;
  }

  body:has(> main .hero) .hero-subtitle {
    margin-bottom: 1.75rem;
    font-size: clamp(1.12rem, 4.8vw, 1.5rem);
  }

  body:has(> main .hero) .hero-desc {
    max-width: 34em;
    font-size: 0.98rem;
  }

  body:has(> main .hero) .hero-cta,
  body:has(> main .hero) .hero-cta .line-cta-wrap,
  body:has(> main .hero) .hero-cta .btn,
  body:has(> main .hero) .hero-cta .line-cta {
    width: 100%;
  }

  body:has(> main .hero) .hero-trust-callout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  body:has(> main .hero) .hero-area-badges {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:has(> main .hero) .hero-stats .stat {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body:has(> main .hero) .hero-stats .stat-value {
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }

  body:has(> main .hero) .hero-creds {
    padding: 1rem;
  }

  body:has(> main .hero) .hero-creds__overview {
    grid-template-columns: 1fr;
  }

  body:has(> main .hero) .hero-creds__overview p {
    min-width: 0;
  }

  body:has(> main .hero) main > section:not(.hero),
  body:has(> main .hero) main > aside {
    padding-block: clamp(4.5rem, 16vw, 7rem);
  }

  body:has(> main .hero) :is(
    .section-title,
    .quick-answers__title,
    .pain-solution__title,
    .smart-shrink__headline,
    .trust-mega__title,
    .how-to-start__title,
    .top-certifications__title,
    .works-section__title,
    .company-section__title,
    .portfolio-section__title
  ) {
    font-size: clamp(2.25rem, 10vw, 3.55rem);
    line-height: 1.28;
  }

  body:has(> main .hero) .trust-mega__stats,
  body:has(> main .hero) .quick-answers__grid,
  body:has(> main .hero) .how-to-start__steps,
  body:has(> main .hero) .aio-benefits-grid,
  body:has(> main .hero) .faq-list,
  body:has(> main .hero) .cta-psych {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(> main .hero) .trust-mega__stats .trust-stat,
  body:has(> main .hero) .step-card {
    min-height: 0;
  }

  body:has(> main .hero) .quick-answer summary,
  body:has(> main .hero) .faq-question {
    min-height: 0;
  }

  body:has(> main .hero) .pain-solution__grid,
  body:has(> main .hero) .capabilities-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:has(> main .hero) .pain-card,
  body:has(> main .hero) .pain-card:nth-child(n),
  body:has(> main .hero) .capability-card,
  body:has(> main .hero) .capability-card:nth-child(n) {
    grid-column: auto !important;
  }

  body:has(> main .hero) :is(
    .top-certifications__grid,
    .credly-dashboard__grid,
    .services-grid,
    .features-grid,
    .mission-vision
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(> main .hero) .contact-channels {
    width: 100%;
    max-width: none;
  }

  body:has(> main .hero) .hero-creds__showcase .hero-creds__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  body:has(> main .hero) .hero-creds__grid > .hero-cred {
    grid-column: auto;
    scroll-snap-align: none;
  }

  body:has(> main .hero) .hero-cred__link {
    min-height: 10rem;
  }
}

@media (max-width: 479px) {
  body:has(> main .hero) .container {
    padding-inline: clamp(1rem, 5vw, 1.25rem);
  }

  body:has(> main .hero) .hero-title {
    font-size: clamp(2.65rem, 12.4vw, 3.85rem);
  }

  body:has(> main .hero) .hero-badge {
    font-size: 0.68rem;
  }

  body:has(> main .hero) .quick-answers__title {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(> main .hero) .quick-answers__title svg {
    width: 22px;
    height: 22px;
  }

  body:has(> main .hero) .hero-creds__showcase .hero-creds__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  body:has(> main .hero) .hero-creds {
    padding: 0.75rem;
  }

  body:has(> main .hero) .hero-cred__link {
    min-height: 11rem;
    padding: 0.8rem 0.4rem 0.7rem;
  }

  body:has(> main .hero) .hero-cred__mark {
    width: 44px;
    height: 44px;
  }

  body:has(> main .hero) .hero-cred__name {
    font-size: 0.72rem;
  }

  body:has(> main .hero) .hero-cred__issuer {
    font-size: 0.65rem;
  }

  body:has(> main .hero) .hero-creds__showcase-head,
  body:has(> main .hero) .hero-creds__footer,
  body:has(> main .hero) .hero-creds__links {
    align-items: stretch;
  }

  body:has(> main .hero) .hero-creds__links {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  body:has(> main .hero) :is(
    .section-title,
    .quick-answers__title,
    .pain-solution__title,
    .smart-shrink__headline,
    .trust-mega__title,
    .how-to-start__title,
    .top-certifications__title,
    .works-section__title,
    .company-section__title,
    .portfolio-section__title
  ) {
    font-size: clamp(2.05rem, 10vw, 2.85rem) !important;
    line-height: 1.28 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(> main .hero) .hero::after {
    transform: none;
  }
}

@media (prefers-reduced-data: reduce) {
  body:has(> main .hero) .hero-vista {
    display: none;
  }

  body:has(> main .hero) .hero,
  body:has(> main .hero) main > section,
  body:has(> main .hero) .contact-section,
  body:has(> main .hero) .trust-mega {
    background-image: none;
  }
}

@media (prefers-contrast: more) {
  body:has(> main .hero) {
    --sky-rule: rgba(21, 71, 106, 0.68);
    --sky-rule-soft: rgba(21, 71, 106, 0.42);
  }

  body:has(> main .hero) .hero::after {
    opacity: 0.15;
  }
}

@media (forced-colors: active) {
  body:has(> main .hero) :is(
    .quick-answer,
    .pain-card,
    .step-card,
    .top-cert-card,
    .capability-card,
    .faq-item
  ) {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
}

@media print {
  body:has(> main .hero),
  body:has(> main .hero) .hero,
  body:has(> main .hero) main > section,
  body:has(> main .hero) main > aside,
  body:has(> main .hero) .trust-mega,
  body:has(> main .hero) .contact-section,
  body:has(> main .hero) .footer {
    color: #111111;
    background: #ffffff;
    border-color: #777777;
  }

  body:has(> main .hero) .header {
    position: static;
    width: auto;
    height: auto;
  }

  body:has(> main .hero) main,
  body:has(> main .hero) .footer {
    margin-left: 0;
  }

  body:has(> main .hero) .hero {
    min-height: auto !important;
    padding: 1.5rem 0 !important;
  }

  body:has(> main .hero) main > section:not(.hero),
  body:has(> main .hero) main > aside {
    padding-block: 1.5rem !important;
  }

  body:has(> main .hero) .hero::before,
  body:has(> main .hero) .hero::after,
  body:has(> main .hero) .hero-vista,
  body:has(> main .hero) .hero-ambient,
  body:has(> main .hero) .hero-foresight {
    content: none;
    display: none;
  }

  body:has(> main .hero) :is(main > section, main > aside, .footer, .hero) * {
    color: #111111 !important;
    text-shadow: none !important;
  }

  body:has(> main .hero) .footer-logo-img {
    filter: none;
  }

  body:has(> main .hero) :is(.trust-banner, .sticky-cta-mobile, .page-nav) {
    display: none !important;
  }
}

/* ======================================================================
   Gentle clarity refinement — original hero image + credential first
   (2026-08-27)
   Uses a rounded Japanese display face, opaque reading surfaces and a
   stable AA palette. Existing copy and credential records are preserved.
====================================================================== */

body:has(> main .hero) {
  --sky-soft: "Zen Maru Gothic", "Zen Kaku Gothic New",
    "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  --sky-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
  --sky-serif: var(--sky-soft);
  --sky-navy: #083b5c;
  --sky-navy-deep: #052f4c;
  --sky-blue: #075d9b;
  --sky-blue-bright: #0871b9;
  --sky-cloud: #f8fcfb;
  --sky-white: #ffffff;
  --sky-ink: #123d57;
  --sky-ink-deep: #082f49;
  --sky-muted: #365a70;
  --sky-rule: #7895a7;
  --sky-rule-soft: #bfd0da;
  --sky-glass: #ffffff;
  --sky-glass-strong: #ffffff;
  --color-bg: #f8fcfb;
  --color-bg-secondary: #edf6f4;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #eef7f8;
  --color-text: var(--sky-ink);
  --color-text-secondary: #294f67;
  --color-text-muted: var(--sky-muted);
  --color-border: var(--sky-rule-soft);
  --color-border-light: #d2dfe6;
  --color-border-strong: var(--sky-rule);
  color: var(--sky-ink);
  background: var(--sky-cloud);
  font-family: var(--sky-sans);
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.075rem);
  line-height: 1.85;
  letter-spacing: 0.012em;
}

body:has(> main .hero) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .nav-list a,
  .page-nav__link,
  .btn,
  .line-cta,
  .hero-creds__showcase-head strong
) {
  font-family: var(--sky-soft);
}

body:has(> main .hero) :is(
  .hero-desc,
  .section-desc,
  .quick-answers__lead,
  .pain-solution__lead,
  .trust-mega__lead,
  .how-to-start__lead,
  .top-certifications__lead,
  .capabilities-detail__intro,
  .contact-desc
) {
  text-wrap: pretty;
}

body:has(> main .hero) :is(p, li) > a:not([class*="btn"]):not(.line-cta) {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body:has(> main .hero) :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--sky-navy-deep);
  outline-offset: 3px;
}

/* Override the previous dark-hero focus rule on the new light hero surfaces. */
body:has(> main .hero) .hero :is(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--sky-navy-deep);
  outline-offset: 3px;
}

/* The pre-redesign vision image returns in its natural color and ratio. */
body:has(> main .hero) .hero {
  min-height: 0;
  padding: clamp(4rem, 7vw, 7rem) 0 max(19rem, 26vw);
  color: var(--sky-ink-deep);
  background:
    radial-gradient(circle at 78% 10%, rgba(183, 226, 231, 0.8), transparent 31%),
    linear-gradient(180deg, #f8fcfb 0%, #eaf5f3 61%, #dceeed 100%);
  background-color: #edf6f4;
}

body:has(> main .hero) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(248, 252, 251, 0.74) 0%,
    rgba(242, 249, 248, 0.58) 52%,
    rgba(235, 246, 245, 0.32) 72%,
    rgba(235, 246, 245, 0) 100%
  );
  pointer-events: none;
}

body:has(> main .hero) .hero::after {
  content: none;
  display: none;
}

body:has(> main .hero) .hero-vista {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: auto;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.64) 15%,
    #000000 36%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.64) 15%,
    #000000 36%
  );
}

body:has(> main .hero) .hero-vista picture,
body:has(> main .hero) .hero-vista img {
  display: block;
  width: 100%;
  height: auto;
}

body:has(> main .hero) .hero-vista img {
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
  filter: none;
  animation: none;
  transform: none;
}

body:has(> main .hero) .hero-ambient {
  opacity: 0.64;
  filter: none;
  mix-blend-mode: multiply;
}

body:has(> main .hero) .hero-foresight {
  opacity: 0.18;
  filter: none;
  mix-blend-mode: multiply;
}

body:has(> main .hero) .hero-content {
  grid-template-columns: minmax(20rem, 0.82fr) minmax(34rem, 1.18fr);
  align-items: start;
  gap: clamp(1.5rem, 3.6vw, 4rem);
}

body:has(> main .hero) .hero-main {
  grid-column: 1;
  grid-row: 1;
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  color: var(--sky-ink-deep);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--sky-rule-soft);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(8, 47, 73, 0.1);
}

body:has(> main .hero) .hero-evidence {
  display: flex;
  width: 100%;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / span 2;
  padding-top: 0;
  margin: 0;
}

body:has(> main .hero) .hero-assurance {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 1rem;
  padding: 1rem clamp(1.15rem, 2.4vw, 1.75rem);
  color: var(--sky-ink-deep);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--sky-rule-soft);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(8, 47, 73, 0.08);
}

body:has(> main .hero) .hero-badge {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--sky-ink-deep);
  border-block-color: var(--sky-rule);
  font-family: var(--sky-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
}

body:has(> main .hero) .hero-title {
  max-width: 9em;
  margin-bottom: 1.25rem;
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-size: clamp(3.15rem, 4.8vw, 5.15rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  white-space: normal;
  text-shadow: none;
}

body:has(> main .hero) .hero-subtitle {
  margin-bottom: 1.3rem;
  color: var(--sky-ink);
  font-family: var(--sky-soft);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.8rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

body:has(> main .hero) .hero-desc {
  max-width: 40em;
  margin-bottom: 1.75rem;
  color: #294f67;
  font-size: clamp(1rem, 0.94rem + 0.18vw, 1.08rem);
  line-height: 1.9;
}

body:has(> main .hero) .hero-cta {
  gap: 0.75rem !important;
  margin-bottom: 1.1rem;
}

body:has(> main .hero) .hero-cta .btn,
body:has(> main .hero) .hero-cta .line-cta {
  min-height: 54px;
  border-radius: 14px;
  font-weight: 700;
}

body:has(> main .hero) .hero-cta .btn-primary {
  color: var(--sky-white);
  background: var(--sky-blue);
  border-color: var(--sky-blue);
}

body:has(> main .hero) .hero-cta .btn-primary:hover,
body:has(> main .hero) .hero-cta .btn-primary:focus-visible {
  color: var(--sky-white);
  background: var(--sky-navy-deep);
  border-color: var(--sky-navy-deep);
}

body:has(> main .hero) .hero-cta .line-cta {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border-color: var(--sky-rule);
}

body:has(> main .hero) .hero-cta .line-cta:hover,
body:has(> main .hero) .hero-cta .line-cta:focus-visible {
  color: var(--sky-ink-deep);
  background: #eaf4f5;
  border-color: var(--sky-ink-deep);
}

body:has(> main .hero) .hero-trust-callout {
  color: #294f67;
  border-top-color: var(--sky-rule-soft);
}

body:has(> main .hero) .hero-trust-item {
  color: #294f67;
  font-weight: 600;
}

body:has(> main .hero) .hero-area-badge {
  color: var(--sky-ink-deep);
  background: #f1f8f7;
  border-color: var(--sky-rule);
  font-weight: 600;
}

/* Qualifications are the first item in the evidence column. */
body:has(> main .hero) .hero-creds {
  max-width: none;
  margin: 0;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  color: var(--sky-ink-deep);
  background: #ffffff;
  border: 1px solid var(--sky-rule);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(8, 47, 73, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:has(> main .hero) .hero-creds :is(
  .hero-creds__label,
  .hero-creds__showcase-head,
  .hero-creds__showcase-head strong,
  .hero-cred__name,
  .hero-creds__footer,
  p,
  strong
) {
  color: var(--sky-ink-deep);
}

body:has(> main .hero) .hero-creds__label {
  margin-bottom: 0.8rem;
  color: var(--sky-blue);
  font-family: var(--sky-soft);
  font-size: clamp(0.8rem, 0.75rem + 0.12vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

body:has(> main .hero) .hero-creds__overview {
  overflow: hidden;
  background: #edf6f4;
  border: 1px solid var(--sky-rule-soft);
  border-radius: 16px;
}

body:has(> main .hero) .hero-creds__overview p {
  min-height: 82px;
  color: var(--sky-ink-deep);
  background: transparent;
  border-color: var(--sky-rule-soft);
}

body:has(> main .hero) .hero-creds__overview strong {
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-size: clamp(1.55rem, 2.3vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body:has(> main .hero) .hero-creds__overview span {
  color: #365a70;
  font-size: clamp(0.78rem, 0.74rem + 0.1vw, 0.86rem);
  font-weight: 500;
  line-height: 1.55;
}

body:has(> main .hero) .hero-creds__showcase-head {
  min-height: 48px;
  padding-block: 0.8rem;
  color: var(--sky-ink-deep);
  letter-spacing: 0.02em;
}

body:has(> main .hero) .hero-creds__showcase-head strong {
  font-size: clamp(1.1rem, 0.98rem + 0.35vw, 1.35rem);
  font-weight: 700;
}

body:has(> main .hero) .hero-creds__showcase-head span {
  color: #365a70;
  font-size: 0.82rem;
  font-weight: 600;
}

body:has(> main .hero) .hero-creds__showcase .hero-creds__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  gap: 0.7rem;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}

body:has(> main .hero) .hero-creds__grid > .hero-cred,
body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) {
  grid-column: auto !important;
  min-width: 0;
}

body:has(> main .hero) .hero-cred__link,
body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) .hero-cred__link {
  display: grid;
  min-height: 92px;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  justify-content: initial;
  gap: 0.12rem 0.75rem;
  padding: 0.75rem 2.35rem 0.75rem 0.75rem;
  color: var(--sky-ink-deep);
  background: #f8fbfc;
  border: 1px solid var(--sky-rule-soft);
  border-radius: 14px;
  text-align: left;
}

body:has(> main .hero) .hero-cred__link:hover,
body:has(> main .hero) .hero-cred__link:focus-visible {
  color: var(--sky-ink-deep);
  background: #eaf4f5;
  border-color: var(--sky-rule);
}

body:has(> main .hero) .hero-cred__mark,
body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) .hero-cred__mark {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 52px;
  height: 52px;
  align-self: center;
}

body:has(> main .hero) .hero-cred__mark--issuer img {
  border-color: var(--sky-rule-soft);
  border-radius: 10px;
}

body:has(> main .hero) .hero-cred__name {
  grid-column: 2;
  color: var(--sky-ink-deep);
  font-size: clamp(0.84rem, 0.8rem + 0.1vw, 0.92rem);
  font-weight: 700;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body:has(> main .hero) .hero-cred__issuer {
  grid-column: 2;
  color: #365a70;
  font-size: clamp(0.76rem, 0.73rem + 0.08vw, 0.82rem);
  font-weight: 500;
  line-height: 1.48;
}

body:has(> main .hero) .hero-cred__verify {
  top: 0.55rem;
  right: 0.55rem;
  width: 30px;
  height: 30px;
  color: var(--sky-blue);
  background: #ffffff;
  border-color: var(--sky-rule-soft);
  opacity: 1;
}

body:has(> main .hero) .hero-creds__footer {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  color: var(--sky-ink-deep);
  border-top: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .hero-creds__more {
  color: #365a70;
  font-size: 0.82rem;
  line-height: 1.6;
}

body:has(> main .hero) .hero-creds__link {
  min-height: 46px;
  color: var(--sky-blue);
  background: #ffffff;
  border: 1px solid var(--sky-rule);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

body:has(> main .hero) .hero-creds__link:hover,
body:has(> main .hero) .hero-creds__link:focus-visible,
body:has(> main .hero) .hero-creds__link--strong {
  color: var(--sky-white);
  background: var(--sky-blue);
  border-color: var(--sky-blue);
}

body:has(> main .hero) .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 0;
  overflow: hidden;
  color: var(--sky-ink-deep);
  background: #ffffff;
  border: 1px solid var(--sky-rule-soft);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(8, 47, 73, 0.08);
}

body:has(> main .hero) .hero-stats .stat {
  display: block;
  min-width: 0;
  padding: 0.9rem 1rem;
  color: var(--sky-ink-deep);
  background: #ffffff;
  border: 0;
  border-right: 1px solid var(--sky-rule-soft);
}

body:has(> main .hero) .hero-stats .stat:last-child {
  border-right: 0;
}

body:has(> main .hero) .hero-stats .stat-label {
  min-height: 2.9em;
  color: #365a70;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
}

body:has(> main .hero) .hero-stats .stat-value {
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}

/* Stronger reading rhythm and stable, opaque surfaces throughout. */
body:has(> main .hero) main > section:not(.hero),
body:has(> main .hero) main > aside {
  padding-block: clamp(4.75rem, 7.5vw, 8rem);
}

body:has(> main .hero) :is(
  .quick-answers,
  .how-to-start,
  .capabilities-detail,
  .works-section,
  .company-section
) {
  background: #edf6f4;
}

body:has(> main .hero) :is(
  .section-title,
  .quick-answers__title,
  .pain-solution__title,
  .smart-shrink__headline,
  .trust-mega__title,
  .how-to-start__title,
  .top-certifications__title,
  .works-section__title,
  .company-section__title,
  .portfolio-section__title
) {
  max-width: 18em;
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-size: clamp(2.35rem, 4.1vw, 4.45rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.015em;
}

body:has(> main .hero) :is(
  .section-desc,
  .quick-answers__lead,
  .pain-solution__lead,
  .trust-mega__lead,
  .how-to-start__lead,
  .top-certifications__lead,
  .capabilities-detail__intro,
  .contact-desc
) {
  max-width: 42em;
  color: #294f67;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.12rem);
  line-height: 1.92;
}

body:has(> main .hero) :is(
  .quick-answer,
  .pain-card,
  .step-card,
  .top-cert-card,
  .capability-card,
  .aio-benefit-card,
  .feature-card,
  .mission-card,
  .portfolio-press-card,
  .proof-stat,
  .proof-work,
  .credly-badge-card,
  .other-cert-tag,
  .cert-verify-item,
  .issuer-showcase__item,
  .faq-item,
  .interview-card,
  .portfolio-timeline,
  .company-career-summary
) {
  color: var(--sky-ink-deep);
  background: #ffffff;
  border-color: var(--sky-rule-soft);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 47, 73, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:has(> main .hero) :is(
  .quick-answer,
  .pain-card,
  .step-card,
  .top-cert-card,
  .capability-card,
  .aio-benefit-card,
  .feature-card,
  .mission-card,
  .portfolio-press-card,
  .proof-stat,
  .proof-work,
  .credly-badge-card,
  .other-cert-tag,
  .cert-verify-item,
  .issuer-showcase__item,
  .faq-item
):hover {
  color: var(--sky-ink-deep);
  background: #f7fbfc;
  border-color: var(--sky-rule);
}

body:has(> main .hero) :is(
  .quick-answer__body,
  .faq-answer,
  .pain-card__solution,
  .pain-card__services-details,
  .capability-card__details,
  .capability-card__examples
) {
  color: #294f67;
  background: #ffffff;
}

body:has(> main .hero) :is(
  .quick-answer summary,
  .faq-question,
  .step-card__title,
  .top-cert-card__name,
  .mission-card h3,
  .portfolio-block__title
) {
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-weight: 700;
}

body:has(> main .hero) .trust-mega,
body:has(> main .hero) .contact-section {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(53, 143, 175, 0.28), transparent 32%),
    linear-gradient(145deg, #052f4c 0%, #07527c 100%);
  background-color: #052f4c;
}

body:has(> main .hero) .trust-mega :is(.trust-mega__lead, .trust-stat__sub),
body:has(> main .hero) .contact-section :is(
  .cta-psych__txt small,
  .cta-psych__nudge
) {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1179px) {
  body:has(> main .hero) .hero-content {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(30rem, 1.2fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
}

@media (max-width: 1023px) {
  body:has(> main .hero) .hero-content {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  body:has(> main .hero) .hero-main,
  body:has(> main .hero) .hero-evidence,
  body:has(> main .hero) .hero-assurance {
    width: min(100%, 52rem);
    grid-column: 1;
    grid-row: auto;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  body:has(> main .hero) .hero {
    min-height: 0;
    flex-direction: column;
    padding: 0 0 clamp(4.25rem, 12vw, 6rem);
  }

  body:has(> main .hero) .hero::before {
    background: none;
  }

  body:has(> main .hero) .hero-vista {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(9.5rem, 52vw, 12rem);
    flex: 0 0 auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body:has(> main .hero) .hero-vista picture,
  body:has(> main .hero) .hero-vista img {
    height: 100%;
  }

  body:has(> main .hero) .hero-vista img {
    object-fit: contain;
    object-position: center top;
  }

  body:has(> main .hero) .hero > .container {
    width: 100%;
    padding-top: clamp(1.35rem, 5vw, 2rem);
  }

  body:has(> main .hero) .hero-content {
    gap: 1rem;
  }

  body:has(> main .hero) .hero-main {
    padding: clamp(1.15rem, 5vw, 1.75rem);
    border-radius: 18px;
  }

  body:has(> main .hero) .hero-badge {
    margin-bottom: 1rem;
  }

  body:has(> main .hero) .hero-assurance {
    margin-top: 0;
    border-radius: 18px;
  }

  body:has(> main .hero) .hero-title {
    max-width: none;
    margin-bottom: 0.9rem;
    font-size: clamp(2.7rem, 11.6vw, 4rem);
    line-height: 1.06;
  }

  body:has(> main .hero) .hero-subtitle {
    margin-bottom: 0.9rem;
  }

  body:has(> main .hero) .hero-desc {
    margin-bottom: 1rem;
  }

  body:has(> main .hero) .hero-creds {
    padding: 1rem;
    border-radius: 18px;
  }

  body:has(> main .hero) .hero-creds__overview {
    grid-template-columns: 1fr;
  }

  body:has(> main .hero) .hero-creds__overview p,
  body:has(> main .hero) .hero-creds__overview p:nth-child(n) {
    min-height: 0;
    padding: 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--sky-rule-soft);
  }

  body:has(> main .hero) .hero-creds__overview p:last-child {
    border-bottom: 0;
  }

  body:has(> main .hero) .hero-creds__showcase-head {
    align-items: flex-start;
  }

  body:has(> main .hero) .hero-creds__footer {
    align-items: stretch;
    flex-direction: column;
  }

  body:has(> main .hero) .hero-creds__links {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  body:has(> main .hero) .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(> main .hero) :is(
    .section-title,
    .quick-answers__title,
    .pain-solution__title,
    .smart-shrink__headline,
    .trust-mega__title,
    .how-to-start__title,
    .top-certifications__title,
    .works-section__title,
    .company-section__title,
    .portfolio-section__title
  ) {
    font-size: clamp(2.05rem, 8.8vw, 3.15rem);
    line-height: 1.38;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  body:has(> main .hero) .hero-cta {
    flex-direction: row !important;
    align-items: stretch;
    gap: 0.65rem !important;
  }

  body:has(> main .hero) .hero-cta > .btn,
  body:has(> main .hero) .hero-cta > .line-cta-wrap {
    width: auto !important;
    min-width: 0;
    flex: 1 1 0;
  }

  body:has(> main .hero) .hero-cta .btn,
  body:has(> main .hero) .hero-cta .line-cta {
    width: 100%;
    height: 100%;
    gap: 0.4rem;
    padding-inline: 0.65rem;
    font-size: 0.84rem;
  }

  body:has(> main .hero) .hero-cta :is(.btn, .line-cta) svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
}

@media (max-width: 639px) {
  body:has(> main .hero) .hero-creds__showcase .hero-creds__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(> main .hero) .hero-cred__link,
  body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) .hero-cred__link {
    min-height: 84px;
  }

  body:has(> main .hero) .hero-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(> main .hero) .hero-stats .stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--sky-rule-soft);
  }

  body:has(> main .hero) .hero-stats .stat:last-child {
    border-bottom: 0;
  }

  body:has(> main .hero) .hero-stats .stat-label {
    min-height: 0;
  }
}

@media (max-width: 374px) {
  body:has(> main .hero) .hero-title {
    font-size: clamp(2.45rem, 11vw, 3.1rem);
  }

  body:has(> main .hero) .hero-cred__link,
  body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) .hero-cred__link {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.1rem 0.6rem;
    padding-left: 0.65rem;
  }

  body:has(> main .hero) .hero-cred__mark,
  body:has(> main .hero) .hero-creds__grid > .hero-cred:nth-child(n) .hero-cred__mark {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(> main .hero) .hero-vista img {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  body:has(> main .hero) .hero-vista {
    display: none;
  }

  body:has(> main .hero) .hero {
    background: #edf6f4;
  }
}

@media (prefers-contrast: more) {
  body:has(> main .hero) {
    --sky-rule: #4d6f84;
    --sky-rule-soft: #7895a7;
  }

  body:has(> main .hero) .hero-main,
  body:has(> main .hero) .hero-creds,
  body:has(> main .hero) .hero-stats,
  body:has(> main .hero) :is(.quick-answer, .pain-card, .step-card, .top-cert-card) {
    background: #ffffff;
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  body:has(> main .hero) .hero::before,
  body:has(> main .hero) .hero-vista,
  body:has(> main .hero) .hero-ambient,
  body:has(> main .hero) .hero-foresight {
    display: none;
  }

  body:has(> main .hero) :is(
    .hero-main,
    .hero-creds,
    .hero-stats,
    .hero-cred__link,
    .quick-answer,
    .pain-card,
    .step-card,
    .top-cert-card
  ) {
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
}

@media print {
  body:has(> main .hero) .hero {
    min-height: auto !important;
    padding: 1.5rem 0 !important;
    color: #111111;
    background: #ffffff;
  }

  body:has(> main .hero) .hero::before,
  body:has(> main .hero) .hero-vista,
  body:has(> main .hero) .hero-ambient,
  body:has(> main .hero) .hero-foresight {
    display: none !important;
  }

  body:has(> main .hero) :is(.hero-main, .hero-creds, .hero-stats) {
    color: #111111;
    background: #ffffff;
    border: 1px solid #777777;
    box-shadow: none;
  }
}

/* ========================================================================== */
/* Quality hardening: AA focus, clear navigation, collision-free fixed UI.    */
/* ========================================================================== */

body:has(> main .hero) .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

body:has(> main .hero) .hero-creds__showcase-head h2 {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

body:has(> main .hero) .hero-creds__showcase-head h2 strong {
  color: var(--sky-ink-deep);
  font-family: var(--sky-soft);
  font-size: clamp(1.2rem, 1.05rem + 0.35vw, 1.5rem);
  font-weight: 700;
}

body:has(> main .hero) .pain-card__cta,
body:has(> main .hero) .sticky-cta-mobile a,
body:has(> main .hero) .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

body:has(> main .hero) :is(
  .pain-card__cta,
  .sticky-cta-mobile a,
  .nav-cta
) svg {
  flex: 0 0 auto;
}

body:has(> main .hero) .nav-list .nav-cta::before {
  content: none;
}

.trust-banner--hidden,
.trust-banner--dismissed,
.sticky-cta-mobile--hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(110%);
}

.sticky-cta-mobile {
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s step-start;
}

.sticky-cta-mobile--hidden,
.trust-banner--hidden,
.trust-banner--dismissed {
  transition-timing-function: ease, ease, step-end;
}

/* Earlier Sky rules use !important; pin the intended opaque gentle card here. */
body:has(> main .hero) .capability-card,
body:has(> main .hero) .capability-card:nth-child(n) {
  color: var(--sky-ink-deep) !important;
  background: #ffffff !important;
  border: 1px solid var(--sky-rule-soft) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(8, 47, 73, 0.06) !important;
}

@media (min-width: 1180px) {
  body:has(> main .hero) .nav-list a,
  body:has(> main .hero) .nav-list .nav-cta {
    font-size: 0.875rem;
  }
}

body:has(> main .hero) .page-nav__link {
  font-size: clamp(0.875rem, 0.83rem + 0.1vw, 0.95rem);
}

/* Keep the former capability ledger retired: it competes with the credential wall.
   The ambient light and foresight curve remain visible as non-interactive hero art. */
body:has(> main .hero) .ai-orb.axis-index {
  display: none !important;
}

@media (max-width: 767px) {
  body:has(> main .hero) .hero-ambient {
    opacity: 0.5;
  }

  body:has(> main .hero) .hero-foresight {
    opacity: 0.13;
  }
}

@media (prefers-reduced-data: reduce), (forced-colors: active) {
  body:has(> main .hero) :is(.hero-ambient, .hero-foresight) {
    display: none !important;
  }
}

@media (min-width: 1180px) and (max-height: 760px) {
  body:has(> main .hero) .header-inner {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body:has(> main .hero) .logo {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }

  body:has(> main .hero) .lang-switch {
    margin-bottom: 0.65rem;
  }

  body:has(> main .hero) .lang-picker-menu {
    position: fixed;
    top: 1rem;
    right: auto;
    bottom: auto;
    left: calc(var(--sky-rail) + 0.75rem);
    max-height: calc(100dvh - 2rem);
  }
}

@media (max-width: 767px) {
  body:has(> main .hero) .page-nav {
    position: relative;
    top: auto;
  }

  body:has(> main .hero) .page-nav__link {
    min-height: 52px;
    font-size: 0.875rem;
  }

  body:has(> main .hero) .hero-vista {
    height: clamp(7.5rem, 38vw, 9rem);
  }

  body:has(> main .hero) .hero > .container {
    padding-top: 0.9rem;
  }

  body:has(> main .hero) .hero-content {
    gap: 0.75rem;
  }

  body:has(> main .hero) .hero-main {
    padding: 1rem;
  }

  body:has(> main .hero) .hero-badge {
    min-height: 36px;
    margin-bottom: 0.65rem;
    padding-block: 0.25rem;
    font-size: 0.72rem;
  }

  body:has(> main .hero) .hero-title {
    margin-bottom: 0.6rem;
    font-size: clamp(2.3rem, 10.2vw, 3rem);
    line-height: 1.08;
  }

  body:has(> main .hero) .hero-subtitle {
    margin-bottom: 0.55rem;
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
    line-height: 1.5;
  }

  body:has(> main .hero) .hero-desc {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.72;
  }

  body:has(> main .hero) .hero-cta {
    gap: 0.5rem !important;
    margin-bottom: 0;
  }

  body:has(> main .hero) .hero-cta :is(.btn, .line-cta) {
    min-height: 48px;
    padding: 0.55rem 0.35rem;
    font-size: 0.82rem;
  }

  body:has(> main .hero) .hero-cta :is(.btn, .line-cta) svg {
    width: 18px;
    height: 18px;
  }

  body:has(> main .hero) .hero-assurance {
    padding: 0.75rem;
    border-radius: 14px;
  }

  body:has(> main .hero) .hero-trust-callout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  body:has(> main .hero) .hero-trust-item {
    align-items: flex-start;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: normal;
  }

  body:has(> main .hero) .hero-trust-item svg {
    width: 13px;
    height: 13px;
    margin-top: 0.1em;
  }

  body:has(> main .hero) .hero-area-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.55rem;
  }

  body:has(> main .hero) .hero-area-badge {
    min-height: 40px;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
  }
}

@media (max-width: 340px) {
  body:has(> main .hero) .hero-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 374px) {
  body:has(> main .hero) .hero-title {
    font-size: clamp(2.25rem, 10.5vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }

  body:has(> main .hero) .hero-subtitle {
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
  }

  body:has(> main .hero) .hero-desc,
  body:has(> main .hero) .hero-note {
    max-width: none;
    font-size: 0.95rem !important;
    line-height: 1.72 !important;
  }

  body:has(> main .hero) :is(
    .section-title,
    .quick-answers__title,
    .pain-solution__title,
    .smart-shrink__headline,
    .trust-mega__title,
    .how-to-start__title,
    .top-certifications__title,
    .works-section__title,
    .company-section__title,
    .portfolio-section__title
  ) {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.38 !important;
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1179px) {
  body:has(> main .hero) .page-nav {
    position: relative;
    top: auto;
  }

  body:has(> main .hero) .hero {
    padding-bottom: clamp(8rem, 38vh, 10rem);
  }

  body:has(> main .hero) .hero-vista {
    height: clamp(7rem, 38vh, 10rem);
  }
}

/* Capability cards: keep the DOM reading order visible and remove empty grid columns. */
body:has(> main .hero) .capabilities-detail .capabilities-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
}

body:has(> main .hero) .capabilities-detail .capability-card,
body:has(> main .hero) .capabilities-detail .capability-card:nth-child(n) {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "head"
    "outcome"
    "authority"
    "details" !important;
  align-items: start;
  gap: clamp(0.875rem, 1.8vw, 1.25rem) !important;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.75rem) !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__head {
  grid-area: head;
  min-width: 0;
}

body:has(> main .hero) .capabilities-detail .capability-card__source {
  font-size: clamp(0.875rem, 0.83rem + 0.1vw, 0.94rem) !important;
  line-height: 1.75 !important;
  overflow-wrap: anywhere;
}

body:has(> main .hero) .capabilities-detail .capability-card__outcome {
  grid-area: outcome;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(1rem, 2vw, 1.4rem) !important;
  color: var(--sky-ink-deep);
  background: #fffaf4 !important;
  border: 1px solid #dfc8b2;
  border-left: 4px solid var(--brand-700) !important;
  box-shadow: none !important;
}

body:has(> main .hero) .capabilities-detail :is(
  .capability-card__layer-label,
  .capability-card__examples-label
) {
  font-size: 0.82rem !important;
  line-height: 1.45;
  letter-spacing: 0.04em !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__problems {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__problems li {
  min-width: 0;
  margin: 0 !important;
  padding: 0.75rem 0.9rem 0.75rem 2.15rem;
  line-height: 1.65;
  background: #ffffff !important;
  border: 1px solid #dfc8b2 !important;
  border-radius: 10px;
  box-shadow: none !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__problems li::before {
  left: 0.75rem;
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
}

body:has(> main .hero) .capabilities-detail .capability-card__problems .cap-scene {
  margin-top: 0.2rem;
  color: #4b6272;
  font-size: 0.875rem !important;
  line-height: 1.55;
}

body:has(> main .hero) .capabilities-detail .capability-card__problem-resolution {
  margin: 0 !important;
  padding: 0.9rem 1rem;
  color: var(--sky-ink-deep);
  background: #f4eee6 !important;
  border: 1px solid #d9bea4;
  border-left: 4px solid var(--brand-700) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__outcome > .cap-fold {
  margin-top: 0.9rem;
}

body:has(> main .hero) .capabilities-detail .capability-card > .cap-fold {
  grid-area: authority;
  min-width: 0;
  margin: 0;
}

body:has(> main .hero) .capabilities-detail .cap-fold > summary.cap-fold__summary,
body:has(> main .hero) .capabilities-detail .capability-card__details > summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  color: #063d5e !important;
  background: #f3f8fa !important;
  border: 1px solid #b9d1dc !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.55;
  text-align: left;
}

body:has(> main .hero) .capabilities-detail .cap-fold > summary.cap-fold__summary::before,
body:has(> main .hero) .capabilities-detail .capability-card__details > summary::before {
  content: "" !important;
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

body:has(> main .hero) .capabilities-detail .cap-fold[open] > summary.cap-fold__summary::before,
body:has(> main .hero) .capabilities-detail .capability-card__details[open] > summary::before {
  transform: rotate(45deg);
}

body:has(> main .hero) .capabilities-detail .cap-fold > summary.cap-fold__summary:hover,
body:has(> main .hero) .capabilities-detail .capability-card__details > summary:hover {
  color: #052f4c !important;
  background: #e8f3f6 !important;
  border-color: #7aa6b8 !important;
}

body:has(> main .hero) .capabilities-detail .cap-fold > summary.cap-fold__summary:focus-visible,
body:has(> main .hero) .capabilities-detail .capability-card__details > summary:focus-visible {
  outline: 3px solid #052f4c;
  outline-offset: 3px;
}

body:has(> main .hero) .capabilities-detail .cap-fold[open] > summary.cap-fold__summary,
body:has(> main .hero) .capabilities-detail .capability-card__details[open] > summary {
  margin-bottom: 0.75rem;
  background: #e8f3f6 !important;
  border-color: #7aa6b8 !important;
}

body:has(> main .hero) .capabilities-detail .cap-fold[open] > :is(
  .capability-card__examples,
  .capability-card__authority
) {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__examples {
  padding: clamp(1rem, 2vw, 1.25rem);
  background: #f4faf6 !important;
  border: 1px solid #b9d6c1;
  border-left: 4px solid #167a45;
  border-radius: 10px !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__authority {
  padding: clamp(1rem, 2vw, 1.25rem);
  background: #f4f8fa !important;
  border: 1px solid #bfd2dc;
  border-left: 4px solid var(--cap-accent, var(--sky-blue)) !important;
  border-radius: 10px !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__details {
  grid-area: details;
  min-width: 0;
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (min-width: 1024px) {
  body:has(> main .hero) .capabilities-detail .capability-card__problems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(> main .hero),
  body:has(> main .hero) *,
  body:has(> main .hero) *::before,
  body:has(> main .hero) *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  body:has(> main .hero) .hero {
    min-height: 0;
    padding-bottom: clamp(3rem, 8vw, 5rem);
  }

  body:has(> main .hero) :is(.trust-mega, .contact-section) {
    background-image: none;
  }
}

@media (forced-colors: active) {
  body:has(> main .hero) .hero {
    min-height: 0;
    padding-bottom: clamp(3rem, 8vw, 5rem);
  }

  .trust-banner--hidden,
  .trust-banner--dismissed,
  .sticky-cta-mobile--hidden {
    display: none;
  }

  body:has(> main .hero) :is(.gradient-text, .pain-solution__highlight) {
    color: CanvasText !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@media print {
  body:has(> main .hero),
  body:has(> main .hero) main,
  body:has(> main .hero) main > section,
  body:has(> main .hero) main > aside,
  body:has(> main .hero) :is(.hero, .trust-mega, .contact-section, .footer),
  body:has(> main .hero) :is(
    .hero-main,
    .hero-creds,
    .hero-stats,
    .quick-answer,
    .pain-card,
    .step-card,
    .top-cert-card,
    .capability-card
  ) {
    color: #111111 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #777777 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body:has(> main .hero) a {
    color: #111111 !important;
    text-decoration: underline !important;
  }

  body:has(> main .hero) :is(.gradient-text, .pain-solution__highlight) {
    color: #111111 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body:has(> main .hero) a[href^="http"]::after {
    content: none !important;
  }
}

/* Static cards should not imitate clickable controls. */
@media (hover: hover) {
  body:has(> main .hero) :is(
    .pain-card,
    .capability-card,
    .feature-card,
    .proof-work,
    .step-card,
    .other-cert-tag
  ):hover {
    transform: none !important;
  }
}

/* ========================================================================== */
/* Interview feature: show the original 4:1 media banner without cropping,   */
/* then present the unchanged editorial copy on its own opaque reading plane. */
/* ========================================================================== */

body:has(> main .hero) .interview-card {
  overflow: hidden;
  background: #ffffff;
}

body:has(> main .hero) .interview-image-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  height: auto;
  background: #ffffff;
}

body:has(> main .hero) .interview-image-container > picture {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 0 !important;
  line-height: 0;
}

body:has(> main .hero) .interview-image {
  position: static;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 1;
  object-fit: contain;
  object-position: center;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
  transition: none;
}

body:has(> main .hero) .interview-text-overlay {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--sky-ink-deep);
  background: #ffffff !important;
  border-top: 1px solid var(--sky-rule-soft);
  text-align: left;
  transform: none;
}

body:has(> main .hero) .interview-text-overlay .section-title {
  max-width: 100%;
  margin: 0 0 0.75rem;
  color: var(--sky-ink-deep) !important;
  font-size: clamp(1.35rem, 1.08rem + 1.35vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  text-shadow: none;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body:has(> main .hero) .interview-text-overlay .gradient-text {
  color: var(--brand-700) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none;
}

body:has(> main .hero) .interview-text-overlay .section-desc {
  max-width: 44em;
  margin: 0 0 0.85rem;
  color: #294f65 !important;
  font-size: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  font-weight: 600;
  line-height: 1.75;
  text-align: left;
  text-shadow: none;
}

body:has(> main .hero) .interview-text-overlay .interview-note {
  margin: 0;
  color: #365a70 !important;
  font-size: clamp(0.84rem, 0.8rem + 0.14vw, 0.92rem) !important;
  line-height: 1.6;
  text-align: left;
  text-shadow: none;
}

body:has(> main .hero) .interview-text-overlay .interview-source {
  margin: 0.35rem 0 0;
  color: #4b6272;
  font-size: clamp(0.76rem, 0.72rem + 0.15vw, 0.84rem);
  line-height: 1.6;
  text-align: left;
  text-shadow: none;
}

@media (max-width: 520px) {
  body:has(> main .hero) .interview-text-overlay {
    padding: 1rem;
  }

  body:has(> main .hero) .interview-text-overlay .section-title {
    font-size: 1.18rem !important;
    line-height: 1.45 !important;
  }
}

@media (forced-colors: active) {
  body:has(> main .hero) .interview-card,
  body:has(> main .hero) .interview-image-container,
  body:has(> main .hero) .interview-text-overlay {
    color: CanvasText;
    background: Canvas !important;
    border-color: CanvasText;
  }

  body:has(> main .hero) .interview-text-overlay :is(
    .section-title,
    .gradient-text,
    .section-desc,
    .interview-note,
    .interview-source
  ) {
    color: CanvasText !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ========================================================================== */
/* Featured credential: preserve AA contrast in every interactive state.      */
/* ========================================================================== */

body:has(> main .hero) .brand--skillup {
  color: var(--sky-blue) !important;
}

@media (min-width: 900px) {
  body:has(> main .hero) .top-certifications__grid > .top-cert-card:first-child {
    color: var(--sky-white);
    background: var(--sky-ink-deep);
    border-color: var(--sky-ink-deep);
  }

  body:has(> main .hero) .top-certifications__grid > .top-cert-card:first-child:hover,
  body:has(> main .hero) .top-certifications__grid > .top-cert-card:first-child:focus-visible {
    color: var(--sky-white);
    background: var(--sky-navy);
    border-color: var(--sky-navy);
  }

  body:has(> main .hero) .top-certifications__grid > .top-cert-card:first-child :is(
    .top-cert-card__issuer,
    .top-cert-card__name,
    .top-cert-card__meta,
    .top-cert-card__verify,
    .brand
  ) {
    color: var(--sky-white) !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none;
  }
}

/* Fixed utilities: hidden controls never enter the visual or keyboard flow. */
.i18n-toast[hidden] {
  display: none !important;
}

/* Keep the 44px dismiss target fully inside the fixed trust rail. */
body:has(> main .hero) .trust-banner {
  min-height: 48px;
}

body:has(> main .hero) .trust-banner__close {
  top: 50%;
  transform: translateY(-50%);
}

/* Keep the long English hero word inside its reading card at wide widths. */
@media (min-width: 1024px) {
  body:has(> main .hero) .hero-title {
    font-size: clamp(3.15rem, 4.8vw, 4.25rem);
  }
}

/* Small-screen evidence must remain comfortably readable, not merely fit. */
@media (max-width: 479px) {
  body:has(> main .hero) .credential-ledger__equation {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column;
    gap: 0.45rem !important;
  }

  body:has(> main .hero) .credential-ledger__equation-part {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    background: #f7fbfc;
    border: 1px solid var(--sky-rule-soft);
    border-radius: 10px;
  }

  body:has(> main .hero) .credential-ledger__equation-part--total {
    background: #edf3ed;
  }

  body:has(> main .hero) .credential-ledger__equation-part strong {
    font-size: 2rem !important;
  }

  body:has(> main .hero) .credential-ledger__equation-part small,
  body:has(> main .hero) .credential-ledger__item dd > small {
    font-size: 0.875rem !important;
    line-height: 1.5;
  }

  body:has(> main .hero) .credential-ledger__equation > b {
    align-self: center;
    font-size: 1rem;
    line-height: 1;
  }

  body:has(> main .hero) .capabilities-detail :is(
    .cert-meta-ref,
    .capability-card__problems li,
    .capability-card__examples-list li,
    .capability-card__list li
  ) {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }
}

/* ========================================================================== */
/* Hero motion placement: preserve the original curve without blank staging. */
/* ========================================================================== */

/* Automatic motion settles within five seconds. This preserves a clear
   dynamic introduction without requiring a separate pause control. */
body:has(> main .hero) .hero-ambient__orb {
  animation-duration: 4.8s;
  animation-iteration-count: 1;
}

body:has(> main .hero) .hero-foresight__pulse {
  animation-delay: 0.8s;
  animation-iteration-count: 1;
}

body:has(> main .hero) .hero-foresight__pulse--2 {
  animation-delay: 1.6s;
}

body:has(> main .hero) .hero-foresight__drift {
  animation-duration: 0.8s;
}

body:has(> main .hero) .hero .line-cta::before,
body:has(> main .hero) .hero .line-cta svg {
  animation-iteration-count: 1;
}

/* Wide layouts place the curve directly over the original photo as well. The
   plot is lifted into the open landscape, while the copy/cards remain above it. */
@media (min-width: 1024px) {
  body:has(> main .hero) .hero-ambient {
    opacity: 0.64;
  }

  /* Keep the compact left-hand sequence independent of the taller credential
     column. The second track absorbs the spanning column's remaining height. */
  body:has(> main .hero) .hero-content {
    grid-template-rows: max-content minmax(0, 1fr);
    row-gap: clamp(0.75rem, 1.2vw, 1.25rem);
  }

  body:has(> main .hero) .hero-foresight {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1440 / 780;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.48;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(248, 252, 251, 0.72));
    mix-blend-mode: normal;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000000 0 68%,
      rgba(0, 0, 0, 0.78) 76%,
      transparent 88%
    );
    mask-image: linear-gradient(
      180deg,
      #000000 0 68%,
      rgba(0, 0, 0, 0.78) 76%,
      transparent 88%
    );
  }

  body:has(> main .hero) .hero-foresight__plot {
    transform: translateY(-100px);
  }

  body:has(> main .hero) .hero-foresight__area {
    opacity: 0 !important;
    animation: none !important;
  }

  body:has(> main .hero) .hero-evidence {
    padding-top: 0;
    background: transparent;
  }

  body:has(> main .hero) .hero-assurance {
    align-self: start;
    margin-top: 0;
  }

  body:has(> main .hero) .hero-cta {
    margin-bottom: 0;
  }

  body:has(> main .hero) .hero-foresight__label {
    font-size: 14px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 12px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 13px;
  }
}

/* At laptop widths the footer actions stack below their note instead of
   squeezing that note into an unreadable vertical strip. */
@media (min-width: 768px) and (max-width: 1179px) {
  body:has(> main .hero) .hero-creds__footer {
    align-items: stretch;
    flex-direction: column;
  }

  body:has(> main .hero) .hero-creds__links {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(> main .hero) .hero-creds__link {
    justify-content: center;
    text-align: center;
  }
}

/* On tablets the stacked cards make the hero very tall. Keep the original
   image and both motion layers together in a dedicated top art band instead
   of stretching the effects behind the entire card stack. */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(> main .hero) .hero {
    display: flex;
    flex-direction: column;
    padding: 0 0 clamp(4rem, 10vw, 6rem);
  }

  body:has(> main .hero) .hero::before {
    background: none;
  }

  body:has(> main .hero) .hero-vista {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    flex: 0 0 auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body:has(> main .hero) .hero-vista picture,
  body:has(> main .hero) .hero-vista img {
    height: 100%;
  }

  body:has(> main .hero) .hero-vista img {
    object-fit: contain;
    object-position: center top;
  }

  body:has(> main .hero) .hero-ambient {
    inset: 0 0 auto;
    width: 100%;
    height: 56.28vw;
    opacity: 0.68;
  }

  body:has(> main .hero) .hero > .container {
    padding-top: clamp(1.5rem, 4vw, 2rem);
  }
}

/* Phones place the original image first and keep it in normal flow. The motion
   layer is absolutely overlaid above it, so the image remains the sizing source. */
@media (max-width: 767px) {
  /* Preserve the complete 16:9 poster at the full viewport width. The former
     9rem height cap reduced the actual image to about 256px wide and caused a
     threefold size jump at the 767/768px breakpoint. */
  body:has(> main .hero) .hero-vista {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    flex: 0 0 auto;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  body:has(> main .hero) .hero-vista picture,
  body:has(> main .hero) .hero-vista img {
    display: block;
    width: 100%;
    height: 100%;
  }

  body:has(> main .hero) .hero-vista img {
    object-fit: contain;
    object-position: center center;
  }

  body:has(> main .hero) .hero-ambient {
    inset: 0 0 auto;
    width: 100%;
    height: 56.28vw;
    opacity: 0.72;
  }
}

/* Phones benefit from a taller composition than the desktop 16:9 canvas.
   Crop only the image's empty side scenery; the embedded headline, diagram,
   and closing copy remain inside the verified safe area. The height cap meets
   the natural 16:9 height at 600px, avoiding another breakpoint jump. */
@media (max-width: 599px) {
  body:has(> main .hero) .hero-vista {
    height: min(66.667vw, 21.1rem);
    aspect-ratio: auto;
  }

  body:has(> main .hero) .hero-vista img {
    object-fit: cover;
    object-position: center center;
  }

  body:has(> main .hero) .hero-ambient {
    height: min(66.667vw, 21.1rem);
  }
}

/* Mobile and tablet: place the original data curve directly over the photo.
   The plot is lifted into the sky, while the lower mask and disabled area fill
   protect every piece of copy embedded in the image. */
@media (max-width: 1023px) {
  body:has(> main .hero) .hero-foresight {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1440 / 780;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.62;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(248, 252, 251, 0.78));
    mix-blend-mode: normal;
    transform: none;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000000 0 68%,
      rgba(0, 0, 0, 0.78) 76%,
      transparent 88%
    );
    mask-image: linear-gradient(
      180deg,
      #000000 0 68%,
      rgba(0, 0, 0, 0.78) 76%,
      transparent 88%
    );
  }

  body:has(> main .hero) .hero-foresight__area {
    opacity: 0 !important;
    animation: none !important;
  }

}

/* Keep the reference labels continuously legible while the line, particles,
   sweep, and current-position node provide the finite motion. */
body:has(> main .hero) .hero-foresight__label,
body:has(> main .hero) .hero-foresight__future {
  animation: none !important;
  paint-order: stroke fill;
  stroke: rgba(248, 252, 251, 0.9);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body:has(> main .hero) .hero-foresight__label {
  opacity: 0.9 !important;
}

body:has(> main .hero) .hero-foresight__label--minor {
  opacity: 0.78 !important;
}

body:has(> main .hero) .hero-foresight__future {
  opacity: 0.88 !important;
}

@media (max-width: 479px) {
  body:has(> main .hero) .hero-foresight__plot {
    transform: translateY(-50px);
  }

  body:has(> main .hero) .hero-foresight__label {
    font-size: 52px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 44px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 48px;
  }
}

@media (min-width: 480px) and (max-width: 599px) {
  body:has(> main .hero) .hero-foresight {
    opacity: 0.6;
  }

  body:has(> main .hero) .hero-foresight__plot {
    transform: translateY(-60px);
  }

  body:has(> main .hero) .hero-foresight__label {
    font-size: 44px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 38px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 42px;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  body:has(> main .hero) .hero-foresight {
    opacity: 0.58;
  }

  body:has(> main .hero) .hero-foresight__plot {
    transform: translateY(-70px);
  }

  body:has(> main .hero) .hero-foresight__label {
    font-size: 34px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 30px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 34px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:has(> main .hero) .hero-foresight {
    opacity: 0.54;
  }

  body:has(> main .hero) .hero-foresight__plot {
    transform: translateY(-80px);
  }

  body:has(> main .hero) .hero-foresight__label {
    font-size: 30px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 26px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 30px;
  }
}

/* ========================================================================== */
/* Contrast completion pass: keep the gentle palette while maintaining AA.   */
/* ========================================================================== */

/* The former container opacity multiplied every child opacity. As a result,
   even the darkest date labels rendered at only 2.2–2.5:1. Keep the SVG
   canvas nearly opaque and control subtlety on each individual mark instead. */
body:has(> main .hero) .hero-foresight {
  opacity: 0.9;
  filter:
    drop-shadow(0 1px 1px rgba(248, 252, 251, 0.94))
    drop-shadow(0 -1px 1px rgba(248, 252, 251, 0.72));
}

body:has(> main .hero) .hero-foresight__solid {
  stroke-width: 2.25px;
  opacity: 0.82;
}

body:has(> main .hero) .hero-foresight__label,
body:has(> main .hero) .hero-foresight__future {
  stroke: rgba(248, 252, 251, 0.98);
  stroke-width: 2px;
}

/* Preserve the original finite reveal while giving every finished mark enough
   visual weight to remain recognisable over both sky and landscape pixels. */
@keyframes foresightProjIn { to { opacity: 0.68; } }
@keyframes foresightBoundIn { to { opacity: 0.48; } }
@keyframes foresightAxisIn { to { opacity: 0.5; } }
@keyframes foresightTickIn { to { opacity: 0.54; } }
@keyframes foresightGridIn { to { opacity: 0.08; } }
@keyframes foresightInkIn { to { opacity: 0.62; } }
@keyframes foresightProj2In { to { opacity: 0.5; } }
@keyframes foresightRegIn { to { opacity: 0.58; } }
@keyframes foresightGhostIn { to { opacity: 0.58; } }
@keyframes foresightDotIn { to { opacity: 0.72; } }
@keyframes foresightDotRingIn { to { opacity: 0.76; } }

@media (prefers-reduced-motion: reduce) {
  body:has(> main .hero) .hero-foresight__proj { opacity: 0.68 !important; }
  body:has(> main .hero) .hero-foresight__bound { opacity: 0.48 !important; }
  body:has(> main .hero) .hero-foresight__axis { opacity: 0.5 !important; }
  body:has(> main .hero) .hero-foresight__tick { opacity: 0.54 !important; }
  body:has(> main .hero) .hero-foresight__grid { opacity: 0.08 !important; }
  body:has(> main .hero) .hero-foresight__ink { opacity: 0.62 !important; }
  body:has(> main .hero) .hero-foresight__proj2 { opacity: 0.5 !important; }
  body:has(> main .hero) .hero-foresight__reg { opacity: 0.58 !important; }
  body:has(> main .hero) .hero-foresight__ghost { opacity: 0.58 !important; }
  body:has(> main .hero) .hero-foresight__dot--seq1,
  body:has(> main .hero) .hero-foresight__dot--seq3,
  body:has(> main .hero) .hero-foresight__dot--seq4 { opacity: 0.72 !important; }
  body:has(> main .hero) .hero-foresight__dot--seq2,
  body:has(> main .hero) .hero-foresight__dot--seq5 { opacity: 0.76 !important; }
}

/* The original poster contains white editorial copy. A frameless tonal veil
   improves that baked-in copy without adding another card or changing it. */
body:has(> main .hero) .hero-vista::after {
  content: "";
  position: absolute;
  inset: 43% 0 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(3, 24, 50, 0) 0%,
    rgba(3, 24, 50, 0.14) 42%,
    rgba(3, 24, 50, 0.34) 100%
  );
  pointer-events: none;
}

/* A prior !important rule left these two labels white after their pills were
   intentionally flattened. Restore dark text on their light surroundings. */
body:has(> main .hero) .capabilities-detail__badge {
  color: var(--sky-ink-deep) !important;
  text-shadow: none;
}

@media (min-width: 1180px) {
  body:has(> main .hero) .nav-list .nav-cta {
    color: var(--sky-blue) !important;
    background: transparent !important;
  }

  body:has(> main .hero) .nav-list .nav-cta:hover,
  body:has(> main .hero) .nav-list .nav-cta:focus-visible {
    color: var(--sky-white) !important;
    background: var(--sky-blue) !important;
  }
}

/* Small white labels receive a comfortable margin above the 4.5:1 floor. */
body:has(> main .hero) .capabilities-detail .capability-card__examples {
  border-left-color: #126b3a !important;
}

body:has(> main .hero) .capabilities-detail .capability-card__examples-label {
  color: #ffffff;
  background: #126b3a !important;
}

body:has(> main .hero) .capabilities-detail :is(
  .capabilities-guide__item--examples strong,
  .capabilities-guide__item--examples .capabilities-guide__icon
) {
  color: #126b3a;
}

body:has(> main .hero) .capability-card--google .capability-card__authority {
  --cap-accent: #345fa8;
}

body:has(> main .hero) .capability-card--microsoft .capability-card__authority {
  --cap-accent: #22617e;
}

body:has(> main .hero) .capability-card--bx .capability-card__authority {
  --cap-accent: #6b3eb5;
}

body:has(> main .hero) .capability-card--web .capability-card__authority {
  --cap-accent: #176c43;
}

body:has(> main .hero) .capability-card--aio .capability-card__authority {
  --cap-accent: #934824;
}

body:has(> main .hero) .capability-card--security .capability-card__authority {
  --cap-accent: #a32121;
}

body:has(> main .hero) .capability-card--google .capability-card__authority .capability-card__layer-label {
  background: #345fa8 !important;
}

body:has(> main .hero) .capability-card--microsoft .capability-card__authority .capability-card__layer-label {
  background: #22617e !important;
}

body:has(> main .hero) .capability-card--bx .capability-card__authority .capability-card__layer-label {
  background: #6b3eb5 !important;
}

body:has(> main .hero) .capability-card--web .capability-card__authority .capability-card__layer-label {
  background: #176c43 !important;
}

body:has(> main .hero) .capability-card--aio .capability-card__authority .capability-card__layer-label {
  background: #934824 !important;
}

body:has(> main .hero) .capability-card--security .capability-card__authority .capability-card__layer-label {
  background: #a32121 !important;
}

body:has(> main .hero) .capability-card--microsoft .capability-card__cite em {
  color: #22617e;
}

body:has(> main .hero) .benefit-number {
  color: var(--sky-muted);
  opacity: 1;
}


body:has(> main .hero) .footer .legal-divider {
  color: #bfd0da;
}

/* Dark fixed/footer surfaces need a light focus ring; light forms retain the
   global navy ring defined above. */
body:has(> main .hero) :is(
  .footer,
  .trust-banner,
  .sticky-cta-mobile
) :is(a, button, summary):focus-visible {
  outline-color: var(--sky-white);
}

/* Use the stronger rule only where a boundary communicates grouping or an
   available action. This reaches 3:1 against white and the pale sky surface. */
body:has(> main .hero) {
  --sky-rule: #718e9f;
}

body:has(> main .hero) :is(
  .hero-main,
  .hero-creds,
  .hero-assurance,
  .hero-stats
) {
  border-color: var(--sky-rule);
}

body:has(> main .hero) :is(
  .hero-cred__link,
  .capabilities-detail .cap-fold > summary.cap-fold__summary,
  .capabilities-detail .capability-card__details > summary
) {
  border-color: var(--sky-rule) !important;
}

/* Keep the previously aligned step numbers dark, but lighten the blue end of
   their fill so the glyph stays above the large-text contrast threshold. */
body:has(> main .hero) .step-card__num {
  color: var(--sky-ink-deep);
  background: linear-gradient(180deg, #b9e8f2 0%, #3d9fd8 100%);
}

body:has(> main .hero) :is(
  .cert-meta-ref a
) {
  color: var(--sky-blue);
  font-weight: 700;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

/* Responsive SVG type keeps a stable visual size across the 1023/1024 and
   1179/1180 layout transitions, including the desktop navigation rail. */
@media (min-width: 1024px) {
  body:has(> main .hero) .hero-foresight__label {
    font-size: clamp(14px, calc(37.16px - 1.2vw), 23px);
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: clamp(12.5px, calc(32px - 1vw), 20px);
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: clamp(14px, calc(35px - 1.1vw), 22px);
  }
}

/* Translation feedback is live UI, so every point of each gradient must pass
   for the small white status text—not only the darker starting colour. */
.i18n-toast[data-state="success"] {
  background: linear-gradient(135deg, #047857, #065f46);
  border-color: rgba(255, 255, 255, 0.72);
}

.i18n-toast[data-state="error"] {
  background: linear-gradient(135deg, #b42318, #7f1d1d);
  border-color: rgba(255, 255, 255, 0.72);
}

/* Keyboard focus must remain visible even though an earlier hover rule removed
   the default outline from the role=option language items. */
.lang-picker-menu li {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.lang-picker-menu li:focus-visible {
  outline: 3px solid var(--sky-navy-deep);
  outline-offset: 2px;
  border-color: var(--sky-navy-deep) !important;
}

@media (max-width: 768px) {
  .qualifications-details table,
  table[style*="min-width: 600px"],
  table[style*="min-width: 700px"] {
    scrollbar-color: rgba(var(--brand-700-rgb), 0.64) transparent;
  }

  .qualifications-details table::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-700-rgb), 0.64);
  }

  .qualifications-details h5 + table::before,
  .qualifications-details h6 + table::before {
    color: #365a70;
  }
}

/* These inline historical annotations already passed AA at 4.83:1; this
   contextual override gives the small type a safer 6.57:1 reading margin. */
body:has(> main .hero) .history-row span[style*="color: #dc2626"] {
  color: #b42318 !important;
}

/* These glyphs are the only visible list markers, so they must meet the 3:1
   non-text threshold rather than inheriting the brighter decorative green. */
body:has(> main .hero) .feature-list li::before {
  color: #047857;
}

body:has(> main .hero) .search-era__list li::before {
  color: #365a70;
}

/* ========================================================================== */
/* Readable Japanese heading wraps and calm, accessible contact controls. */
/* ========================================================================== */

html[lang="ja"] body:has(> main .hero) main :is(h1, h2, h3, h4, h5, h6) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* An older global overflow safeguard targets every span/strong directly.
   Restore phrase-aware wrapping on heading descendants and control labels. */
html[lang="ja"] body:has(> main .hero) main :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em),
html[lang="ja"] body:has(> main .hero) main :is(summary, .btn) > :is(span, strong) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

html[lang="ja"] body:has(> main .hero) main :is(
  p,
  li,
  dt,
  dd,
  summary,
  figcaption,
  blockquote,
  label
) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  html[lang="ja"] body:has(> main .hero) main :is(h1, h2, h3, h4, h5, h6) {
    word-break: auto-phrase;
  }

  html[lang="ja"] body:has(> main .hero) main :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em),
  html[lang="ja"] body:has(> main .hero) main :is(summary, .btn) > :is(span, strong) {
    word-break: auto-phrase;
  }

  html[lang="ja"] body:has(> main .hero) main :is(
    p,
    li,
    dt,
    dd,
    summary,
    figcaption,
    blockquote,
    label
  ) {
    word-break: auto-phrase;
  }
}

/* Each span is an atomic preferred phrase while it fits. A longer phrase can
   still wrap inside its own max-width instead of causing horizontal overflow. */
.heading-phrase {
  display: inline-block;
  max-width: 100%;
}

/* The same semantic phrase wrappers are also used on legal and verification
   pages, where narrow cards previously split names and Japanese words. */
:is(.notice-page, .legal-page) :is(h1, h2, h3),
.verify-action,
.verify-action :is(span, strong) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  :is(.notice-page, .legal-page) :is(h1, h2, h3),
  .verify-action,
  .verify-action :is(span, strong) {
    word-break: auto-phrase;
  }
}

.verify-action > span:first-child {
  min-width: 0;
}

body:has(> main .hero) .profile-name-card__kana {
  display: inline-block;
  white-space: nowrap;
}

/* This heading sits in a narrow left column on wide screens, so its own cap is
   intentionally smaller than the general section-title scale. */
body:has(> main .hero) .how-to-start__title {
  font-size: clamp(2.1rem, 3vw, 2.6rem) !important;
  line-height: 1.38;
  letter-spacing: 0.01em;
}

body:has(> main .hero) .how-to-start__cta > .heading-phrase {
  white-space: nowrap;
}

body:has(> main .hero) .top-certifications__title {
  font-size: clamp(2.1rem, 3vw, 2.6rem) !important;
  line-height: 1.38;
  letter-spacing: 0.01em;
}

body:has(> main .hero) .step-card__title {
  font-size: clamp(1.25rem, calc(1.1rem + 0.35vw), 1.55rem);
}

body:has(> main .hero) .step-card__title .heading-phrase {
  white-space: nowrap;
}

body:has(> main .hero) .contact-section #contact-title {
  width: 100%;
  max-width: 22em;
}

body:has(> main .hero) .portfolio-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

body:has(> main .hero) :is(
  .site-notice-bar__link
) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

body:has(> main .hero) .pain-card__services-summary strong {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 899px) {
  body:has(> main .hero) .how-to-start__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  body:has(> main .hero) :is(
    .section-title,
    .quick-answers__title,
    .pain-solution__title,
    .smart-shrink__headline,
    .trust-mega__title,
    .how-to-start__title,
    .top-certifications__title,
    .works-section__title,
    .company-section__title,
    .portfolio-section__title
  ) {
    font-size: clamp(1.65rem, calc(1.05rem + 3vw), 2.35rem) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em;
  }

  body:has(> main .hero) .how-to-start__header {
    padding-inline: 0;
  }

  body:has(> main .hero) .how-to-start__cta {
    padding-inline: 1rem !important;
    gap: 0.5rem;
  }

  body:has(> main .hero) .qualification-group-title {
    font-size: 1rem !important;
  }
}

@media (max-width: 374px) {
  body:has(> main .hero) :is(#works-title, #capabilities-title) {
    font-size: 1.5rem !important;
  }
}

/* LINE remains a clear link with a visible keyboard focus ring, without pulse,
   shimmer, floating dots, scaling, shadows, or animated state transitions. */
.line-cta,
.line-cta:hover,
.line-cta:focus-visible,
.line-cta:active {
  animation: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

.line-cta::before,
.line-cta::after,
.line-cta-wrap::before,
.line-cta-wrap::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.line-cta svg {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

body:has(> main .hero) .hero-cta .line-cta:is(:hover, :focus-visible, :active) {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border-color: var(--sky-rule);
}

body:has(> main .hero) .contact-channels .line-cta:is(:hover, :focus-visible, :active) {
  color: var(--sky-ink-deep);
  background: var(--sky-white);
  border-color: var(--sky-white);
}

.line-cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ========================================================================== */
/* Visible, controllable hero motion.                                         */
/* ========================================================================== */

body:has(> main .hero) .hero-motion-toggle {
  position: absolute;
  top: clamp(0.75rem, 1.4vw, 1.25rem);
  left: clamp(0.75rem, 2vw, 2rem);
  z-index: 5;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  color: var(--sky-navy-deep);
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid var(--sky-rule);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(8, 47, 73, 0.12);
  font: 700 0.8125rem/1.35 var(--sky-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: none;
}

body:has(> main .hero) .hero-motion-toggle[hidden] {
  display: none !important;
}

body:has(> main .hero) .hero-motion-toggle:is(:hover, :focus-visible) {
  color: var(--sky-navy-deep);
  background: #edf6f4;
  border-color: var(--sky-navy-deep);
}

body:has(> main .hero) .hero-motion-toggle__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

body:has(> main .hero) .hero-vista__mobile-copy {
  display: none;
}

body:has(> main .hero) .hero-motion-toggle__icon--play,
body:has(> main .hero) .hero-motion-toggle__label--play {
  display: none;
}

body:has(> main .hero) .hero-motion-toggle[aria-pressed="true"]
  :is(.hero-motion-toggle__icon--pause, .hero-motion-toggle__label--pause) {
  display: none;
}

body:has(> main .hero) .hero-motion-toggle[aria-pressed="true"]
  :is(.hero-motion-toggle__icon--play, .hero-motion-toggle__label--play) {
  display: inline;
}

/* Keep the control clear of the poster and graph on stacked layouts. */
@media (max-width: 1023px) {
  body:has(> main .hero) .hero-motion-toggle {
    position: relative;
    top: auto;
    left: auto;
    align-self: flex-end;
    margin: 0.65rem clamp(0.75rem, 3vw, 1.5rem) 0;
  }
}

/* A short landscape viewport must expose the pause control before scrolling.
   The top-left sky is intentionally empty at these ratios. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1179px) {
  body:has(> main .hero) .hero-motion-toggle {
    position: absolute;
    top: 0.65rem;
    left: 0.75rem;
    margin: 0;
  }
}

/* The loop is enabled only after JavaScript has attached the pause control.
   Without JavaScript, the existing finite animation remains the safe fallback. */
@media (prefers-reduced-motion: no-preference) {
  body:has(> main .hero) .hero.is-motion-ready .hero-vista img {
    transform-origin: 50% 72%;
    animation: heroVistaControlledDrift 24s ease-in-out infinite alternate;
    will-change: transform;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-ambient {
    opacity: 0.78;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-ambient__orb--a {
    animation-duration: 27s;
    animation-iteration-count: infinite;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-ambient__orb--b {
    animation-duration: 33s;
    animation-iteration-count: infinite;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-ambient__orb--c {
    animation-duration: 39s;
    animation-iteration-count: infinite;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-foresight__pulse {
    animation-delay: 0.8s;
    animation-iteration-count: infinite;
  }

  body:has(> main .hero) .hero.is-motion-ready .hero-foresight__pulse--2 {
    animation-delay: 2.3s;
  }

  body:has(> main .hero) .hero.is-motion-paused .hero-vista img,
  body:has(> main .hero) .hero.is-motion-paused .hero-ambient__orb,
  body:has(> main .hero) .hero.is-motion-paused .hero-foresight * {
    animation-play-state: paused !important;
  }
}

@keyframes heroVistaControlledDrift {
  from { transform: translate3d(0, 0, 0) scale(1.002); }
  to { transform: translate3d(0, -0.6%, 0) scale(1.022); }
}

/* Text and key marks remain legible over both the pale sky and dark hills.
   Individual opacity is used instead of fading the complete SVG canvas. */
body:has(> main .hero) .hero-foresight {
  opacity: 1;
}

body:has(> main .hero) :is(
  .hero-foresight__label,
  .hero-foresight__label--minor,
  .hero-foresight__future
) {
  fill: var(--sky-navy-deep);
  opacity: 1 !important;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body:has(> main .hero) .hero-foresight__solid {
  stroke-width: 2.6px;
  opacity: 0.94;
}

@keyframes foresightSweepIn { to { opacity: 0.32; } }
@keyframes foresightProjIn { to { opacity: 0.78; } }
@keyframes foresightBoundIn { to { opacity: 0.62; } }
@keyframes foresightAxisIn { to { opacity: 0.72; } }
@keyframes foresightTickIn { to { opacity: 0.76; } }
@keyframes foresightGridIn { to { opacity: 0.12; } }
@keyframes foresightInkIn { to { opacity: 0.8; } }
@keyframes foresightProj2In { to { opacity: 0.66; } }
@keyframes foresightRegIn { to { opacity: 0.74; } }
@keyframes foresightGhostIn { to { opacity: 0.76; } }
@keyframes foresightDotIn { to { opacity: 0.9; } }
@keyframes foresightDotRingIn { to { opacity: 0.92; } }
@keyframes foresightSatIn { to { opacity: 0.86; } }
@keyframes foresightDriftIn { to { opacity: 0.62; } }
@keyframes foresightDriftIn2 { to { opacity: 0.5; } }
@keyframes foresightDriftIn3 { to { opacity: 0.56; } }

@media (max-width: 479px) {
  body:has(> main .hero) .hero-foresight__label {
    font-size: 64px;
  }

  body:has(> main .hero) .hero-foresight__label--minor {
    font-size: 52px;
  }

  body:has(> main .hero) .hero-foresight__future {
    font-size: 62px;
  }

  /* The first label is left-aligned while the following labels are centred.
     Move only 2011 into the available gap so the two words never merge. */
  body:has(> main .hero) .hero-foresight__label--minor[x="240"] {
    transform: translateX(64px);
  }
}

@media (max-width: 599px) {
  body:has(> main .hero) .hero-vista__mobile-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    padding: 0.7rem 1rem 0.75rem;
    color: #ffffff;
    background: var(--sky-navy-deep);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
    text-align: left;
  }

  body:has(> main .hero) .hero-vista__mobile-copy > strong {
    font-family: var(--sky-soft);
    font-size: clamp(0.9rem, 3.9vw, 1.05rem);
    line-height: 1.45;
    letter-spacing: 0.025em;
    text-wrap: pretty;
  }

  body:has(> main .hero) .hero-vista__mobile-phrase {
    display: inline-block;
  }

  body:has(> main .hero) .hero-vista__mobile-steps {
    display: grid;
    grid-template-columns: 0.75fr 0.9fr 1.35fr;
    align-items: stretch;
    font-size: clamp(0.72rem, 3vw, 0.8rem);
    font-weight: 700;
    line-height: 1.35;
  }

  body:has(> main .hero) .hero-vista__mobile-steps > span {
    display: grid;
    min-width: 0;
    min-height: 2.1rem;
    place-items: center;
    padding-inline: 0.25rem;
    text-align: center;
  }

  body:has(> main .hero) .hero-vista__mobile-steps > span + span {
    border-left: 1px solid rgba(255, 255, 255, 0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(> main .hero) .hero-motion-toggle {
    display: none !important;
  }

  body:has(> main .hero) .hero-vista img {
    animation: none !important;
    transform: none !important;
  }

  body:has(> main .hero) .hero-foresight__proj { opacity: 0.78 !important; }
  body:has(> main .hero) .hero-foresight__bound { opacity: 0.62 !important; }
  body:has(> main .hero) .hero-foresight__axis { opacity: 0.72 !important; }
  body:has(> main .hero) .hero-foresight__tick { opacity: 0.76 !important; }
  body:has(> main .hero) .hero-foresight__grid { opacity: 0.12 !important; }
  body:has(> main .hero) .hero-foresight__ink { opacity: 0.8 !important; }
  body:has(> main .hero) .hero-foresight__proj2 { opacity: 0.66 !important; }
  body:has(> main .hero) .hero-foresight__reg { opacity: 0.74 !important; }
  body:has(> main .hero) .hero-foresight__ghost { opacity: 0.76 !important; }
  body:has(> main .hero) .hero-foresight__dot--seq1,
  body:has(> main .hero) .hero-foresight__dot--seq3,
  body:has(> main .hero) .hero-foresight__dot--seq4 { opacity: 0.9 !important; }
  body:has(> main .hero) .hero-foresight__dot--seq2,
  body:has(> main .hero) .hero-foresight__dot--seq5 { opacity: 0.92 !important; }
}

@media (prefers-reduced-data: reduce) {
  body:has(> main .hero) .hero-motion-toggle {
    display: none !important;
  }
}

@media (forced-colors: active) {
  body:has(> main .hero) .hero-motion-toggle {
    display: none !important;
  }
}

@media print {
  body:has(> main .hero) .hero-motion-toggle {
    display: none !important;
  }
}

/* The former clipped-gradient declaration resolved to no background image,
   leaving transparent Google text on a pale card. Use one verified dark brand
   colour so the label remains readable at every width and zoom level. */
body:has(> main .hero) .brand--google {
  color: #174ea6 !important;
  -webkit-text-fill-color: currentColor;
  background-color: rgba(23, 78, 166, 0.08);
  background-image: none;
}

/* ========================================================================== */
/* Multi-device completion pass: touch, safe areas, short landscape, wrapping. */
/* ========================================================================== */

.skip-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: none;
}

.nav-list a {
  min-width: 44px;
}

body:has(> main .hero) :is(
  a.qualification-tag,
  .privacy-commitment__link,
  .history-row td:nth-child(2) > a
) {
  min-height: 44px;
  align-items: center;
}

body:has(> main .hero) .history-row td:nth-child(2) > a {
  display: inline-flex !important;
}

html[lang="ja"] :is(.notice-page, .legal-page, .verify-card, .footer) :is(
  p,
  li,
  dt,
  dd,
  th,
  td,
  a,
  figcaption,
  blockquote
) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  html[lang="ja"] :is(.notice-page, .legal-page, .verify-card, .footer) :is(
    p,
    li,
    dt,
    dd,
    th,
    td,
    a,
    figcaption,
    blockquote
  ) {
    word-break: auto-phrase;
  }
}

@media (max-width: 1023px) {
  body:has(> main .hero) .page-nav__list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: inline proximity;
  }

  body:has(> main .hero) .page-nav__list > li {
    scroll-snap-align: start;
  }
}

@media (max-width: 1024px) {
  .nav {
    transition: none !important;
  }
}

/* Legal and information pages are reading surfaces; a fixed CTA must not cover text. */
body:has(> main > :is(.notice-page, .legal-page)) .sticky-cta-mobile {
  display: none !important;
}

body:has(> main > :is(.notice-page, .legal-page)) {
  padding-bottom: 0 !important;
}

/* 768px is the first tablet layout width; do not keep the phone-only fixed CTA. */
@media (min-width: 768px) {
  :root {
    --bottom-stack-cta: 0px;
  }

  .sticky-cta-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* Slightly enlarge the header wordmark while preserving its 4:1 ratio. */
.header .logo picture {
  width: clamp(12rem, 14vw, 14.25rem);
}

.header .logo-img {
  max-height: 57px !important;
}

@media (max-width: 1024px) {
  .header .logo picture {
    width: clamp(10.75rem, 25vw, 12rem);
  }

  .header .logo-img {
    max-height: 48px !important;
  }
}

@media (max-width: 479px) {
  .header .logo picture {
    width: clamp(9.5rem, 44vw, 10.75rem);
  }

  .header .logo-img {
    max-height: 43px !important;
  }
}

@media (max-width: 340px) {
  .header .logo picture {
    width: 9.25rem;
  }

  .header .logo-img {
    max-height: 37px !important;
  }
}

/* Keep the 340/341px boundary from squeezing the logo when the language label appears. */
@media (min-width: 341px) and (max-width: 351px) {
  .header .logo picture {
    width: clamp(9.5rem, 44vw, 9.625rem);
  }

  .header-inner > .lang-switch {
    margin-right: 0.2rem !important;
  }

  .lang-picker-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
  }

  .lang-picker-current {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .lang-picker-toggle svg:last-child {
    display: none;
  }
}

@media (min-width: 1180px) {
  body:has(> main .hero) .header-inner {
    padding-inline: 0.5rem;
  }

  body:has(> main .hero) .logo picture,
  body:has(> main .hero) .logo-img {
    width: 100%;
    max-width: 140px;
  }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 1179px) {
  .header .logo picture {
    width: 11rem;
  }

  .header .logo-img {
    max-height: 44px !important;
  }
}

/* On short landscape screens, preserve reading height and keep core navigation. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1179px) {
  :root {
    --header-height: 56px;
    --bottom-stack-cta: 0px;
    --bottom-stack-trust: 0px;
  }

  .header {
    height: var(--header-height);
  }

  .header-inner {
    min-height: var(--header-height);
    padding-block: 6px;
  }

  .logo-img {
    max-height: 32px;
  }

  .trust-banner,
  .sticky-cta-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

/* Fixed English copy needs word wrapping within the same navigation and cards. */
html[lang="en"] body:has(> main .hero) :is(
  .nav-list a, .page-nav__link, .page-nav__label,
  .heading-phrase, .pain-card__services-summary strong
) {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

html[lang="en"] body:has(> main .hero) .page-nav__link {
  width: 100%;
  height: 100%;
  line-height: 1.35;
}

body:has(> main .hero) .hero-creds__footer {
  flex-direction: column;
  align-items: stretch;
}

body:has(> main .hero) .hero-creds__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  width: 100%;
  min-width: 0;
}

body:has(> main .hero) .hero-creds__link {
  min-width: 0;
  white-space: normal;
  justify-content: center;
}

html[lang="en"] body:has(> main .hero) .privacy-commitment__link {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 1180px) {
  body:has(> main .hero) .hero-title {
    font-size: clamp(2.8rem, 3.6vw, 3.75rem);
  }
}

/* Preserve an English word boundary when readers increase text spacing. */
body:has(> main .hero) .hero-title {
  hyphens: manual;
}

/* Use word boundaries for English prose, including nested labels. Long URLs
   and code keep their own emergency wrapping instead of splitting every word. */
html[lang="en"] body:has(> main .hero) :is(
  p, li, dd, dt, a, button, label, summary, h2, h3, h4, h5, h6,
  span, strong, em, blockquote
):not(:is(code, pre, kbd, samp) *) {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

html[lang="en"] body:has(> main .hero) :is(
  .qualification-tag, .cert-chip, .capability-card__cite,
  .capabilities-trust-badge, .trust-cert, .search-era__verify a,
  .search-era__supported-list li
) {
  overflow-wrap: break-word !important;
}

html[lang="en"] body:has(> main .hero) .pain-card__service-price {
  white-space: normal;
  overflow-wrap: normal;
  hyphens: none;
}

@media (max-width: 480px) {
  .qual-fold > summary.qual-detail-summary {
    display: flex;
    width: 100%;
  }
}

/* Give the entire SVG lockup room, including the wordmark and tagline. */
:root {
  --header-height: 112px;
}

.header .logo picture {
  display: block;
  width: clamp(16.5rem, 36vw, 18rem);
  max-width: 100%;
}

.header .logo-img.brand-logo {
  display: block;
  max-height: none !important;
  aspect-ratio: 3 / 1;
  filter: none;
}

.footer .footer-logo picture {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.footer .footer-logo-img.brand-logo {
  display: block;
  width: clamp(18rem, 28vw, 24rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  filter: none;
}

@media (min-width: 1025px) {
  .footer .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

.brand-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.85rem);
  line-height: 1.4;
  cursor: pointer;
}

.brand-motion-toggle svg {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-motion-toggle[hidden] {
  display: none;
}

@media print {
  .brand-motion-toggle {
    display: none;
  }
}

@media (min-width: 1180px) {
  body:has(> main .hero) {
    --sky-rail: 244px;
  }

  body:has(> main .hero) .logo picture {
    width: 100%;
    max-width: 220px;
  }
}

/* Stack the two controls beside the logo so the full lockup stays readable. */
@media (max-width: 599px) {
  :root {
    --header-height: 108px;
  }

  .header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: 46px 46px;
    gap: 0 var(--space-sm);
    padding-block: 8px;
  }

  .header .logo {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .header .logo picture {
    width: min(100%, 16.5rem);
  }

  .header .header-inner > .lang-switch {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 0;
  }

  .header .mobile-menu-btn {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  .header .lang-picker-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
  }

  .header .lang-picker-current {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .header .lang-picker-toggle svg:last-child {
    display: none;
  }
}

/* Keep a compact single row in short landscape windows. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1179px) {
  :root {
    --header-height: 80px;
  }

  .header .header-inner {
    display: flex;
    padding-block: 6px;
  }

  .header .logo picture {
    width: 12.75rem;
  }

  .header .logo-img.brand-logo {
    max-height: 68px !important;
  }
}