/* Generated by _build/build.mjs — edit sources in styles/, not this file. */
/*
  ShinAI Website v2 — Design Tokens (single source of truth)
  すべてのセクションCSSはこのトークンのみを参照する。色・余白・型を直接ハードコードしない。
  美学方針: 純白を基盤に、藍青→青緑のグラデーションで先進性を、オレンジで行動エネルギーを表現。
*/

:root {
  /* ---- Color: base (純白基調 + 極淡い藍青のニュアンス) ---- */
  --paper: #FFFFFF;            /* 純白。全体背景 */
  /* 交互セクションの地色。フラットな青ベタ(AIっぽさ)を脱し、白基調から極薄の
     ブランド藍青〜青緑へ流れるグラデ(--grad-section)を主に用いる。
     --paper-2/-3 は color-mix や小面(ピル・枠)用の単色フォールバックとして残す。
     明度は高く保ち、--mist等の文字コントラスト(4.5:1)を維持する。 */
  --paper-2: #F3F5FA;          /* 淡いクール中性(単色フォールバック) */
  --paper-3: #E9EEF6;          /* カード境界・微細な面 */
  --ink: #0C1A36;              /* 深い藍黒。主色・見出し */
  --ink-deep: #060E1E;         /* 最深の藍黒。grad-dark の終端＝フッター地色 */
  --ink-2: #1A2E52;            /* 藍の中間 */
  --ink-3: #4A5A7A;            /* 補助テキスト */
  --charcoal: #1E2D4A;         /* 本文 */
  --mist: #637290;             /* キャプション。白地・--paper-2 地の双方で 4.5:1(旧 #6B7A99 は 4.03:1) */
  --line: #E4E8F1;             /* 罫線。淡いクール中性ヘアライン */
  --line-ink: rgba(12, 26, 54, 0.10);

  /* ---- Color: brand (企業カラー。藍青→青緑→エネルギーオレンジ) ---- */
  --brand: #3A5FEB;            /* プライマリ藍青 */
  --brand-2: #5476F8;          /* 明るい藍青 */
  --brand-3: #2044CC;          /* 深い藍青 */
  --brand-soft: #EBF0FF;       /* 藍青の淡 */
  --teal: #00C9A7;             /* セカンダリ青緑 */
  --teal-2: #20E7C4;           /* 明るい青緑 */
  --teal-soft: #E0FAF5;        /* 青緑の淡 */
  --energy: #FF8A00;           /* エネルギーオレンジ。CTA・強調 */
  --energy-2: #FFA533;         /* 明るいオレンジ */
  --energy-soft: #FFF3E0;      /* オレンジの淡 */

  /* ---- Color: section coding (3ソリューションの色分け) ---- */
  --c-tacit-bg: #EBF0FF;       /* 暗黙知AI化 — 藍青の淡 */
  --c-tacit-ink: #2044CC;
  --c-agent-bg: #E0FAF5;       /* 企業専用エージェント — 青緑の淡 */
  --c-agent-ink: #007A67;
  --c-enable-bg: #FFF3E0;      /* 内製化・運用支援 — オレンジの淡 */
  --c-enable-ink: #B55300;     /* 淡橙地で 4.5:1 を満たす濃度(旧 #CC5E00 は 3.70:1) */

  /* ---- Industry palette (業種別の色分け) ----
     AIが多用しがちな原色の青×ティールを脱し、落ち着いたエディトリアル調の8色で業種を識別する。
     各色は濃(ink=ラベル/アイコン/罫)と淡(bg=面/after状態)の対で持つ。順序はページ上の業種順。
     ink は色相・彩度を保ったまま、白地と対の淡地の両方で 4.5:1 を満たす明度に調整済み。 */
  --ind-1-ink: #2B5EA6; --ind-1-bg: #E7EEF8;   /* 製造: コバルト */
  --ind-2-ink: #9C5F16; --ind-2-bg: #F9EFDC;   /* 建設: 琥珀 */
  --ind-3-ink: #B3426B; --ind-3-bg: #F8E7EF;   /* 介護・専門サービス: 薔薇 */
  --ind-4-ink: #B2492A; --ind-4-bg: #F9E7E0;   /* 小売: 朱 */
  --ind-5-ink: #117B5A; --ind-5-bg: #E0F3EB;   /* 医療福祉: 翠 */
  --ind-6-ink: #6250BE; --ind-6-bg: #ECE8F8;   /* 教育: 菫 */
  --ind-7-ink: #137686; --ind-7-bg: #E0F1F3;   /* 金融: 青緑 */
  --ind-8-ink: #9B5A38; --ind-8-bg: #F6E9E0;   /* 不動産: 赤褐 */

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, #3A5FEB 0%, #00C9A7 100%);
  --grad-brand-vivid: linear-gradient(135deg, #5476F8 0%, #20E7C4 100%);
  --grad-energy: linear-gradient(135deg, #FF8A00 0%, #FFB833 100%);
  --grad-dark: radial-gradient(140% 120% at 18% 0%, #1A3266 0%, #0C1A36 48%, var(--ink-deep) 100%);
  --grad-paper: radial-gradient(160% 120% at 50% 0%, #FFFFFF 0%, #F5F7FC 68%, #EFF6F5 100%);
  /* セクション地色。白基調から極薄の藍青〜青緑へ斜めに流れる。フラットな青ベタを避け、
     グラデの奥行きで「AI青ベタ」の没個性を脱する。明色セクション・ページ見出しに用いる。 */
  --grad-section: linear-gradient(152deg, #FFFFFF 0%, #FFFFFF 30%, #F2F5FC 68%, #ECF6F4 100%);
  --grad-brand-line: linear-gradient(90deg, transparent, #3A5FEB 40%, #00C9A7 60%, transparent);
  --grad-transform: linear-gradient(100deg, var(--c-tacit-bg) 0%, var(--c-agent-bg) 52%, var(--c-enable-bg) 100%);
  --grad-ink: radial-gradient(140% 120% at 18% 0%, #1A3266 0%, var(--ink) 48%, var(--ink-deep) 100%);
  /* 企業理念バンド。公式HP --gradient-cta-new (#2D4CC8/#00B89F) を完全踏襲(不透明・くっきり) */
  --grad-creed: linear-gradient(135deg, #2D4CC8 0%, #00B89F 50%, #2D4CC8 100%);

  /* ---- Typography ---- */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-latin: "Fraunces", "Zen Old Mincho", serif;
  /* UI ラベル・eyebrow 専用。幾何学的 sans で技術精度感を演出 */
  --font-label: "Space Grotesk", "Inter", system-ui, sans-serif;
  /* 企業理念バンド専用。--font-body と同族で全体の統一感を維持 */
  --font-creed: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Enterprise-grade scale. 日本語明朝体の光学補正済み。
     セクション見出しは一段大胆に(h2 max 34→42px)。スペースデータ流の大きな見出しを
     日本語の可読性を保つ範囲で翻案し、階層のコントラストを強める。 */
  --fs-display: clamp(2.1rem, 4.2vw, 3.75rem);
  --fs-h1: clamp(1.9rem, 3.4vw, 3rem);
  --fs-h2: clamp(1.55rem, 2.9vw, 2.625rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(0.95rem, 1.15vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8rem;             /* フッターのメタ等、控えめな fine-print 用 */
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.45;
  --lh-body: 1.9;
  --tracking-eyebrow: 0.15em;
  --tracking-latin: 0.04em;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  /* セクション上下余白。大胆な「間」を作るため上限を引き上げ(6.5→8rem)、
     大画面ほど呼吸が深くなるよう vw 係数も上げる。 */
  --section-py: clamp(3rem, 6vw, 8rem);
  /* モバイル(<=640px)のセクション律動。デスクトップ最小(40px)へ近い呼吸を保ち、
     「余白の美」を小画面でも崩さない。24pxへの急落を防ぐ単一の真実源。 */
  --section-py-mobile: clamp(2.5rem, 8vw, 3.5rem);
  --container: 1360px;
  --container-narrow: 760px;
  --container-text: 680px;
  --container-heading: 960px;
  --gutter: clamp(1.5rem, 3.5vw, 3rem);
  --header-h: 78px;            /* sticky ヘッダーの初期高。没入ゾーンの1画面計算に使う */
  --header-h-condensed: 64px;  /* scroll で condense した時の高さ。モバイルナビ天位置も追従させる */

  /* ---- Breakpoints (正準。全セクション共通) ----
     メディアクエリ条件には CSS 変数を使えないため、下記4値を「唯一の正準」とし、
     各セクションCSSはこの値のみで @media を書く(中間値を新規に増やさない)。
     - 480px  phone        : 1カラム化・最小余白
     - 640px  large phone  : 2カラム→1カラム、行間・番号列の調整
     - 820px  tablet / nav : グローバルナビのハンバーガー切替点(JS・footerと一致。動かさない)
     - 960px  wide grid     : 広い3カラム等の折返し */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 820px;
  --bp-lg: 960px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(12, 26, 54, 0.04), 0 2px 8px rgba(12, 26, 54, 0.05);
  --shadow-md: 0 6px 18px rgba(12, 26, 54, 0.07), 0 2px 6px rgba(12, 26, 54, 0.04);
  --shadow-lg: 0 22px 48px rgba(12, 26, 54, 0.10), 0 8px 18px rgba(12, 26, 54, 0.06);
  --shadow-brand: 0 8px 32px rgba(58, 95, 235, 0.22), 0 2px 8px rgba(58, 95, 235, 0.10);
  --shadow-teal: 0 8px 32px rgba(0, 201, 167, 0.20);
  --shadow-energy: 0 8px 30px rgba(255, 138, 0, 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.4s;
  --dur-2: 0.7s;
  --dur-3: 1.1s;

  /* ---- Layer ---- */
  --z-bg: 0;
  --z-base: 1;
  /* 没入ゾーン内: 信念帯グラデーション(背景) < パーティクル < 全テキスト の順に重ねる */
  --z-particles: 2;
  --z-stack-content: 3;
  --z-header: 50;
  --z-overlay: 80;
}

/*
  ShinAI Website v2 — Base layer
  リセット・タイポグラフィ基礎・共通ユーティリティ・セクションの律動。
  セクション固有の見た目はここに書かない(sections/ 配下に書く)。
*/

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: #FFFFFF;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-2);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: 0.05em;
  color: var(--charcoal);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1, "kern" 1;
  overflow-x: hidden;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
}

img, svg, canvas, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }

/* モバイルのタップ遅延(300ms)・ダブルタップ拡大による「タップしても反応しない」を根絶する。
   操作要素は即座にタップを発火させ、実機での取りこぼしを防ぐ。 */
a, button, [role="button"], label, summary, input, select, textarea {
  touch-action: manipulation;
}

::selection { background: var(--brand-soft); color: var(--ink); }

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-py);
}
.section--alt { background: var(--grad-section); }
.section--ink {
  background: var(--ink);
  color: #E7EAF1;
  background-image: var(--grad-dark);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: #FFFFFF; }

/* ---- トップの持続パーティクル背景(旧サイト同様「背景の上・本文の下」オーバーレイ) ----
   固定パーティクル場(.site-particles, z:0)に対し本文(.container)を z:1 で前面へ上げ、
   セクション背景をその下に置く。暗色・信念帯は静的化して地を粒子の下へ送り、粒子を鮮やかに乗せる。
   明色/alt は透過にして地(ペーパーグラデ)と粒子を通す。index限定(body.is-home)。 */
/* トップの地色は純白。交互セクションを透過にして固定パーティクルを全面に通す。
   以前の淡いグラデ地は深い位置でオフホワイトに見えたため純白へ純化。 */
body.is-home { background: var(--paper); }
.is-home main .container { position: relative; z-index: 1; }
/* Why を含む全 alt セクションは透過。粒子を他セクションと同じ強さで見せる。 */
.is-home .section--alt { background: transparent; }
.is-home .section--ink { position: static; }
.section--ink .section__lead { color: rgba(255, 255, 255, 0.62); }
.section--ink .eyebrow { color: var(--teal); }

/* 見出しブロックと本文の間に「間」を作る(space-4→6)。大きな見出しが呼吸できる余白。 */
.section__head { max-width: var(--container-heading); margin-bottom: var(--space-6); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.02em;
}
.section__title-line {
  display: block;
}
.section__lead {
  margin-top: var(--space-3);
  max-width: var(--container-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
/* 中央揃えヘッド内では lead ブロック自体も中央へ(max-width による左アンカーを解く) */
.section__head--center .section__lead {
  margin-inline: auto;
}

.section__lead-line {
  display: block;
}

/* ---- 日本語の意味単位改行 ----
   word-break: auto-phrase は Chromium の形態素解析(BudouX)で文節単位に折り返す。
   text-wrap: balance/pretty は行長の均整と孤立行(行末の1〜2文字落ち)を防ぐ。
   いずれも未対応ブラウザでは従来の折り返しへ無害にフォールバックする。
   auto-phrase は日本語専用のため :lang(ja) に限定する(英語版 /en/ には効かせない)。
   text-wrap の方は言語を問わず有効なので限定しない。 */
:lang(ja) :is(h1, h2, h3,
  .section__lead, .page-hero__lead, .purpose__support,
  .about-purpose__note, .cta__text, .shin7__desc,
  .industries-bridge__item-title, .industries-bridge__item-text, .industries-bridge__note) {
  word-break: auto-phrase;
}
h1, h2, h3 {
  text-wrap: balance;
}
.section__lead, .page-hero__lead, .purpose__support, .about-purpose__note,
.cta__text, .shin7__desc, .industries-bridge__item-text, .industries-bridge__note {
  text-wrap: pretty;
}
/* 意味の切れ目を守る最小語塊。折り返すならこの塊の前で折る(全ブラウザで有効) */
.nobr {
  white-space: nowrap;
}

/* モバイル限定の改行。PC等では無視され、640px以下でのみ改行として効く。 */
.br-sp {
  display: none;
}
@media (max-width: 640px) {
  .br-sp {
    display: inline;
  }
}

.section__more {
  margin-top: var(--space-5);
  text-align: center;
}

.text-column { max-width: var(--container-text); }
.heading-column { max-width: var(--container-heading); }

@media (max-width: 640px) {
  .section {
    padding-block: var(--section-py-mobile);
  }
  .section__head {
    margin-bottom: var(--space-5);
  }
  .section__title {
    font-size: 1.55rem;
  }
  .section__lead-line {
    display: inline;
  }
}

/* ---- Eyebrow (英字ラベル。ブランドグラデーションの一線で先進性を表現) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--grad-brand);
  opacity: 0.9;
}
.eyebrow--center::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--grad-brand);
  opacity: 0.9;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.7rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
  will-change: transform;
}

.btn-primary {
  background: var(--grad-brand);
  color: #FFF;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand), 0 16px 40px rgba(58, 95, 235, 0.18);
  filter: brightness(1.08);
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--line-ink);
  background: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
  color: var(--brand);
}

.btn .btn__arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---- Accessibility ---- */
.skip-link {
  position: absolute;
  left: var(--space-3); top: -3rem;
  z-index: var(--z-overlay);
  background: var(--ink); color: #FFF;
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Scroll reveal ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  /* スクロールに機敏に追従させるため速く(dur-1=0.4s)。発火も早める(main.js の rootMargin)。 */
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.js .reveal[data-reveal="left"] {
  transform: translateX(-40px);
}
.js .reveal[data-reveal="right"] {
  transform: translateX(40px);
}
.js .reveal[data-reveal="scale"] {
  transform: scale(0.92) translateY(16px);
}
.js .reveal[data-reveal="fade"] {
  transform: none;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none !important;
}
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
.reveal[data-delay="4"] { transition-delay: 0.28s; }
.reveal[data-delay="5"] { transition-delay: 0.35s; }

/* ---- スクロール進捗ライン(main.js が生成する要素) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--grad-brand);
  z-index: var(--z-overlay);
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ---- 装飾の細い罫(ブランドグラデーション) ---- */
.rule-copper { height: 1px; background: var(--grad-brand-line); border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .chatbot, .skip-link,
  .hero-stack__particles, .stats-bar, .cta, .btn { display: none !important; }
  .section { padding-block: 1.5em; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  .site-header__link::after, .eyebrow::before, .eyebrow--center::after { display: none; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}


/* sections/about-extra.css */
/*
  ShinAI Website v2 — Section: about-extra（about.html 専用の補助レイアウト）
  既存セクションCSS（purpose/company/why/cta/page-hero）で賄えない要素のみを所有する。
  すべて .about- で名前空間化し、トークンのみ参照する。既存CSSは変更しない。
  対象: Purpose 深掘りの一文 / 代表メッセージ（肖像プレースホルダ＋本文＋歩み）。
*/

/* ---- Purpose 深掘りの静かな一文 ---- */
.about-purpose__note {
  max-width: 30em;
  margin: var(--space-6) auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  text-align: left;
}

/* ---- 会社概要の連絡先リンク ---- */
.about-fact-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.about-fact-link:hover {
  text-decoration-color: var(--brand);
}

/* ---- 代表メッセージ ---- */
.about-message__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.55fr);
  gap: clamp(var(--space-5), 5vw, var(--space-7));
  align-items: start;
}

.about-message__portrait {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.6), transparent 55%),
    linear-gradient(165deg, var(--c-tacit-bg) 0%, var(--paper-2) 58%, var(--brand-soft) 130%);
  box-shadow: var(--shadow-md);
}

.about-message__portrait::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(12, 26, 54, 0.06), transparent 70%);
  z-index: -1;
}

.about-message__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-message__monogram {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: 1;
  color: var(--ink);
}

.about-message__portrait-cap {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mist);
}

.about-message__body {
  display: flex;
  flex-direction: column;
}

.about-message__lead {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.about-message__para {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.about-message__para + .about-message__para {
  margin-top: var(--space-3);
}

/* モバイルは一回り控えめに(読み物として静かな声量へ) */
@media (max-width: 640px) {
  .about-message__lead {
    font-size: 1rem;
  }
  .about-message__para {
    font-size: 0.8125rem;
  }
}

.about-message__sign {
  margin-top: var(--space-5);
  text-align: right;
}

.about-message__sign-role {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.about-message__sign-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-top: var(--space-1);
  margin-left: var(--space-2);
}

.about-message__sign-latin {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--mist);
  margin-top: 0.2em;
}

/* ---- 歩み（ブランド藍青の数字で時間軸を示す） ---- */
.about-career {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-3);
}

.about-career__item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
}

.about-career__year {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--brand);
}

.about-career__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .about-message__grid {
    grid-template-columns: 1fr;
  }
  .about-message__portrait {
    aspect-ratio: 16 / 9;
    max-height: 16rem;
  }
  /* 横長トリミングで頭頂部が切れないよう基準を上寄りに。 */
  .about-message__portrait img {
    object-position: 50% 10%;
  }
}

@media (max-width: 480px) {
  .about-career__item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ---- チーム写真ブレーク ---- */
.about-photo-break {
  padding: var(--space-4) 0;
}

.about-photo-break__frame {
  overflow: hidden;
  border-radius: var(--r-lg);
  max-height: 20rem;
  box-shadow: var(--shadow-md);
}

.about-photo-break__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ---- 七つのShin — 全体俯瞰 matrix（7字を平等に一列表示） ---- */
.shin7__matrix {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--space-4), 5vw, var(--space-7));
  padding: var(--space-5) clamp(var(--space-4), 5vw, var(--space-7));
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-6);
}

.shin7__matrix-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}

