/* ============================================================
   SUAVE AI Works LAB — トップページ専用CSS（ライト版 / 全幅対応）
   スコープ: .sai-home 配下のみ（既存記事・アーカイブには影響しない）
   方針: 画像・外部フォント・CDN・JSに依存しない

   ・本体サイト（白/生成り/淡グリーン・清潔感）にブランドを寄せる
   ・Lab Logセクションのみ濃紺背景で「AI実装ログ/実験室感」を残す
   ・!important は STORK19本体の記事装飾・目次を .sai-home 内でのみ
     確実に打ち消すための防御目的
   ============================================================ */

/* ------------------------------------------------------------
   0a. 全幅化の安全ガード（横スクロール防止）
       .sai-home を含むページの時だけ body/html の横あふれを抑止。
       通常記事ページには一切影響しない（:has で限定）。
   ------------------------------------------------------------ */
html:has(.sai-home),
body:has(.sai-home) {
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   0b. 目次プラグイン（TOC+ / Easy TOC 等）をこのページのみ非表示
   ------------------------------------------------------------ */
body:has(.sai-home) #toc_container,
body:has(.sai-home) .ez-toc-container,
body:has(.sai-home) .easy-toc-container,
body:has(.sai-home) .toc_container {
  display: none !important;
}

/* ------------------------------------------------------------
   1. Tokens / Scope root + フルブリード
   ------------------------------------------------------------ */
.sai-home {
  /* ベース（明るい） */
  --sai-bg: #ffffff;
  --sai-cream: #f7f5ee;      /* 生成り */
  --sai-mint: #eef4ef;       /* 淡いグリーン */
  --sai-ink: #1d2a3a;        /* 濃紺・本文 */
  --sai-ink-soft: #57657a;   /* サブテキスト */
  --sai-navy: #14324e;       /* 濃紺（Lab Log背景） */
  --sai-navy-2: #0f2740;
  --sai-green: #3f9270;      /* セージグリーン（アクセント） */
  --sai-cyan: #2596b0;       /* シアン（アクセント） */
  --sai-gold: #b28a4c;       /* 控えめゴールド */
  --sai-line: rgba(29, 42, 58, 0.1);
  --sai-line-strong: rgba(29, 42, 58, 0.16);
  --sai-card-shadow: 0 16px 38px -22px rgba(20, 50, 78, 0.28);
  --sai-radius: 18px;

  /* フルブリード：本文カラム幅を突き抜けて画面いっぱいに */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;

  position: relative;
  display: block;
  background-color: var(--sai-bg) !important;
  color: var(--sai-ink) !important;
  font-feature-settings: "palt";
  line-height: 1.85;
  isolation: isolate;
}

/* wpautop対策 */
.sai-home > br,
.sai-home section > br,
.sai-home .sai-inner > br,
.sai-home .sai-hero__inner > br {
  display: none;
}
.sai-home p { margin: 0; }
.sai-home p:empty { display: none; }

/* リンク・見出し・リストの親テーマ装飾をスコープ内でリセット */
.sai-home a {
  text-decoration: none !important;
  color: inherit;
  box-shadow: none !important;
  border-bottom: none !important;
}
.sai-home h1,
.sai-home h2,
.sai-home h3,
.sai-home h4 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-weight: 700;
  text-align: inherit;
}
.sai-home h1::before, .sai-home h1::after,
.sai-home h2::before, .sai-home h2::after,
.sai-home h3::before, .sai-home h3::after,
.sai-home h4::before, .sai-home h4::after {
  content: none !important;
  display: none !important;
}
.sai-home ul { margin: 0; padding: 0; list-style: none; }
.sai-home ul li::before,
.sai-home ul li::marker { content: none; }

/* ------------------------------------------------------------
   2. Layout primitives
   ------------------------------------------------------------ */
.sai-home .sai-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}
.sai-home .sai-section {
  position: relative;
  padding: 100px 0;
  background-color: var(--sai-bg);
  isolation: isolate;
}
/* 生成り背景の交互セクション */
.sai-home .sai-section--alt {
  background-color: var(--sai-cream);
}

/* 全セクション共通の極薄グリッド地（明るい面に溶ける濃度） */
.sai-home .sai-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--sai-line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, var(--sai-line) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* セクション見出し */
.sai-home .sai-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--sai-green) !important;
  margin-bottom: 16px !important;
}
.sai-home .sai-label::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sai-green), var(--sai-cyan));
}
.sai-home .sai-title {
  font-size: clamp(26px, 4vw, 37px);
  line-height: 1.5;
  color: var(--sai-ink) !important;
  margin-bottom: 44px !important;
  letter-spacing: 0.02em;
}