.shin7__matrix-kanji {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}

.shin7__matrix-roman {
  font-family: var(--font-latin);
  font-size: 0.62rem;
  color: var(--mist);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- 七つのShin — 全7項目アイコン付きカード体系 ---- */

/* 7枚を平等に見せるため flex で折り返し、端数行(3枚)も中央に据える。
   カード幅は「4列時の1枚分」で固定し、行を跨いでも大きさを揃える。 */
.shin7__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.shin7__card {
  flex: 0 0 calc((100% - 3 * var(--space-4)) / 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.shin7__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.shin7__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-3);
  border-radius: var(--r-md);
  /* 単色は簡素に見えるため、ブランドの藍青→青緑グラデ+奥行きの影で上質なチップに。
     7つのShinは一つの名の側面のため、色は統一する。 */
  background: var(--grad-brand);
  color: #FFFFFF;
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.shin7__card:hover .shin7__icon-wrap {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--brand) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.shin7__icon-wrap svg {
  width: 1.5rem;
  height: 1.5rem;
}

.shin7__roman {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-1);
}

.shin7__kanji {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

/* 見出しは一文の言明。文節改行+均整で読ませる */
.shin7__title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
.shin7__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ---- 未来ビジョン ---- */

.vision__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.vision__card {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.vision__title {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.vision__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  text-align: left;
}

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

/* ---- パートナー募集 ----
   テキストの箱の羅列にしない。数字の残像・アイコン・役割カラーで
   「参加したくなる」体温を宿す。色はソリューション3色の体系を継承する */

.join__subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  color: var(--ink);
  text-align: center;
  margin-block: var(--space-6) var(--space-4);
}

.join__subhead::before,
.join__subhead::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0.9;
}

.join__merits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.join__merit {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.join__merit:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.join__merit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand);
}

/* 旧公開サイト同様、装飾アイコンを置かず番号を見出しの上に据える。
   ブランド色の細い数字で、静かに順序を示すだけの控えめな導入にする。 */
.join__merit-num {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-latin);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--brand);
  user-select: none;
}

.join__merit-title {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.join__merit-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

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

.join__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.join__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.join__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--grad-brand));
}

/* 役割カラー: AI的な原色を脱し、鮮明な三色(技術=コバルト/事業=翠/デザイン=菫)で識別 */
.join__card--engineer {
  --card-accent: var(--ind-1-ink);
  --card-soft: var(--ind-1-bg);
}
.join__card--business {
  --card-accent: var(--ind-5-ink);
  --card-soft: var(--ind-5-bg);
}
.join__card--design {
  --card-accent: var(--ind-6-ink);
  --card-soft: var(--ind-6-bg);
}
.join__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.join__num {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--mist);
  margin-bottom: var(--space-3);
}
.join__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: var(--space-3);
  border-radius: var(--r-md);
  background: var(--card-soft, var(--brand-soft));
  color: var(--card-accent, var(--brand));
}
.join__icon-wrap svg {
  width: 1.3rem;
  height: 1.3rem;
}
.join__role {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  /* フォールバックは --teal(白地 2.12:1)ではなく濃いティール。役割クラスが無い場合も AA を保つ */
  color: var(--card-accent, var(--c-agent-ink));
  margin-bottom: var(--space-1);
}
.join__title {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.join__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  margin-bottom: var(--space-4);
  flex: 1;
}
.join__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
/* 淡すぎて読めないため、地は白・字は濃色・枠を明確にして視認性を確保 */
.join__tag {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.24em 0.85em;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: var(--ink-2);
  border: 1px solid var(--line-ink);
}
.join__cta {
  align-self: stretch;
  justify-content: center;
  font-size: var(--fs-sm);
  /* 枠色は hover を待たず最初から役割カラーで示す */
  border-color: var(--card-accent, var(--brand));
  color: var(--card-accent, var(--brand));
}
.join__cta:hover {
  border-color: var(--card-accent, var(--brand));
  color: var(--card-accent, var(--brand));
  background: color-mix(in srgb, var(--card-accent, var(--brand)) 7%, #FFFFFF);
}
.join__note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--mist);
}

@media (max-width: 960px) {
  .shin7__card {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }
}
/* モバイルでは matrix の間隔を詰め、7字を一行に一望させる(折れて1字が孤立するのを防ぐ) */
@media (max-width: 640px) {
  .shin7__matrix {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    justify-content: space-evenly;
    margin-bottom: var(--space-4);
  }
  .shin7__matrix-kanji {
    font-size: 1.25rem;
  }
  /* ローマ字は下のカードで示す。matrix は漢字のみの一行に純化し「紳」の孤立を防ぐ */
  .shin7__matrix-roman {
    display: none;
  }
  /* 縦積み7枚のスクロール負荷を抑える密度調整(可読サイズは維持) */
  .shin7__card {
    padding: var(--space-3) var(--space-2);
  }
  .shin7__icon-wrap {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: var(--space-2);
  }
  .shin7__icon-wrap svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  .shin7__kanji {
    margin-bottom: var(--space-1);
  }
  .shin7__desc {
    font-size: 0.75rem;
  }
}
@media (max-width: 820px) {
  .join__grid {
    grid-template-columns: 1fr;
  }
}


/* sections/capability.css */
/*
  Section: capability — 企業AI開発に特化した、技術の芯。
  既製品の組み合わせではなく、モデル最適化から運用基盤まで自分たちで設計できる主体性を示す濃色帯。
  アイコン+番号モチーフで各領域を視覚的に区別する。
*/
.capability__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.capability__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.capability__item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

.capability__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(58, 95, 235, 0.18) 0%, rgba(0, 201, 167, 0.14) 100%);
  color: var(--teal);
}

.capability__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.capability__body {
  flex: 1;
  min-width: 0;
}

.capability__num {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-latin);
  color: var(--teal);
  margin-bottom: var(--space-1);
}

.capability__term {
  font-size: var(--fs-h3);
  color: #FFFFFF;
  margin-bottom: var(--space-2);
}

.capability__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .capability__grid {
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  .capability__item {
    padding: var(--space-3);
  }
  .capability__term {
    font-size: var(--fs-body);
    margin-bottom: var(--space-1);
    word-break: keep-all;
  }
  .capability__item {
    flex-direction: column;
    gap: var(--space-3);
  }
}


/* sections/chatbot.css */
/*
  ShinAI Website v2 — AIアシスタント(チャット)UI
  純白テーマに調和。藍青基調・青緑を一点のアクセントに。色/余白/型はトークンのみ参照。
  ローディングのドットはCSSで描く(FontAwesome等の外部依存なし)。
*/

.chatbot {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-overlay);
}

/* ---- 起動ボタン ---- */
.chatbot__launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--grad-dark);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.chatbot__launcher:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-brand);
}

.chatbot__launcher svg {
  color: var(--teal-2);
}

.chatbot__launcher-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---- ウィンドウ ---- */
.chatbot__window {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  width: min(380px, calc(100vw - 2rem));
  max-height: min(560px, calc(100svh - 7rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    visibility var(--dur-1) var(--ease-out);
}

.chatbot__window.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.chatbot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--grad-dark);
  color: #fff;
}

.chatbot__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.chatbot__subtitle {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: rgba(231, 234, 241, 0.78);
}

.chatbot__close {
  flex: none;
  color: rgba(231, 234, 241, 0.85);
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease-out);
}

.chatbot__close:hover {
  color: #fff;
}

/* ---- メッセージ列 ---- */
.chatbot__messages {
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--paper-2);
}

.chatbot__message {
  max-width: 86%;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  white-space: pre-wrap;
  word-break: break-word;
}

.chatbot__message--bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--charcoal);
  border-bottom-left-radius: var(--r-sm);
}

.chatbot__message--user {
  align-self: flex-end;
  background: var(--c-tacit-bg);
  color: var(--c-tacit-ink);
  border-bottom-right-radius: var(--r-sm);
}

.chatbot__cta {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 100%;
}

.chatbot__cta-btn {
  width: 100%;
  padding: 0.75rem 1rem;
}

/* ---- ローディングのドット(CSS) ---- */
.chatbot__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chatbot__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mist);
  animation: chatbot-dot 1.2s var(--ease-inout) infinite;
}

.chatbot__dot:nth-child(2) { animation-delay: 0.18s; }
.chatbot__dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes chatbot-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

/* ---- 入力 ---- */
.chatbot__form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.chatbot__input {
  flex: 1;
  resize: none;
  max-height: 96px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.chatbot__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.chatbot__send {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
  transition:
    filter var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.chatbot__send:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__dot { animation: none; }
}

@media (max-width: 480px) {
  .chatbot__launcher-label { display: none; }
  .chatbot__launcher { padding: 0.85rem; }
}

/* ---- モバイル: フルスクリーンのチャット画面(LINE型) ----
   ヘッダー固定・メッセージが伸縮・入力バーは常に最下部という3層のチャット画面。
   キーボードは chatbot.js が高さを計測し --chat-kb にセット、bottom だけを持ち上げる
   (高さ書換より描画が安定し、iOSのキーボードアニメーション中も崩れない)。
   背景の固定は chatbot.js が body position:fixed 方式で行う(iOSはoverflow:hiddenが効かない)。 */
@media (max-width: 640px) {
  .chatbot__window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--chat-kb, 0px);
    width: 100%;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(16px);
    transform-origin: center bottom;
  }
  .chatbot__window.is-open {
    transform: none;
  }

  /* ヘッダーはコンパクトに。副題は畳んで視線をメッセージへ */
  .chatbot__head {
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }
  .chatbot__subtitle {
    display: none;
  }

  .chatbot__messages {
    min-height: 0;
    padding: var(--space-3);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 吹き出し: LINE同等の可読サイズと丸み。自分=ブランド青/相手=白 */
  .chatbot__message {
    max-width: 80%;
    padding: 0.65rem 0.95rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    border-radius: 1.1rem;
  }
  .chatbot__message--bot {
    border-bottom-left-radius: 0.3rem;
  }
  .chatbot__message--user {
    background: var(--brand);
    color: #FFFFFF;
    border-bottom-right-radius: 0.3rem;
  }

  /* 入力バー: ピル型入力+丸ボタン。ホームバー領域(safe-area)を確保 */
  .chatbot__form {
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
  .chatbot__input {
    /* 16px未満だとiOSがフォーカス時にページ全体をズームしレイアウトが崩壊する */
    font-size: 16px;
    border-radius: var(--r-pill);
    padding: 0.6rem 1rem;
  }
  .chatbot__send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
}


/* sections/company.css */
/*
  Section: Who We Are (#company)
  会社情報・人・七つのShin。写真は持たず、明朝のモノグラムで品位を担う。
  七つのShinは三つ(真・信・伸)を立て、残りは静かな思想として下に添える。
  純白・薄陰どちらの地でも成立するよう、面は白の半透明を地とする。
  色・余白・型はトークンのみ参照。
*/

/* ---- 会社情報 ----
   箱で飾らず、正統派の罫線テーブルで静かに示す。行高を絞りスクロール負荷を残さない */
.company__facts {
  max-width: 720px;
  border-top: 1px solid var(--line);
}

.company__facts > div {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.company__fact-term {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.company__fact-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--ink);
}

@media (max-width: 640px) {
  .company__facts > div {
    grid-template-columns: 6.5em 1fr;
    gap: var(--space-3);
    padding-block: var(--space-2);
  }
  .company__fact-desc {
    font-size: var(--fs-sm);
  }
}

/* ---- 人 ---- */
.company__people {
  display: grid;
  /* min(20rem, 100%): 320px級の狭幅でも列最小幅がビューポートを超えない */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.company__person {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.company__portrait {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: top center;
}

.company__person-role {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

.company__person-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.company__person-latin {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--mist);
  margin-top: 0.2em;
}

.company__person-bio {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.company__person-skills {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--mist);
}

.company__person-skills-label {
  display: inline-block;
  margin-right: var(--space-2);
  font-weight: 500;
  color: var(--brand);
}



/* sections/contact.css */
/*
  Section: CONTACT — 無料相談の流れ・問い合わせフォーム・連絡先。
  純白基調に淡い諧調。フォームは見やすさとフォーカス可視を最優先。
  色・余白・型はトークンのみ参照。クラスは .contact- で名前空間化。
*/

/* ---- 無料相談の流れ ----
   箱を廃したエディトリアルなタイムライン。番号ノードをレールでつなぎ、工程の進行を静かに描く。
   デスクトップ: 横並び・ノードの高さでレールを渡す。モバイル: 左レールの縦タイムラインへ。
   ノード径 64px を単一の真実源として位置計算に用いる。 */
.contact-flow {
  --node: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 3vw, var(--space-6));
}

.contact-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ノード: アイコンを収めた円 + 右上の番号チップ。工程の「点」を明確に立てる。 */
.contact-flow__node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  margin-bottom: var(--space-4);
}

.contact-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--brand);
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: 0 6px 18px rgba(58, 95, 235, 0.10);
  transition:
    border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.contact-flow__icon svg {
  width: 26px;
  height: 26px;
}