/* グラデーション文字（明るい背景向け・濃色グラデ） */
.sai-home .sai-grad {
  background: linear-gradient(115deg, var(--sai-navy), var(--sai-cyan) 55%, var(--sai-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ------------------------------------------------------------
   3. Buttons / Badges
   ------------------------------------------------------------ */
.sai-home .sai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}
.sai-home .sai-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 34px !important;
  border-radius: 12px !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sai-home .sai-btn--primary {
  color: #fff !important;
  background: var(--sai-navy) !important;
  box-shadow: 0 12px 26px -12px rgba(20, 50, 78, 0.6);
}
.sai-home .sai-btn--primary:hover {
  background: var(--sai-navy-2) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(20, 50, 78, 0.5);
}
.sai-home .sai-btn--ghost {
  color: var(--sai-navy) !important;
  border-color: var(--sai-line-strong) !important;
  background: #fff !important;
}
.sai-home .sai-btn--ghost:hover {
  border-color: var(--sai-green) !important;
  color: var(--sai-green) !important;
  transform: translateY(-2px);
}

.sai-home .sai-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 5px 15px !important;
  border-radius: 999px !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--sai-ink-soft) !important;
  border: 1px solid var(--sai-line-strong) !important;
  background: #fff !important;
  margin-bottom: 18px !important;
}
.sai-home .sai-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sai-gold);
}
.sai-home .sai-badge--live {
  color: var(--sai-cyan) !important;
  border-color: rgba(37, 150, 176, 0.35) !important;
}
.sai-home .sai-badge--live::before {
  background: var(--sai-cyan);
  box-shadow: 0 0 8px rgba(37, 150, 176, 0.7);
}

/* ------------------------------------------------------------
   4. Hero（明るい／本体サイト寄せ）
   ------------------------------------------------------------ */
.sai-home .sai-hero {
  position: relative;
  padding: 132px 0 116px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--sai-mint), transparent 70%),
    linear-gradient(180deg, #ffffff, var(--sai-cream));
  isolation: isolate;
  overflow: hidden;
}
.sai-home .sai-hero::before { content: none; }

/* 細グリッド背景 + 中央フェード + 淡い発光 */
.sai-home .sai-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--sai-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--sai-line) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 34%, #000 22%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 78% at 50% 34%, #000 22%, transparent 80%);
  opacity: 0.7;
}
.sai-home .sai-hero__bg::before {
  content: "";
  position: absolute;
  top: -28%;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 560px;
  max-width: 140vw;
  background: radial-gradient(closest-side, rgba(63, 146, 112, 0.14), transparent);
}
.sai-home .sai-hero__bg::after {
  content: "";
  position: absolute;
  bottom: -34%;
  right: -8%;
  width: 600px;
  height: 480px;
  max-width: 120vw;
  background: radial-gradient(closest-side, rgba(37, 150, 176, 0.1), transparent);
}

/* ノード風装飾（淡い発光点） */
.sai-home .sai-node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sai-green);
  box-shadow: 0 0 10px 1px rgba(63, 146, 112, 0.5);
  opacity: 0.6;
  z-index: 0;
}
.sai-home .sai-node--a { top: 20%; left: 11%; }
.sai-home .sai-node--b { top: 64%; left: 20%; background: var(--sai-cyan); box-shadow: 0 0 10px 1px rgba(37, 150, 176, 0.5); }
.sai-home .sai-node--c { top: 26%; right: 13%; background: var(--sai-cyan); box-shadow: 0 0 10px 1px rgba(37, 150, 176, 0.5); }
.sai-home .sai-node--d { top: 70%; right: 17%; background: var(--sai-gold); box-shadow: 0 0 10px 1px rgba(178, 138, 76, 0.45); }

.sai-home .sai-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.sai-home .sai-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--sai-green) !important;
  margin-bottom: 26px !important;
}
.sai-home .sai-hero__title {
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 800;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  color: var(--sai-ink) !important;
  margin-bottom: 26px !important;
}
.sai-home .sai-hero__lead {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--sai-ink-soft) !important;
  max-width: 640px;
  margin: 0 auto !important;
}
.sai-home .sai-hero .sai-actions {
  justify-content: center;
  margin-top: 42px;
}