.contact-flow__step:hover .contact-flow__icon {
  border-color: var(--brand);
  transform: translateY(-3px);
}

/* 右上に小さく番号を添える。進行(01→02→03)を数字で明示する。 */
.contact-flow__num {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-inline: 0.35em;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  background: var(--brand);
  border: 2px solid var(--paper);
}

/* レール: ノード中心の高さで、円の縁から次の円の縁へ渡す。方向を示すブランド→青緑のグラデ。 */
.contact-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--node) / 2);
  left: calc(50% + var(--node) / 2 + var(--space-2));
  width: calc(100% - var(--node) + clamp(var(--space-4), 3vw, var(--space-6)) - var(--space-2) * 2);
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 55%, transparent),
    color-mix(in srgb, var(--teal) 55%, transparent));
  transform: translateY(-50%);
}

.contact-flow__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-flow__title {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.contact-flow__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 22em;
  margin-inline: auto;
}

/* ---- レイアウト: フォーム + 連絡先 ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ---- フォームカード ---- */
.contact-form-card {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand);
}

.contact-form-card__head {
  margin-bottom: var(--space-5);
}

.contact-form-card__title {
  font-size: var(--fs-h2);
  margin-top: var(--space-2);
}

.contact-form-card__lead {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* ---- フォーム本体 ---- */
.contact-form {
  display: grid;
  gap: var(--space-4);
}

.contact-field {
  display: grid;
  gap: var(--space-2);
}

.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}

/* 必須・任意は色だけに依存させず文字で示す */
.contact-req,
.contact-opt {
  font-family: var(--font-latin);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.12em 0.6em;
  border-radius: var(--r-pill);
  line-height: 1.5;
}

.contact-req {
  color: #FFFFFF;
  background: var(--brand);
}

.contact-opt {
  color: var(--ink-3);
  background: var(--paper-3);
  border: 1px solid var(--line);
}

.contact-field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--charcoal);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.contact-field__input::placeholder {
  color: var(--mist);
  opacity: 0.85;
}

.contact-field__input:hover {
  border-color: var(--ink-3);
}

.contact-field__input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.contact-field__input[aria-invalid="true"] {
  border-color: #B23A3A;
  box-shadow: 0 0 0 3px rgba(178, 58, 58, 0.16);
}

.contact-field__textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-field__hint {
  font-size: var(--fs-sm);
  color: var(--mist);
}

.contact-field__error {
  font-size: var(--fs-sm);
  color: #B23A3A;
}

/* ---- 同意 ---- */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.contact-consent__input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--brand);
  cursor: pointer;
}

.contact-consent__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.contact-consent__link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-ink);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.contact-consent__link:hover {
  text-decoration-color: var(--brand);
}

.contact-form__note {
  font-size: var(--fs-sm);
  color: var(--mist);
}

.contact-form__submit {
  margin-top: var(--space-2);
}

.contact-form__btn {
  width: 100%;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out);
}

.contact-form[data-state="sending"] .contact-form__btn {
  opacity: 0.65;
  pointer-events: none;
}

.contact-form__btn-arrow {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- 送信フィードバック ---- */
.contact-form__feedback {
  padding: var(--space-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.contact-form__feedback--success {
  background: var(--teal-soft);
  color: var(--c-agent-ink);
  border: 1px solid rgba(0, 201, 167, 0.30);
}

.contact-form__feedback--error {
  background: #FFF0F0;
  color: #B23A3A;
  border: 1px solid rgba(178, 58, 58, 0.22);
}

.contact-form__feedback--error a {
  color: #B23A3A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- ハニーポット ---- */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 連絡先・活動拠点 ---- */
.contact-aside {
  position: relative;
  padding: clamp(var(--space-5), 4vw, var(--space-6));
  /* 薄水色(カテゴリ色)ではなく温かいオフホワイト地に。AIっぽさを避け本文と調和させる。 */
  background: var(--paper-2);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-xl);
}

.contact-aside__title {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.contact-info {
  display: grid;
  gap: var(--space-4);
}

.contact-info__item {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-ink);
}

.contact-info__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-info__label {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-tacit-ink);
}

.contact-info__value {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

.contact-info__link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-ink);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.contact-info__link:hover {
  text-decoration-color: var(--brand);
}

.contact-chat {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-ink);
}

.contact-chat__title {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.contact-chat__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* ---- レスポンシブ ---- */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* タブレット帯: ノードをやや詰める(横3列は維持)。 */
@media (max-width: 820px) {
  .contact-flow {
    --node: 56px;
  }
  .contact-flow__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* スマートフォン: 横スクロールをやめ、左レールの縦タイムラインへ。
   ノードを左・本文を右に置き、ノード中心を縦のレールが貫く。上から下への流れが自然で溢れない。 */
@media (max-width: 640px) {
  .contact-flow {
    --node: 52px;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-flow__step {
    display: grid;
    grid-template-columns: var(--node) 1fr;
    column-gap: var(--space-4);
    align-items: start;
    text-align: left;
    padding-bottom: var(--space-5);
  }
  /* 最終ステップ下の余白は不要(レールも伸ばさない)。 */
  .contact-flow__step:last-child {
    padding-bottom: 0;
  }
  .contact-flow__node {
    margin-bottom: 0;
  }
  /* 縦レール: ノード中心から次のノードへ、列を貫いて下ろす。 */
  .contact-flow__step:not(:last-child)::after {
    top: var(--node);
    left: calc(var(--node) / 2);
    width: 2px;
    height: calc(100% - var(--node));
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 55%, transparent),
      color-mix(in srgb, var(--teal) 55%, transparent));
    transform: translateX(-50%);
  }
  .contact-flow__body {
    align-items: flex-start;
    padding-top: 0.35rem;
  }
  .contact-flow__text {
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 480px) {
  .contact-field-row {
    grid-template-columns: 1fr;
  }
}


/* sections/creed.css */
/*
  Section: creed — ShinAIの企業理念を掲げる帯。
  公式HP(shin-ai-inc/website)の mission-section を実ソースから完全移植(色相・フォント・寸法)。
  くっきりした青緑グラデーション帯。太字・白・中庸サイズ、本文相当フォント。
  PCは一行、768px以下は「真の価値を信じ、」の後で改行。
*/
/* z-index は付けない(スタッキング文脈を作らない)。
   こうすることで帯のグラデーションは背面に、creed__text は前面のパーティクル層よりさらに前へ抜ける。 */
/* 静的(非配置)にして背景を固定パーティクル場(z:0)の「下」へ置く。これで粒子が帯の上に
   鮮やかに乗る(旧サイトの mission-section と同じ仕組み)。creed__text は z:3 で前面・鮮明。 */
.creed {
  padding: 2rem 0;
  text-align: center;
  background: var(--grad-creed);
}

.creed__text {
  position: relative;
  z-index: var(--z-stack-content);
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-family: var(--font-creed);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.13em;
  color: #FFFFFF;
}

.creed__line {
  display: inline;
}

@media (max-width: 820px) {
  .creed {
    padding: 1rem 0;
  }
  .creed__text {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .creed__line {
    display: block;
  }
}

@media (max-width: 640px) {
  .creed {
    padding: 0.75rem 0;
  }
  .creed__text {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
  }
}


/* sections/cta.css */
/*
  Section: CTA (#contact) — section--ink の藍背景にエネルギーオレンジのCTAを立てる。
  色・余白・型はトークンのみ参照。
*/

.cta__inner {
  text-align: center;
}

.cta__lead {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.cta__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: #FFFFFF;
  letter-spacing: 0.07em;
}

.cta__title-line {
  display: block;
}

.cta__copy {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  color: #C7CEDC;
}

.cta__copy-line {
  display: block;
}

.cta__action {
  margin-top: var(--space-6);
}

/* オレンジ地の白文字は 2.36:1(淡端は 1.73:1)で AA に遠く届かない。
   ブランドのオレンジ #FF8A00 はそのままに、文字を濃紺へ替えて 7.30:1 を確保する。
   矢印SVGは currentColor なので追従する。 */
.cta__btn {
  background: var(--grad-energy);
  color: var(--ink);
  box-shadow: var(--shadow-energy);
  padding-inline: var(--space-5);
}

.cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-energy), 0 16px 48px rgba(255, 138, 0, 0.22);
  filter: brightness(1.06);
}

.cta__btn-arrow {
  width: 1.1rem;
  height: 1.1rem;
}

.cta__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  max-width: var(--container-narrow);
  margin: var(--space-7) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

.cta__fact {
  display: grid;
  gap: var(--space-1);
}

.cta__fact-label {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-2);
}

.cta__fact-value {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: #E7EAF1;
}

.cta__fact-link {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.cta__fact-link:hover {
  text-decoration-color: var(--teal);
}

@media (max-width: 640px) {
  .cta__action {
    margin-top: var(--space-4);
  }
  .cta__facts {
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  /* ローマ字ラベル(CONTACT/HOURS/CONSULTATION)はモバイルでは省く。値は自明で足りる。 */
  .cta__fact-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .cta__btn {
    width: 100%;
    max-width: 340px;
  }
  .cta__facts {
    padding-top: var(--space-4);
    margin-top: var(--space-5);
  }
}


/* sections/faq.css */
/*
  Section: FAQ (#faq)
  ネイティブ <details>/<summary> のアコーディオン。JSなし・CSPセーフ。
  マーカーは自作の線(+ / -)で、開閉を形と動きの両方で示す(色だけに依存しない)。
  色・余白・型はトークンのみ参照。
*/

/* ---- カテゴリ絞り込み(JSによる段階的強化。無効時は非表示のまま全問閲覧可) ---- */
.faq-controls {
  margin-bottom: var(--space-5);
}

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.faq-chip {
  padding: 0.4em 1.1em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.faq-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.faq-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

.faq__groups {
  display: grid;
  gap: var(--space-6);
}

.faq-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  padding-left: var(--space-3);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--brand);
}

.faq-group__icon {
  flex-shrink: 0;
  width: 1.3em;
  height: 1.3em;
  color: var(--brand);
}

.faq-group__list {
  display: grid;
  gap: var(--space-2);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.faq-item[open] {
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-md);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink);
}

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

.faq-item__q:hover { color: var(--brand); }

.faq-item__q-text {
  flex: 1;
  text-wrap: pretty;
}

/* 質問文を文節単位で折り返し、行末の「か。」等の孤立を防ぐ(日本語専用) */
:lang(ja) .faq-item__q-text {
  word-break: auto-phrase;
}

/* 自作マーカー: 横棒(常時) + 縦棒(閉時のみ) = + / - */
.faq-item__marker {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brand);
}