/* Hero下の発信テーマタグ（何を発信するLABか一目で伝える） */
.sai-home .sai-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}
.sai-home .sai-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--sai-ink) !important;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--sai-line-strong);
}
.sai-home .sai-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--sai-green), var(--sai-cyan));
}

/* ------------------------------------------------------------
   5. About
   ------------------------------------------------------------ */
.sai-home .sai-about {
  max-width: 780px;
}
/* 2カラム化（左:テキスト / 右:メディア枠） */
.sai-home .sai-about--media {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: center;
}
.sai-home .sai-about__body {
  min-width: 0;
}
.sai-home .sai-about__lead {
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 700;
  color: var(--sai-ink) !important;
  margin-bottom: 18px !important;
  line-height: 1.75;
}
.sai-home .sai-about__lead strong {
  background: linear-gradient(transparent 68%, rgba(63, 146, 112, 0.28) 68%);
  font-weight: 700;
  color: inherit;
}
.sai-home .sai-about__text {
  color: var(--sai-ink-soft) !important;
  font-size: 16.5px;
  line-height: 1.9;
}

/* --- Aboutメディア枠 -----------------------------------------
   現状は写真なしでも成立する「淡グリーンのCSSビジュアルパネル」。
   下記いずれかのレイヤーを最前面に足せば写真へ差し替え可能：
   例）本物の写真を使う場合は ↓ のコメントを外して1行足す
       background-image:
         url("/wp-content/uploads/suave-ai-lab-about.jpg"),
         （＋既存の下層グラデ・グリッドはそのまま残してOK）
       background-size: cover;  背景位置: center;
   ※ 現時点ではURLを読みに行かない＝404を出さない実装を優先。
   ------------------------------------------------------------ */
.sai-home .sai-about__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--sai-radius);
  border: 1px solid var(--sai-line);
  box-shadow: var(--sai-card-shadow);
  overflow: hidden;
  /* フォールバック（写真がなくても成立する装飾）：淡グリーン地＋薄グリッド */
  background-color: var(--sai-mint);
  background-image:
    radial-gradient(ellipse 70% 60% at 75% 20%, rgba(37, 150, 176, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 90%, rgba(63, 146, 112, 0.16), transparent 60%),
    repeating-linear-gradient(0deg, var(--sai-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--sai-line) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, #ffffff, var(--sai-mint));
}
/* ノードネットワーク風の装飾（点と線／実装ログ感） */
.sai-home .sai-about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--sai-green) 0 3px, transparent 4px),
    radial-gradient(circle, var(--sai-cyan) 0 3px, transparent 4px),
    radial-gradient(circle, var(--sai-cyan) 0 2px, transparent 3px),
    radial-gradient(circle, var(--sai-gold) 0 2px, transparent 3px);
  background-repeat: no-repeat;
  background-position: 30% 34%, 62% 30%, 46% 62%, 74% 68%;
  opacity: 0.85;
}
/* 接続線（細いワークフローライン） */
.sai-home .sai-about__media::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 34%;
  width: 44%;
  height: 34%;
  border-top: 1px solid rgba(37, 150, 176, 0.4);
  border-right: 1px solid rgba(63, 146, 112, 0.35);
  border-top-right-radius: 12px;
  pointer-events: none;
}
/* 「AI IMPLEMENTATION LOG」チップ（プレースホルダを意図的な装飾に見せる） */
.sai-home .sai-about__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sai-navy) !important;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--sai-line-strong);
}

/* ------------------------------------------------------------
   6. What We Do — 白カードグリッド
   ------------------------------------------------------------ */
.sai-home .sai-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
/* Guildで行うこと：PC4列×2段 / タブレット2列 / スマホ1列（上端・等高で整列） */
.sai-home .sai-grid--dowork {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 900px) {
  .sai-home .sai-grid--dowork {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .sai-home .sai-grid--dowork {
    grid-template-columns: 1fr;
  }
}

/* Resourcesは3枚固定で整列（PCで散らばらせない・上端揃え） */
.sai-home .sai-grid--resources {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 767px) {
  .sai-home .sai-grid--resources {
    grid-template-columns: 1fr;
  }
}

/* wpautopがグリッド直下に混入させる br / 空p をマスから除外
   （これが1マスを占有して中央カードが下がる現象の原因） */
.sai-home .sai-grid > br,
.sai-home .sai-works > br,
.sai-home .sai-cases > br,
.sai-home .sai-tags > br,
.sai-home .sai-grid > p:empty,
.sai-home .sai-works > p:empty,
.sai-home .sai-cases > p:empty {
  display: none !important;
}
.sai-home .sai-card {
  position: relative;
  padding: 32px 28px !important;
  border-radius: var(--sai-radius) !important;
  border: 1px solid var(--sai-line) !important;
  background: #ffffff !important;
  box-shadow: var(--sai-card-shadow);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sai-home .sai-card:hover {
  border-color: rgba(63, 146, 112, 0.4) !important;
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(20, 50, 78, 0.32);
}
.sai-home .sai-card__title {
  font-size: 18px;
  font-weight: 700 !important;
  color: var(--sai-ink) !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.02em;
}
/* 英語サブラベル（3つの入口カード用・小さく控えめに） */
.sai-home .sai-card__sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sai-green) !important;
  margin-bottom: 6px !important;
}