.faq-item__marker::before,
.faq-item__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

.faq-item__marker::before {
  width: 1.1rem;
  height: 1.6px;
}

.faq-item__marker::after {
  width: 1.6px;
  height: 1.1rem;
}

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

.faq-item__a {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--charcoal);
}

.faq-item__a p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  text-wrap: pretty;
}

:lang(ja) .faq-item__a p {
  word-break: auto-phrase;
}

/* 開く際の入場アニメーション */
.faq-item[open] .faq-item__a {
  animation: faq-open var(--dur-2) var(--ease-out);
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* モバイルは質問・回答の字を一段落として、スマートで軽快な一覧にする */
@media (max-width: 640px) {
  .faq-item__q {
    font-size: var(--fs-sm);
    padding-block: var(--space-3);
    gap: var(--space-3);
  }
  .faq-item__a p {
    font-size: var(--fs-sm);
    /* 狭幅では文節ごとの改行(auto-phrase)がかえって読みにくいため通常の折り返しへ戻す。 */
    word-break: normal;
  }
}

@media (max-width: 480px) {
  .faq-item__q,
  .faq-item__a {
    padding-inline: var(--space-4);
  }
}


/* sections/footer.css */
/*
  Footer (.site-footer) — 深い藍黒の静かな締め。主要ページの末尾 CTA(section--ink)の
  グラデーション終端色(--ink-deep)と同色にし、直上セクションと途切れなく連続させる。
  情報は保ちつつ一望できる低さでスクロール負荷を残さない。色・余白・型はトークンのみ参照。
*/

.site-footer {
  background: var(--ink-deep);
  padding-block: var(--space-5) var(--space-4);
  color: rgba(255, 255, 255, 0.78);
}

/* ---- ブランド + 横並びナビ ---- */
.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3) var(--space-6);
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #FFFFFF;
}

.site-footer__wordmark-ai {
  background: var(--grad-brand-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-footer__essence {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.62);
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__nav-link {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur-1) var(--ease-out);
}

.site-footer__nav-link:hover {
  color: #FFFFFF;
}

/* ---- 会社メタ(1〜2行に流す) ---- */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-4);
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.45);
}

.site-footer__meta-link {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.site-footer__meta-link:hover {
  text-decoration-color: var(--teal);
}

/* ---- 規約・コピーライト ---- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__legal-link {
  /* 直上の会社メタ(.site-footer__meta = --fs-xs)とテキストサイズを揃える */
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--dur-1) var(--ease-out);
}

.site-footer__legal-link:hover {
  color: #FFFFFF;
}

.site-footer__copyright {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: rgba(255, 255, 255, 0.45);
}

/* ---- モバイル(<=640px): 偶然の折返しに任せず、意図した段組みへ ----
   全 base 規則の後に置き、確実に上書きする(モバイル上書きはファイル末尾が正)。
   ワードマーク+一文 / 罫線付き2カラムのナビ / 縦組みメタ / 縦組み規約。
   タップ領域を確保し(min 44px)、上下に呼吸を持たせて品位を保つ。 */
@media (max-width: 640px) {
  .site-footer {
    padding-block: var(--space-6) var(--space-5);
  }

  .site-footer__main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
  }

  /* ナビは緩い折返しをやめ、罫で仕切った2カラムの一覧にする。
     行間ゼロ＋上罫で、5項目が静かなリストとして整列する。 */
  .site-footer__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
  }

  /* 5項目め(長いラベル)は半幅だと折り返すため、最終行を全幅に伸ばす */
  .site-footer__nav-list > li:last-child {
    grid-column: 1 / -1;
  }

  /* タップ領域は padding-block(=56px)が担保するため、字は控えめの fs-sm でよい。
     最長ラベルも 320px 幅の全幅行に1行で収まり、全幅で破綻しない。
     モバイルは hover が無く静的テキストに見えるため、右端に控えめな山括弧を添えて
     「タップで各ページへ進む」ことを明示し、押下時は白く反応させる(タップ手応え)。 */
  .site-footer__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
  }

  .site-footer__nav-link::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.4);
    border-right: 1.5px solid rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
  }

  .site-footer__nav-link:active {
    color: #FFFFFF;
  }

  .site-footer__nav-link:active::after {
    border-color: #FFFFFF;
  }

  /* メタは1項目1行の縦組み(折返しの偶然に任せない)。行間はやや開けて可読に */
  .site-footer__meta {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* 規約とコピーライトは縦に積み、左揃えで静かに締める */
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}


/* sections/frontier.css */
/*
  Section: frontier — フィジカルAI研究開発(PoC)。差別化の芯。
  三つの提供価値(受託メニュー)の外側にある研究開発領域を、濃色帯に「一つの言明」として静かに立てる。
  情報を足さず引く。抽象的な技術カードを重ねず、核心を一息で伝える。色・余白・型はトークンのみ参照。
*/
.frontier {
  position: relative;
  overflow: hidden;
}

/* 上端の細いブランド罫。淡色/濃色の境で「ここから別の話」と分かる静かな合図。 */
.frontier::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--grad-brand-line);
  opacity: 0.7;
}

/* 中央に絞った縦組みのロックアップ。余白で格を作る。 */
.frontier__inner {
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* eyebrow と「新サービス」バッジを一行に並べる。バッジで新規提供であることを一目で示す。 */
.frontier__eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.frontier__badge {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.2em 0.85em;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--teal-2);
  white-space: nowrap;
}

.frontier__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-top: var(--space-4);
}

.frontier__lead {
  margin-top: var(--space-5);
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

.frontier__meta {
  margin-top: var(--space-3);
  max-width: 34em;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* 淡いゴースト型CTA。濃地に馴染ませ、hoverで青緑に開く。 */
.frontier__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0.8rem 1.7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  transition:
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.frontier__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-1) var(--ease-out);
}

.frontier__cta:hover {
  border-color: var(--teal-2);
  color: var(--teal-2);
  background: rgba(32, 231, 196, 0.06);
}

.frontier__cta:hover svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .frontier__headline {
    font-size: 1.4rem;
  }
  .frontier__lead {
    font-size: var(--fs-body);
    margin-top: var(--space-4);
  }
}


/* sections/header.css */
/*
  ShinAI Website v2 — Section: site header
  Sticky 純白基調のヘッダー。scroll で condense（nav.js が .is-condensed を付与）。
  モバイルは hamburger で nav を展開（nav.js が .is-open を付与）。
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.site-header.is-condensed {
  /* スクロール追従時は不透明にする。下部の暗色セクション(CTA・フッターの会社情報)が
     磨りガラス越しに透けて「文字が重なって見える」のを防ぐ。トップでは従来の透過を保つ。 */
  background: var(--paper);
  border-bottom-color: var(--line-ink);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  transition: min-height var(--dur-1) var(--ease-out);
}

.site-header.is-condensed .site-header__inner {
  min-height: var(--header-h-condensed);
}

/* ---- Brand wordmark ---- */
/* 企業名の真上にタグラインを小さく重ねる縦積みロックアップ */
.site-header__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: none;
}

.site-header__tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  white-space: nowrap;
}

.site-header__tagline::before,
.site-header__tagline::after {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: var(--grad-brand);
  opacity: 0.8;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}

.site-header__wordmark-accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Nav ---- */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  padding-block: var(--space-1);
  transition: color var(--dur-1) var(--ease-out);
}

.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-1) var(--ease-out);
}

.site-header__link:hover {
  color: var(--brand);
}

.site-header__link:hover::after {
  transform: scaleX(1);
}

.site-header__cta {
  padding: 0.6rem 1.3rem;
}

/* ---- Language switch ---- */
/* ナビの外(ハンバーガーの手前)に置き、モバイルでもメニューを開かずに1タップで切り替えられる。
   margin-left:auto でブランドとの間を開き、以降(nav / toggle)を右へ寄せる。 */