/* 3つの入口：PC3列・等高で揃える、上辺にさりげないアクセント */
.sai-home .sai-grid--tiers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.sai-home .sai-card--tier {
  padding-top: 34px !important;
}
.sai-home .sai-card--tier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--sai-green), var(--sai-cyan));
  opacity: 0.85;
}
@media (max-width: 767px) {
  .sai-home .sai-grid--tiers {
    grid-template-columns: 1fr;
  }
}
.sai-home .sai-card__text {
  font-size: 15px;
  color: var(--sai-ink-soft) !important;
  line-height: 1.85;
}

/* CSS製アイコン（明るい面向け・淡グリーン地） */
.sai-home .sai-card__icon {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid rgba(63, 146, 112, 0.3);
  background: linear-gradient(140deg, rgba(63, 146, 112, 0.12), rgba(37, 150, 176, 0.08));
}
.sai-home .sai-card__icon::before,
.sai-home .sai-card__icon::after { content: ""; position: absolute; }
.sai-home .sai-icon--flow::before {
  top: 50%; left: 10px; right: 10px; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--sai-green), var(--sai-cyan));
}
.sai-home .sai-icon--flow::after {
  top: 50%; right: 8px; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--sai-cyan);
}
.sai-home .sai-icon--tool::before {
  top: 50%; left: 12px; right: 12px; height: 2px; margin-top: -1px; background: var(--sai-green);
}
.sai-home .sai-icon--tool::after {
  left: 50%; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; background: var(--sai-cyan);
}
.sai-home .sai-icon--ec::before {
  left: 13px; bottom: 11px; width: 6px; height: 13px; background: var(--sai-green);
  border-radius: 2px; box-shadow: 13px -6px 0 var(--sai-cyan);
}
.sai-home .sai-icon--log::before {
  left: 11px; right: 11px; top: 16px; height: 2px; background: var(--sai-cyan);
  box-shadow: 0 10px 0 var(--sai-green);
}
.sai-home .sai-icon--biz::before {
  left: 12px; bottom: 14px; width: 20px; height: 2px; background: var(--sai-green);
  transform: rotate(-35deg); border-radius: 2px;
}
.sai-home .sai-icon--biz::after {
  right: 10px; top: 12px; width: 7px; height: 7px;
  border-top: 2px solid var(--sai-cyan); border-right: 2px solid var(--sai-cyan);
}
.sai-home .sai-icon--com::before {
  left: 10px; top: 14px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sai-green);
}
.sai-home .sai-icon--com::after {
  right: 10px; bottom: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sai-cyan);
}

/* ------------------------------------------------------------
   7. Lab Log — 濃紺背景（唯一のダークセクション / 実装ログ感）
      HTML変更不要：.sai-works を含むセクションを自動でダーク化
   ------------------------------------------------------------ */