.site-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line-ink);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.site-header__lang-icon {
  flex: none;
  opacity: 0.7;
  transition: opacity var(--dur-1) var(--ease-out);
}

.site-header__lang:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}

.site-header__lang:hover .site-header__lang-icon {
  opacity: 1;
}

/* ---- Mobile toggle ---- */
.site-header__toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  color: var(--ink);
}

/* 開閉は回転モーフを使わず、ハンバーガーと静的な×を差し替える(安っぽい変形を排す)。 */
.site-header__toggle-icon--close {
  display: none;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--menu {
  display: none;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--close {
  display: block;
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  /* モバイルでは磨りガラスをやめ常時不透明にする。追従ヘッダーが下部の暗色情報に
     被った際の透け重なり(および iOS の sticky+blur 描画不具合)を根絶する。 */
  .site-header,
  .site-header.is-condensed {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header__toggle {
    display: inline-flex;
  }

  /* ブランド(タグライン付き)・言語切替・ハンバーガーを一行に収める。
     間隔を詰め、余白の取り合いはタグラインに譲らせる。 */
  .site-header__inner {
    gap: var(--space-3);
  }

  .site-header__lang {
    padding: 0.4rem 0.7rem;
  }

  /* 旧公開サイトで施主が評価した挙動を継承: 全幅で覆わず、右側からドロワーが滑り込む。
     左に余白を残し背後のページが見えることで「今の場所」を失わせない。右から translateX で入る。 */
  .site-header__nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(78%, 20rem);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4) var(--gutter) var(--space-4);
    background: var(--paper);
    border-left: 1px solid var(--line-ink);
    box-shadow: -8px 0 28px rgba(16, 24, 40, 0.12);
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dur-1) var(--ease-out),
      transform var(--dur-1) var(--ease-out),
      visibility var(--dur-1) var(--ease-out);
  }

  .site-header__nav.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* condense 中はヘッダー実高に天位置を追従させる(初期78と縮小64のズレを防ぐ) */
  .site-header.is-condensed .site-header__nav {
    top: var(--header-h-condensed);
  }

  .site-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 罫で仕切ったコンパクトな一覧。字は本文サイズ・行間を締め、面積を抑えつつ
     タップ領域(約46px)は padding-block で確保する。 */
  .site-header__link {
    display: block;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--line);
  }

  .site-header__link::after {
    display: none;
  }

  .site-header__cta {
    margin-top: var(--space-3);
    padding: 0.8rem 1.5rem;
  }
}

/* 狭幅では言語切替を地球アイコンだけに畳む。ブランドのタグラインと
   ハンバーガーが一行に収まらなくなるため、先に文字ラベルを落とす。
   アイコン単独でも意味は通り、ナビの外にあるので1タップのまま。 */
@media (max-width: 480px) {
  .site-header__lang-label {
    display: none;
  }

  .site-header__lang {
    padding: 0.45rem;
  }

  /* 英語のタグラインは日本語より長く、文字ラベルを畳んだあとでも
     ブランド+言語切替+ハンバーガーが 390px 幅に収まらず横スクロールが出る
     (ブランドは flex: none、タグラインは nowrap で縮まないため)。
     タグラインは装飾的な副題で、ワードマークだけでブランドは成立するため、
     不足している英語側だけを畳む。日本語は従来どおり表示する。 */
  :lang(en) .site-header__tagline {
    display: none;
  }
}


/* sections/hero.css */
/*
  ShinAI Website v2 — Section: hero
  純白の上に三次元パーティクルcanvasを敷き、その上に静かなコピーを重ねる。
  ShinAI のクリーンなブランドに合わせ、背景は白基調(公式HPと同様)。
  改行は意味単位。各 line ブロックで mobile でも崩れない。
*/

/* Hero と 信念バンド(creed)を一つの量子パーティクル場で包む共有レイヤー。
   白基調。creed の青緑グラデーションだけが下部で立ち上がる。
   没入ゾーン全体で初見の1画面を満たす(次セクションはスクロールするまで覗かせない)。 */
/* 静的(非配置・非 isolate)にして、内側の信念帯の背景を固定パーティクル場(z:0)の下へ送る。
   これで creed を top view に収めつつ、粒子が帯の上に乗る(旧サイト同様)。 */
.hero-stack {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  height: calc(100lvh - var(--header-h));
  /* 地色は body.is-home のペーパーグラデ + 固定パーティクルが担うため透過にする。 */
  background: transparent;
}

/* パーティクル場をページ全体の固定オーバーレイに。旧サイト同様、セクション背景の「上」・
   本文コンテンツの「下」(z:0)に置く。静的セクションの背景に粒子が乗り、コンテンツ(z:1)は前面で鮮明。
   高さは 100lvh(large viewport height=アドレスバー格納時で安定)に固定する。モバイルでスクロール中に
   バーが出入りしても canvas の高さが揺れず、地球儀が拡大・縮小しない。バッファは常に表示と一致させ
   (particles.js は resize で常時同期)、縦長楕円化を防ぐ。 */
.site-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 高さを動的ビューポート(inset:0=bottom追従)にすると、モバイルでアドレスバーが
     開閉するたび入れ物の高さが変わり、中央配置のcanvas中心が上下にずれる(=スクロールで
     地球儀が動く)。100lvh(大ビューポート高で安定)に固定し、入れ物の中心を不動にする。 */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* canvas は 100% で引き伸ばさず、固定ピクセルサイズのまま中央に置き overflow で切り取る。
   これでモバイルのアドレスバー開閉で高さが変わっても、バッファは伸びず(楕円化しない)
   拡大もしない。描画サイズのロックは particles.js が担う。 */
.site-particles canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ヒーロー高さは控えめにし、直下の信念バンドを初見の下部に引き上げる
   (上=価値提案 / 下=信念 を一画面の縦構図にする) */
.hero {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: clamp(340px, 52svh, 600px);
  padding-block: var(--space-6) var(--space-6);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: var(--z-stack-content);
  max-width: 880px;
  display: flex;
  flex-direction: column;
}

.hero__eyebrow {
  margin-bottom: var(--space-2);
}

.hero__eyebrow-en {
  text-transform: none;
}

.hero__category {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}

/* ---- Title ---- */
.hero__title {
  font-size: clamp(1.9rem, 3.4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
  .hero__title {
    letter-spacing: 0.01em;
  }
}

.hero__title-line {
  display: block;
}

@media (min-width: 640px) {
  .hero__title-line {
    white-space: nowrap;
  }
}

.hero__title-line--accent {
  color: var(--teal);
}

/* ---- Subcopy ---- */
/* margin-bottom: calc(43.3vh - 212px) はヘッダー78px・creed132px・padding48px×2を考慮した
   globe_bottom(hero-stack×0.567) から60px上に subcopy_top を揃える比例式。
   大小どの画面高さでも「積み上げた文書。/ AIへ変える。」が地球儀下端に重なる。 */
.hero__subcopy {
  max-width: 40em;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  color: var(--charcoal);
  margin-top: auto;
  margin-bottom: max(0px, calc(43.3vh - 212px));
}

/* 820px以下はcreed高さが79pxに変わるため定数を補正(212→159)。
   640px以下でflex-startに戻るため margin-top/bottomを明示リセット。 */
@media (max-width: 820px) {
  .hero__subcopy {
    margin-bottom: max(0px, calc(43.3vh - 159px));
  }
}

@media (max-width: 640px) {
  /* eyebrow はやや控えめに。subcopy はタイトルとの間を空け、地球儀側へ少し下げる */
  .hero__eyebrow {
    font-size: 0.62rem;
  }
  .hero__subcopy {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.75;
    color: var(--ink-3);
    margin-top: 2.5rem;
    margin-bottom: var(--space-5);
  }
}

.hero__subcopy-line {
  display: block;
}

/* ---- Immersive variant: 白基調ヒーロー(TOP専用) ----
   背景は .hero-stack(白)に委譲。ここは透過し、白地の上の量子パーティクル場を見せる。
   テキストはダーク基調で白地に対して可読。 */
.hero--immersive {
  background: transparent;
  color: var(--ink);
}

.hero--immersive .hero__category {
  color: var(--ink-3);
}

.hero--immersive .hero__title {
  color: var(--ink);
}

.hero--immersive .hero__title-line--accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero--immersive .hero__subcopy {
  color: var(--charcoal);
}

/* ---- Entrance animation (page load, not scroll) ---- */
.hero--immersive .hero__eyebrow,
.hero--immersive .hero__title,
.hero--immersive .hero__subcopy {
  animation: heroLineIn 0.9s var(--ease-out) both;
}
.hero--immersive .hero__eyebrow  { animation-delay: 0.05s; }
.hero--immersive .hero__title    { animation-delay: 0.22s; }
.hero--immersive .hero__subcopy  { animation-delay: 0.44s; }
@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .hero {
    min-height: clamp(440px, 68svh, 580px);
  }
}

/* モバイルでは hero-stack の全画面強制を解除し、コンテンツ自然高さにする。
   creed セクションが直後に続くことで初期画面内に両方が収まる。 */
@media (max-width: 640px) {
  /* svh = ブラウザUI込みの保守的なビューポート高さ。地球儀をキャンバス中央=画面中央に揃える。 */
  .hero-stack {
    height: calc(100svh - var(--header-h));
  }
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding-block: 1.25rem var(--space-3);
  }
}

/* ランドスケープモバイル(高さ500px以下): creedが折れないよう hero-stack を auto高さに。 */
@media (max-height: 500px) {
  .hero-stack {
    height: auto;
    min-height: calc(100svh - var(--header-h));
  }
  .hero {
    min-height: 0;
  }
  .creed {
    padding: 0.5rem 0;
  }
  .creed__text {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
  }
}


/* sections/industries.css */
/*
  ShinAI Website v2 — Section: industries（業種別の活用イメージ）
  各業種カードは「現場のよくある困りごと」から「暗黙知AIでどう変わるか」への before-after を対で持つ。
  3ソリューションの色分け(tacit/agent/enable)を --acc-bg / --acc-ink として受け取り、
  ラベル・線画アイコン・矢印・after 面へ淡く波及させる。色・余白・型はトークンのみ参照。
*/

/* ---- Grid ---- */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-4), 2.5vw, var(--space-5));
}

/* ---- Card ---- */
.industries-card {
  --acc-bg: var(--c-tacit-bg);
  --acc-ink: var(--c-tacit-ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc-bg) 30%, #FFFFFF) 0%, #FFFFFF 38%);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.industries-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--acc-ink) 24%, var(--line));
}

.industries-card--tacit {
  --acc-bg: var(--c-tacit-bg);
  --acc-ink: var(--c-tacit-ink);
}

.industries-card--agent {
  --acc-bg: var(--c-agent-bg);
  --acc-ink: var(--c-agent-ink);
}

.industries-card--enable {
  --acc-bg: var(--c-enable-bg);
  --acc-ink: var(--c-enable-ink);
}

/* 業種ごとに固有色を与える(AI的な原色循環を脱した8色のエディトリアル・パレット)。
   並びはHTMLの業種順: 製造/建設/介護/小売/医療福祉/教育/金融/不動産。 */
.industries-card:nth-of-type(1) { --acc-ink: var(--ind-1-ink); --acc-bg: var(--ind-1-bg); }
.industries-card:nth-of-type(2) { --acc-ink: var(--ind-2-ink); --acc-bg: var(--ind-2-bg); }
.industries-card:nth-of-type(3) { --acc-ink: var(--ind-3-ink); --acc-bg: var(--ind-3-bg); }
.industries-card:nth-of-type(4) { --acc-ink: var(--ind-4-ink); --acc-bg: var(--ind-4-bg); }
.industries-card:nth-of-type(5) { --acc-ink: var(--ind-5-ink); --acc-bg: var(--ind-5-bg); }
.industries-card:nth-of-type(6) { --acc-ink: var(--ind-6-ink); --acc-bg: var(--ind-6-bg); }
.industries-card:nth-of-type(7) { --acc-ink: var(--ind-7-ink); --acc-bg: var(--ind-7-bg); }
.industries-card:nth-of-type(8) { --acc-ink: var(--ind-8-ink); --acc-bg: var(--ind-8-bg); }

/* ---- Card head ---- */
.industries-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.industries-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-md);
  /* 淡色チップだと沈むため、業種色のグラデチップ+白アイコンで生き生きと立たせる */
  background: linear-gradient(140deg, var(--acc-ink) 0%, color-mix(in srgb, var(--acc-ink) 74%, #FFFFFF) 100%);
  color: #FFFFFF;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--acc-ink) 24%, transparent);
}

.industries-card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.industries-card__heading {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.1rem;
}

.industries-card__label {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--acc-ink);
}

.industries-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* ---- before -> after flow ---- */
.industries-card__flow {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.industries-card__state {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
}

.industries-card__state--before {
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.industries-card__state--after {
  background: var(--acc-bg);
  border: 1px solid color-mix(in srgb, var(--acc-ink) 22%, transparent);
}

.industries-card__state-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.industries-card__state--before .industries-card__state-label {
  color: var(--mist);
}

.industries-card__state--before .industries-card__state-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mist);
  opacity: 0.7;
}

.industries-card__state--after .industries-card__state-label {
  color: var(--acc-ink);
}

.industries-card__state--after .industries-card__state-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-ink);
}

.industries-card__state-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--charcoal);
}

.industries-card__arrow {
  display: flex;
  justify-content: center;
  color: var(--acc-ink);
  opacity: 0.7;
}

.industries-card__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Bridge（業種を問わず） ---- */
.industries-bridge__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
}

.industries-bridge__item {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.industries-bridge__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-soft);
}

.industries-bridge__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand);
}

.industries-bridge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-3);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}

.industries-bridge__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.industries-bridge__item-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.industries-bridge__item-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

.industries-bridge__note {
  max-width: var(--container-narrow);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .industries__grid {
    grid-template-columns: 1fr;
  }
  .industries-bridge__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .industries-card {
    padding: var(--space-4);
  }
  .industries-card__state {
    padding: var(--space-2) var(--space-3);
  }
  .industries-bridge__item {
    padding: var(--space-4);
  }
}


/* sections/legal.css */
/*
  ShinAI Website v2 — Section: legal pages (privacy / terms / tokushoho)
  長文の法的文書を、純白の品位を保ったまま読みやすく。
  色・余白・型・影・角丸・罫はトークンのみ参照。名前空間は .legal__*。
*/

.legal {
  padding-block: 0 var(--section-py);
}

/* ---- ページ冒頭のタイトル帯 ---- */
.legal__band {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--line);
}

.legal__band-inner {
  max-width: var(--container-narrow);
}

.legal__title {
  margin-top: var(--space-3);
  font-size: var(--fs-h1);
  color: var(--ink);
}

.legal__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

/* タイトル下のブランドグラデーション細線 */
.legal__rule {
  width: 64px;
  height: 2px;
  margin-top: var(--space-4);
  border: 0;
  background: var(--grad-brand);
  opacity: 0.9;
}

/* ---- 本文 ---- */
.legal__body {
  padding-top: var(--space-7);
}

.legal__intro {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
}

.legal__section {
  margin-top: var(--space-7);
}

.legal__section:first-of-type {
  margin-top: 0;
}

.legal__h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.legal__h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-2);
  margin-top: var(--space-5);
}

.legal__p {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
}

.legal__p + .legal__p {
  margin-top: var(--space-3);
}

/* ---- リスト ---- */
.legal__list {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.legal__list-item {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
}

.legal__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * 0.5em);
  width: 7px;
  height: 1px;
  background: var(--brand);
}

.legal__list--ordered {
  counter-reset: legal-ol;
}

.legal__list--ordered .legal__list-item {
  padding-left: var(--space-5);
  counter-increment: legal-ol;
}

.legal__list--ordered .legal__list-item::before {
  content: counter(legal-ol) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  color: var(--brand);
}

/* ---- 特商法の定義リスト ---- */
.legal__dl {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.legal__row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.legal__dt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-snug);
}

.legal__dd {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
}

/* ---- 連絡先・補足の囲み ---- */
.legal__note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.legal__note-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.legal__note-text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.legal__link {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}

.legal__link:hover {
  text-decoration-color: var(--brand);
}

/* ---- 制定・改定の小さな注記 ---- */
.legal__meta {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-1);
}

.legal__meta-item {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--mist);
}

/* ---- レスポンシブ ---- */
@media (max-width: 640px) {
  .legal__band {
    padding-block: var(--space-7) var(--space-5);
  }
  .legal__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .legal__dt {
    color: var(--ink-2);
  }
}


/* sections/method.css */
/*
  Section: Method (#method)
  5段階を一本の流れとして見せる。番号マーカーを線でつなぎ、
  PCは横の連続、モバイルは縦の連続として崩れず積み上がる。
  連結線はマーカーより下に置き、不透明なマーカー面で重なりを隠す。
  色・余白・型はトークンのみ参照。
*/

.method__flow {
  --method-marker: 3.25rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.method__step {
  position: relative;
  text-align: center;
}

/* 横の連結線(PC): マーカー中心から次のマーカー中心まで */
.method__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--method-marker) / 2);
  left: 50%;
  width: calc(100% + var(--space-4));
  height: 2px;
  transform: translateY(-1px);
  background: var(--grad-brand-line);
  z-index: var(--z-bg);
}

.method__marker {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  place-items: center;
  width: var(--method-marker);
  height: var(--method-marker);
  margin: 0 auto var(--space-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.method__step:hover .method__marker {
  border-color: var(--brand);
  box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.method__num {
  font-family: var(--font-latin);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-latin);
  color: var(--ink);
}

.method__label {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-1);
  transition: color var(--dur-1) var(--ease-out);
}

/* hover 時も明色地。--teal は白地 2.12:1 で AA を満たさないため濃いティールを使う */
.method__step:hover .method__label {
  color: var(--c-agent-ink);
}

.method__name {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.method__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

@media (max-width: 960px) {
  .method__flow {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .method__step {
    display: flex;
    gap: var(--space-4);
    text-align: left;
  }

  .method__marker {
    flex: 0 0 var(--method-marker);
    margin: 0;
  }

  .method__body {
    flex: 1;
    padding-top: var(--space-1);
  }

  /* 縦の連結線(モバイル) */
  .method__step:not(:last-child)::after {
    top: var(--method-marker);
    left: calc(var(--method-marker) / 2);
    width: 2px;
    height: calc(100% + var(--space-5));
    transform: translateX(-1px);
    background: linear-gradient(180deg, var(--brand), var(--teal), transparent);
  }
}


/* sections/news.css */
/*
  Section: News (#news) — 活動のお知らせ。
  画像付きの活動紹介を控えめに一覧する。カード言語は solutions/industries と同系。
  PCは画像左のメディアカード、モバイルは画像上の積層。色・余白・型はトークンのみ参照。
*/

.news__list {
  display: grid;
  gap: var(--space-4);
  max-width: 860px;
}

.news__item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.news__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}

/* カード全体をリンク面にする(どこを押しても遷移) */
.news__link {
  display: grid;
  grid-template-columns: 280px 1fr;
  align-items: center;
  color: inherit;
}

.news__thumb {
  overflow: hidden;
  background: var(--paper-2);
}

/* 画角は PC・モバイル共通で写真ネイティブの 4:3。aspect-ratio は img 自身に持たせる
   (コンテナ側に置くと子の height:100% が解決できず潰れるため)。cover でも全体が映る。 */
.news__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-2) var(--ease-out);
}

.news__item:hover .news__thumb img {
  transform: scale(1.04);
}

.news__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.news__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.news__date {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--mist);
}

.news__tag {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 0.15em 0.7em;
  border-radius: var(--r-pill);
}

.news__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}

/* 日本語を文節単位で折り返し、「第/9回」のような不自然な行末孤立を防ぐ(日本語専用) */
:lang(ja) .news__title {
  word-break: auto-phrase;
}

.news__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

.news__more {
  margin-top: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand);
}

.news__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-1) var(--ease-out);
}

.news__item:hover .news__more svg {
  transform: translate(2px, -2px);
}

/* モバイル: 画像を上・本文を下に積む。画角は 4:3 のまま(PCと同一)にして写真全体を見せる。 */
@media (max-width: 640px) {
  .news__link {
    grid-template-columns: 1fr;
  }
  .news__body {
    padding: var(--space-4);
  }
}