.sai-home .sai-section:has(.sai-works) {
  background:
    radial-gradient(ellipse 60% 80% at 15% 0%, rgba(37, 150, 176, 0.16), transparent 60%),
    linear-gradient(180deg, var(--sai-navy), var(--sai-navy-2)) !important;
  color: #dfe8f0;
}
/* ダークセクション内のグリッド地を明色ラインに反転 */
.sai-home .sai-section:has(.sai-works)::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px);
  opacity: 1;
}
.sai-home .sai-section:has(.sai-works) .sai-label {
  color: var(--sai-cyan) !important;
}
.sai-home .sai-section:has(.sai-works) .sai-title {
  color: #ffffff !important;
}
.sai-home .sai-works {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.sai-home .sai-work {
  position: relative;
  padding: 28px 26px !important;
  border-radius: var(--sai-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 2px solid rgba(37, 150, 176, 0.7) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sai-home .sai-work .sai-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #c3d0dd !important;
}
.sai-home .sai-work .sai-badge--live {
  color: var(--sai-cyan) !important;
  border-color: rgba(37, 150, 176, 0.5) !important;
}
.sai-home .sai-work__title {
  font-size: 17px;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}
.sai-home .sai-work__text {
  font-size: 15px;
  color: #b7c4d3 !important;
  line-height: 1.85;
}

/* ------------------------------------------------------------
   8. Case Study
   ------------------------------------------------------------ */
.sai-home .sai-cases {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.sai-home .sai-case {
  position: relative;
  padding: 18px 22px 18px 44px !important;
  border-radius: 14px !important;
  border: 1px solid var(--sai-line) !important;
  background: #ffffff !important;
  box-shadow: var(--sai-card-shadow);
  color: var(--sai-ink) !important;
  font-size: 14.5px;
  line-height: 1.75;
}
.sai-home .sai-case::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--sai-green), var(--sai-cyan));
}
.sai-home .sai-note {
  color: var(--sai-ink-soft) !important;
  font-size: 14.5px;
}

/* ------------------------------------------------------------
   9. Community（淡グリーン）
   ------------------------------------------------------------ */
.sai-home .sai-community {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 50% 100%, rgba(63, 146, 112, 0.12), transparent),
    var(--sai-mint) !important;
}
.sai-home .sai-community .sai-title {
  margin-bottom: 20px !important;
}
.sai-home .sai-community__text {
  max-width: 640px;
  margin: 0 auto;
  color: var(--sai-ink-soft) !important;
  font-size: 15.5px;
}
.sai-home .sai-community .sai-actions {
  justify-content: center;
}

/* ------------------------------------------------------------
   10. Resources — 白カードリンク
   ------------------------------------------------------------ */
.sai-home .sai-postcard {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 28px !important;
  border-radius: var(--sai-radius) !important;
  border: 1px solid var(--sai-line) !important;
  background: #ffffff !important;
  box-shadow: var(--sai-card-shadow);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sai-home .sai-postcard:hover {
  border-color: rgba(37, 150, 176, 0.45) !important;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(20, 50, 78, 0.3);
}
.sai-home .sai-postcard__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: var(--sai-green) !important;
}
.sai-home .sai-postcard__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sai-ink) !important;
}
.sai-home .sai-postcard__title::after {
  content: " →";
  color: var(--sai-cyan);
}

/* ------------------------------------------------------------
   11. Contact CTA（本体サイトへの相談導線・明るい）
   ------------------------------------------------------------ */
.sai-home .sai-cta {
  position: relative;
  padding: 104px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(63, 146, 112, 0.12), transparent),
    var(--sai-cream);
}
.sai-home .sai-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sai-line);
}
.sai-home .sai-cta__title {
  font-size: clamp(23px, 3.6vw, 33px) !important;
  font-weight: 700;
  color: var(--sai-ink) !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}
.sai-home .sai-cta__text {
  color: var(--sai-ink-soft) !important;
  font-size: 16.5px;
  line-height: 1.9;
}
.sai-home .sai-cta .sai-actions {
  justify-content: center;
  margin-top: 36px;
}
/* CTA下の安心材料（返信・費用感などの一言）— 情報商材化させない控えめ表現 */
.sai-home .sai-cta__note {
  margin-top: 22px !important;
  font-size: 13px;
  color: var(--sai-ink-soft) !important;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .sai-home .sai-section { padding: 64px 0; }
  .sai-home .sai-hero { padding: 88px 0 74px; }
  .sai-home .sai-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sai-home .sai-btn { text-align: center; }
  .sai-home .sai-inner { padding: 0 20px; }
  .sai-home .sai-hero__inner { padding: 0 20px; }
  .sai-home .sai-hero__bg,
  .sai-home .sai-section::before {
    background-image:
      repeating-linear-gradient(0deg, var(--sai-line) 0 1px, transparent 1px 36px),
      repeating-linear-gradient(90deg, var(--sai-line) 0 1px, transparent 1px 36px);
  }
  .sai-home .sai-cta { padding: 76px 0; }
  /* Aboutは縦積みに（テキスト→メディア枠の順） */
  .sai-home .sai-about--media {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sai-home .sai-about__media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 420px) {
  .sai-home .sai-btn { padding: 13px 24px !important; }
}