/* sections/page-hero.css */
/*
  ShinAI Website v2 — Section: page-hero（下層ページ共通の導入部）
  TOP の没入型ヒーローと差をつけ、下層は静かで整理された導入にする。
  純白基調に極淡い藍青の諧調。読み手がまず「今どこの話か」を一息で掴める設計。
*/

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--paper-2);
  background-image: var(--grad-section);
  border-bottom: 1px solid var(--line);
}

.page-hero__inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 820px;
}

.page-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--mist);
}

.page-hero__breadcrumb a {
  color: var(--ink-3);
  transition: color var(--dur-1) var(--ease-out);
}

.page-hero__breadcrumb a:hover {
  color: var(--brand);
}

.page-hero__breadcrumb-sep {
  color: var(--line);
}

.page-hero__eyebrow {
  margin-bottom: var(--space-3);
}

.page-hero__title {
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* 390px幅で最長タイトル行(12字)が一行に収まるサイズ。行末1字の孤立を防ぐ */
@media (max-width: 480px) {
  .page-hero__title {
    font-size: 1.65rem;
  }
}

.page-hero__title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .page-hero__title-line {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

.page-hero__title-accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero__lead {
  margin-top: var(--space-4);
  max-width: 46em;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.page-hero__lead-line {
  display: block;
}

@media (max-width: 480px) {
  .page-hero__lead-line {
    display: block;
  }
}


/* sections/process.css */
/*
  Section: How We Work (#process)
  伴走の五段階を時系列で。PCは「フェーズ｜目安」の二列、モバイルは積層リスト。
  番号を結ぶ細い縦線で、段階の連なりを示す。
  色・余白・型はトークンのみ参照。
*/

.process__list {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.process__phase {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.process__phase:hover {
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}

.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: var(--z-base);
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-ink);
  background: var(--paper);
  font-family: var(--font-latin);
  font-size: var(--fs-lead);
  letter-spacing: var(--tracking-latin);
  color: var(--brand);
}

/* 番号を貫く細い縦線。段階の連なりを静かに示す */
.process__list::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--teal) 100%);
  opacity: 0.25;
  z-index: var(--z-bg);
}

.process__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
}

.process__dur {
  justify-self: end;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  white-space: nowrap;
}

.process__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--mist);
}

.process__note-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15em;
  color: var(--teal);
}

.process__note-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .process__phase {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
  }
  .process__num {
    grid-row: span 2;
    width: 2.5rem;
    height: 2.5rem;
  }
  .process__dur {
    grid-column: 2;
    justify-self: start;
  }
  .process__list::before {
    left: 1.25rem;
  }
}


/* sections/purpose.css */
/*
  ShinAI Website v2 — Section: purpose
  哲学的な静けさのバンド。明朝の大きな一行と、銅の細い罫、支える一文。
  余白を最優先。詰め込まない。
*/

/* 透過して固定パーティクル場を通す(信念帯と同様の扱い)。isolate と不透明な紗背景を外し、
   文字の背後を粒子が抜けるようにする。地色は body.is-home のペーパーグラデが担う。 */
.purpose {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.purpose__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.purpose__eyebrow {
  margin-bottom: var(--space-6);
}

.purpose__statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2.5rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.purpose__statement-line {
  display: block;
}

@media (min-width: 640px) {
  .purpose__statement-line {
    white-space: nowrap;
  }
}

.purpose__rule {
  width: clamp(120px, 22vw, 200px);
  margin-block: var(--space-7);
}

@media (max-width: 640px) {
  .purpose__eyebrow {
    margin-bottom: var(--space-3);
  }
  .purpose__statement {
    font-size: 1.35rem;
  }
  .purpose__rule {
    margin-block: var(--space-4);
  }
}

.purpose__support {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.purpose__support-line {
  display: block;
}


/* sections/solutions.css */
/*
  Section: Solutions (#solutions)
  得られる成果で三つに色分け。各カードがセクションコーディングの淡色と
  アクセント色を --card-bg / --card-ink として受け取り、アイコン・罫・箇条書きへ波及させる。
  色・余白・型はトークンのみ参照。
*/

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.solution-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.solution-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-ink);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}

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

.solution-card:hover::before {
  opacity: 1;
}

.solution-card--tacit {
  --card-bg: var(--c-tacit-bg);
  --card-ink: var(--c-tacit-ink);
}

.solution-card--agent {
  --card-bg: var(--c-agent-bg);
  --card-ink: var(--c-agent-ink);
}

.solution-card--enable {
  --card-bg: var(--c-enable-bg);
  --card-ink: var(--c-enable-ink);
}

/* カード写真 — 上端からブリードして視覚的なアンカーを作る */
.solution-card__figure {
  position: relative;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  overflow: hidden;
  aspect-ratio: 5 / 3;
}

/* 3枚の質感差(抽象/コード/写真)を、各カードのアクセント色で淡く一族化する */
.solution-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--card-ink) 18%, transparent) 100%);
  pointer-events: none;
}

.solution-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-2) var(--ease-out);
}

.solution-card:hover .solution-card__figure img {
  transform: scale(1.04);
}

.solution-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--card-ink);
}

.solution-card__icon {
  width: 2rem;
  height: 2rem;
}

.solution-card__title {
  font-size: var(--fs-h3);
  color: var(--card-ink);
  margin-bottom: var(--space-2);
}

.solution-card__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin-bottom: var(--space-4);
}

.solution-card__divider {
  height: 1px;
  border: 0;
  margin-bottom: var(--space-4);
  background: var(--card-ink);
  opacity: 0.18;
}

.solution-card__items {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.solution-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--charcoal);
}

.solution-card__check {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  color: var(--card-ink);
}

/* タブレット: 1カラム化。過剰な横伸びを防ぐため最大幅を制限 */
@media (max-width: 960px) {
  .solutions__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  /* 1カラム化で全幅になるカード画像が縦に伸びすぎないよう帯状に固定する */
  .solution-card__figure {
    aspect-ratio: auto;
    height: clamp(150px, 26vw, 200px);
  }
}

/* タブレット帯(641-960): 縦積みの大画像カードは narrow column + 大画像で間延びする。
   画像を左へ寄せた横並びメディアカードにして幅を活かし、密度と品位を保つ。
   位置指定を明示し、col1=画像(全高)/col2=見出し・リード・罫・箇条書き とする。 */
@media (min-width: 641px) and (max-width: 960px) {
  .solutions__grid {
    max-width: 760px;
  }
  .solution-card {
    display: grid;
    grid-template-columns: 40% 1fr;
    column-gap: var(--space-5);
  }
  .solution-card__figure {
    grid-column: 1;
    grid-row: 1 / 99;
    margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
  }
  .solution-card__figure img {
    height: 100%;
  }
  .solution-card__title,
  .solution-card__lead,
  .solution-card__divider,
  .solution-card__items {
    grid-column: 2;
  }
  .solution-card__items {
    margin-top: 0;
  }
}

/* モバイル: PC同様の「画像上・本文下」を1カラムで踏襲する。
   72pxサムネイル横並びは長文リードの左に空白を生み崩れるため廃止。
   バナー画像はやや低めに抑え、長文でも均整を保つ。 */
@media (max-width: 640px) {
  /* 旧公開サイト同様、カードを画面端いっぱいに広げず左右にゆとりを持たせる。
     コンテナのガター内でさらに内側へ寄せ、圧迫感を和らげる。 */
  .solutions__grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: var(--space-3);
    padding-inline: var(--space-2);
  }
  /* 画面への圧迫を抑えるため、余白・画像・字を一段引き締めてスマートにする。 */
  .solution-card {
    padding: var(--space-3);
  }
  /* 画像は上端フルブリードの薄いバナー(5:2)にして縦の占有を減らす。 */
  .solution-card__figure {
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3);
    aspect-ratio: 5 / 2;
  }
  .solution-card__title {
    font-size: var(--fs-body);
  }
  .solution-card__lead {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
  }
}


/* sections/technology.css */
/*
  Section: Technology & Security (#technology)
  能力を三つの構え(つくる/まもる/ゆだねすぎない)に束ね、小さな線画チップで示す。
  各群はソリューションと響き合う淡色を --group-bg / --group-ink として受け取る。
  紙白・薄陰どちらの地でも成立するよう、群の地は淡色、チップは白を地とする。
  色・余白・型はトークンのみ参照。
*/

.tech__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.tech__group {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--group-bg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.tech__group:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--group-ink) 20%, var(--line));
}

.tech__group--build {
  --group-bg: var(--c-tacit-bg);
  --group-ink: var(--c-tacit-ink);
}

.tech__group--protect {
  --group-bg: var(--c-agent-bg);
  --group-ink: var(--c-agent-ink);
}

.tech__group--human {
  --group-bg: var(--c-enable-bg);
  --group-ink: var(--c-enable-ink);
}

.tech__group-title {
  font-size: var(--fs-h3);
  color: var(--group-ink);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--group-ink) 30%, transparent);
}

.tech__chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tech__chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--dur-1) var(--ease-out);
}

.tech__chip:hover {
  border-color: color-mix(in srgb, var(--group-ink) 30%, var(--line));
}

.tech__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--group-ink);
}

.tech__chip-icon svg {
  width: 100%;
  height: 100%;
}

.tech__chip-label {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--charcoal);
}

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


/* sections/why.css */
/*
  Section: Why ShinAI (#why)
  現場で続くための五つの姿勢。番号付きの横並びリスト、アイコンなし。
  余白と水平罫で静かに区切る。
  色・余白・型はトークンのみ参照。
*/

.why__list {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  /* ヘッドの中央揃えに合わせ、リスト塊も画面中央へ置き視線移動を短くする */
  margin-inline: auto;
}

.why__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  align-items: start;
}

.why__num {
  font-family: var(--font-latin);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mist);
  line-height: 1;
  padding-top: 0.15em;
  user-select: none;
}

@media (max-width: 640px) {
  .why__num {
    font-size: 1rem;
  }
}

.why__rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.why__title {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.why__line {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .why__row {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .why__title {
    font-size: var(--fs-body);
    font-weight: 600;
  }
}