/* ==========================================================================
   About — 私たちについて ページ専用スタイル
   style.css の共有クラス（.visual-panel / .blueprint-texture / .info-table /
   .timeline）は変更せず、このページだけの新規クラスで置き換える。
   0. ヒーロー動画（.page-hero--about）＋ コーポレートムービー（.cm-player）
   1. Our Purpose … 3つの“i”を伝えるタイポグラフィカード（.purpose-card）
   2. 代表メッセージ … 1カラム・エディトリアル構成（.ceo-message）
   3. 沿革 … ノード付き縦タイムライン（.about-history）
   ========================================================================== */

/* ==========================================================================
   0. ヒーロー動画 / コーポレートムービー
   ========================================================================== */

/* aboutは特定事業に属さないため、EC/福祉/AIのアクセント色ではなく
   ブランドグラデーション（青→ティール）をpage-title-enに使う */
.page-hero--about .page-title-en {
  background: linear-gradient(100deg, #6f9bff, #5fe0e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Corporate Movie: シアターバンド ---
   CTAバナーと同じダーク面+オーロラの語法で「上映の場」をつくり、
   CM本編の3幕（届ける/寄り添う/つくる）をチャプターとして下に並べる。
   チャプターは実際に動画の該当秒へシークする操作要素（button）。 */
.cm-band {
  position: relative;
  padding-block: clamp(72px, 9vw, 120px);
  background-color: var(--c-dark-bg);
  color: var(--c-dark-text);
  overflow: hidden;
}

/* ブランド色のオーロラ2つ（CTAバナーと同族・少し控えめに） */
.cm-band::before,
.cm-band::after {
  content: "";
  position: absolute;
  width: clamp(480px, 52vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
}
.cm-band::before {
  background: radial-gradient(circle, #2b5cff, transparent 65%);
  bottom: -30%;
  left: -12%;
}
.cm-band::after {
  background: radial-gradient(circle, #00c4cc, transparent 65%);
  top: -34%;
  right: -10%;
}
@media (prefers-reduced-motion: no-preference) {
  .cm-band::before { animation: cm-aurora-a 30s ease-in-out infinite alternate; }
  .cm-band::after { animation: cm-aurora-b 38s ease-in-out infinite alternate; }
}
@keyframes cm-aurora-a {
  from { transform: translate(0, 0); }
  to { transform: translate(6%, -8%); }
}
@keyframes cm-aurora-b {
  from { transform: translate(0, 0); }
  to { transform: translate(-7%, 9%); }
}

.cm-band > .container {
  position: relative;
  z-index: 1;
}

.cm-head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.cm-eyebrow {
  display: inline-block;
  font-family: "Inter", var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #6f9bff, #5fe0e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.cm-band .section-title {
  color: #fff;
}

.cm-sec {
  font-style: normal;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cm-lead {
  margin-top: 16px;
  color: var(--c-dark-sub);
  font-size: var(--fs-lead);
}

/* 上映スクリーン: グラデのヘアライン縁 + 奥行きグロー */
.cm-stage {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  padding: 1px; /* ヘアライン用 */
  background: linear-gradient(140deg, rgba(111, 155, 255, 0.55), rgba(234, 240, 255, 0.12) 35%, rgba(95, 224, 230, 0.45));
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 120px -40px rgba(43, 92, 255, 0.5);
}

.cm-player-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-lg) - 1px);
  background: #05070f;
}

/* チャプター3幕 */
.cm-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  max-width: 860px;
  margin: clamp(24px, 3.4vw, 36px) auto 0;
}

.cm-chapter {
  --ch-accent: var(--c-brand);
  position: relative;
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: var(--r-md);
  background: rgba(234, 240, 255, 0.045);
  border: 1px solid var(--c-dark-line);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.cm-chapter[data-accent="ec"] { --ch-accent: #0ea5e9; }
.cm-chapter[data-accent="welfare"] { --ch-accent: #f97316; }
.cm-chapter[data-accent="ai"] { --ch-accent: #8b5cf6; }

/* 上辺のアクセントバー（再生位置マーカーの見立て） */
.cm-chapter::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--ch-accent);
  transition: right 0.35s var(--ease-out);
}
.cm-chapter:hover::before,
.cm-chapter:focus-visible::before {
  right: 14px;
}

.cm-chapter:hover,
.cm-chapter:focus-visible {
  background: rgba(234, 240, 255, 0.09);
  border-color: color-mix(in srgb, var(--ch-accent) 55%, transparent);
  transform: translateY(-3px);
}
.cm-chapter:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 2px;
}

.cm-chapter-tc {
  display: block;
  font-family: "Inter", var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ch-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.cm-chapter-word {
  display: block;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.cm-chapter-biz {
  display: block;
  font-size: 0.8rem;
  color: var(--c-dark-sub);
}

@media (max-width: 640px) {
  .cm-chapters {
    grid-template-columns: 1fr;
  }
  .cm-chapter {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: baseline;
  }
  .cm-chapter-tc { grid-row: 1 / 3; margin-bottom: 0; }
  .cm-chapter-word { margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-chapter,
  .cm-chapter::before {
    transition: none;
  }
  .cm-chapter:hover,
  .cm-chapter:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   1. Our Purpose — .purpose-cards
   ========================================================================== */

/* .visual-panel 由来の余白・角丸・overflow:hidden を無効化し、
   カードの縁取り・影がクリップされないようにする */
.media-visual:has(.purpose-cards) {
  border-radius: 0;
  overflow: visible;
}

.purpose-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.purpose-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 22px);
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 28px) clamp(22px, 3vw, 30px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.purpose-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* 左の accent バー。is-visible になったタイミングで上から下へ伸びる */
.purpose-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--g-brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.purpose-card.is-visible::before {
  transform: scaleY(1);
}

/* 大きなアウトライン「i」（.section-mark / .bento-num と同系統のアウトライン言語）。
   "i" は字幅が狭いため背景の透かしではなく専用カラムに配置し、確実に視認できるようにする */
.purpose-card-glyph {
  flex: 0 0 auto;
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 2.3rem + 2vw, 3.6rem);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-line);
  user-select: none;
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.purpose-card.is-visible .purpose-card-glyph {
  -webkit-text-stroke-color: var(--c-brand-2);
}

.purpose-card-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.2em;
}

.purpose-card-word {
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

/* 単語内の "i" だけをブランドグラデーションで強調（ホームの斜体<em>とは異なる処理） */
.purpose-card-word .i-mark {
  font-style: normal;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.purpose-card-jp {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-brand);
}

.purpose-card-note {
  margin-top: 10px;
  max-width: 32ch;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--c-text-sub);
}

@media (max-width: 480px) {
  .purpose-card-glyph {
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   2. 代表メッセージ — .ceo-letter（書簡カード＋筆文字署名）
   引用符グリフ＋テキスト置きの旧構成をやめ、「一通の手紙」の見立てに。
   上辺グラデヘアラインのカード / 冒頭に太い一文見出し / 中央抜きのpullquote /
   末尾に毛筆体（Yuji Boku）の署名。
   ※朱の落款は「本物らしく見えない」ため代表判断で撤去済み（2026-07）。
     篆書体等でちゃんと作れる場合を除き、安易に復活させないこと。
   ※見出しの一文は公開前に代表の確認を受けること（HTML側TODO参照）
   ========================================================================== */

.ceo-letter {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(43, 92, 255, 0.035), transparent 55%),
    var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 60px) clamp(24px, 5vw, 64px) clamp(30px, 4vw, 48px);
  overflow: hidden;
}

/* 上辺のブランドグラデヘアライン */
.ceo-letter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--g-brand);
}

/* 冒頭の一文見出し（本文の核を先に立てる）
   ※ .ceo-letter p (0,1,1) に負けないよう p 付きセレクタで書く */
.ceo-letter p.ceo-letter-head {
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.9rem);
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ceo-letter p.ceo-letter-head::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--g-brand);
  margin: 18px 0 26px;
}

.ceo-letter p {
  margin-top: 20px;
  color: var(--c-text-sub);
  font-size: 1rem;
  line-height: 1.95;
}

.ceo-letter .ceo-letter-head {
  margin-top: 0;
  color: var(--c-ink);
}

.ceo-letter .ceo-message-lead {
  margin-top: 0;
  font-size: var(--fs-lead);
}

/* 最も強い一文を中央抜きで（左バー付き旧型から変更） */
.ceo-letter p.ceo-pullquote {
  max-width: 30ch;
  margin: clamp(36px, 5vw, 48px) auto !important;
  text-align: center;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
  font-weight: 900;
  line-height: 1.7;
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ceo-letter p.ceo-pullquote::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-brand);
  margin: 0 auto 20px;
}

/* 署名ブロック: 役職（明朝的な字間）＋毛筆体の名前＋朱の落款 */
.ceo-sign-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}

.ceo-sign-role {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
}

/* 署名は毛筆体風の「偽直筆」ではなく、字間を広く取った明朝体で品よく
   （毛筆フォントは「変」と指摘を受け2026-07に変更。Shippori Mincho 600） */
.ceo-sign-name {
  font-family: "Shippori Mincho", "Noto Sans JP", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.9rem);
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: 0.22em;
}

@media (max-width: 540px) {
  .ceo-sign-block {
    justify-content: flex-start;
  }
  /* 役職を1行目に、名前を2行目に */
  .ceo-sign-role {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   3. 沿革 — .about-history（ノード付き縦タイムライン）
   ========================================================================== */

.about-history {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 4vw, 38px);
}

.about-history::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-brand), var(--c-brand-2));
  opacity: 0.22;
}

.about-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
}

.about-history-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--c-text-sub);
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

/* 階段状の点灯: is-visible 付与を起点に0.12s刻みでノードが光る */
.about-history-item.is-visible .about-history-node {
  color: #fff;
  border-color: transparent;
  background: var(--g-brand);
  box-shadow: 0 0 0 5px rgba(43, 92, 255, 0.14), var(--shadow-sm);
}

.about-history-item:nth-child(1) .about-history-node { transition-delay: 0s; }
.about-history-item:nth-child(2) .about-history-node { transition-delay: 0.12s; }
.about-history-item:nth-child(3) .about-history-node { transition-delay: 0.24s; }
.about-history-item:nth-child(4) .about-history-node { transition-delay: 0.36s; }
.about-history-item:nth-child(5) .about-history-node { transition-delay: 0.48s; }

.about-history-body {
  padding-top: 8px;
}

.about-history-year {
  font-family: "Inter", var(--font-sans);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--c-brand);
}

.about-history-title {
  margin-top: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-ink);
}

.about-history-text {
  margin-top: 6px;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--c-text-sub);
}

@media (max-width: 480px) {
  .about-history::before {
    left: 21px;
  }

  .about-history-item {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .about-history-node {
    width: 44px;
    height: 44px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   reduced-motion: すべての新規モーションを静止状態にフォールバック
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .purpose-card,
  .purpose-card::before,
  .purpose-card-glyph {
    transition: none !important;
  }

  .purpose-card::before {
    transform: scaleY(1);
  }

  .about-history-node {
    transition: none !important;
  }
}

/* ==========================================================================
   4. 私たちの価値観 — .values-tate（縦書きマニフェスト）
   ベントー型はホーム/EC/採用で既出のため、ここではサイト初の
   縦書きタイポグラフィを使う。「仕事の姿勢」を書として立てる見立てで、
   各項目は 番号 → 縦書きの一文（主役） → 横書きの補足 の3層。
   左端の細い罫が is-visible で上から下へ引かれ、姿勢が「立つ」動きを添える。
   ========================================================================== */

.values-tate {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1080px;
  margin-inline: auto;
}

.values-item {
  position: relative;
  padding-left: clamp(16px, 1.6vw, 22px);
}

/* 左端の罫: ブランドグラデ。is-visibleで上→下に描画（nth-childで時差） */
.values-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b5cff, #00c4cc);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease-out);
}
.values-item.is-visible::before { transform: scaleY(1); }
.values-item:nth-child(2).is-visible::before { transition-delay: 0.15s; }
.values-item:nth-child(3).is-visible::before { transition-delay: 0.3s; }
.values-item:nth-child(4).is-visible::before { transition-delay: 0.45s; }

.values-item-num {
  display: block;
  font-family: "Inter", var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}

/* 縦書きの一文（主役）。読点で2行に分け、高さを揃えて「柱」として立てる */
.values-item-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: clamp(190px, 20vw, 220px);
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  font-weight: 900;
  line-height: 1.85;
  letter-spacing: 0.16em;
  color: var(--c-ink);
  margin-bottom: 20px;
  transition: color 0.35s var(--ease-out);
}

.values-item:hover .values-item-title {
  background: linear-gradient(180deg, #2b5cff, #00c4cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.values-item-text {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--c-text-sub);
  max-width: 22ch;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .values-tate {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 36px);
  }
}

/* 狭幅は「縦書きの柱＋右に補足」の行型に組み替える */
@media (max-width: 540px) {
  .values-tate {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .values-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: start;
  }
  .values-item-num {
    grid-column: 1 / 3;
    margin-bottom: 12px;
  }
  .values-item-title {
    grid-row: 2;
    height: auto;
    min-height: 148px;
    font-size: 1.24rem;
    margin-bottom: 0;
  }
  .values-item-text {
    grid-row: 2;
    max-width: none;
    align-self: center;
  }
}

/* ---------- モーション低減設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .values-item::before {
    transform: scaleY(1);
    transition: none;
  }
  .values-item-title {
    transition: none;
  }
}

/* ==========================================================================
   5. 会社概要 — .company-grid2（名刺カード＋点線罫の台帳）
   旧 .info-table（実線罫の均等テーブル）を置き換える。
   左＝会社の「名刺」（ブランドマーク・社名・代表・連絡先、data-tiltで浮く）、
   右＝ファクトの台帳（点線罫・事業は色ドット付きリスト・拠点は役割チップ）。
   ========================================================================== */

.company-grid2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.company-card-col {
  grid-column: span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.company-facts {
  grid-column: span 7;
  margin: 0;
}

/* ---------- 名刺カード ---------- */
.company-meishi {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 32px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.company-meishi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--g-brand);
}

.company-meishi-brand {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
/* 正式決定済みロゴ（ヘッダーと同じ横組み版）を使う。インラインSVGの旧マークは使わない */
.company-meishi-logo {
  display: block;
  width: min(208px, 70%);
  height: auto;
}

.company-meishi-ceo {
  margin-top: 18px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-ink);
}
.company-meishi-ceo span {
  display: inline-block;
  margin-right: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-text-sub);
}

.company-meishi-lines {
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.company-meishi-lines > div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.7;
}
.company-meishi-lines dt {
  font-family: "Inter", var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-brand);
  padding-top: 3px;
}
.company-meishi-lines dd {
  margin: 0;
  color: var(--c-text-sub);
}

/* ---------- 台帳（点線罫のファクトリスト） ---------- */
.company-facts-row {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 132px) 1fr;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-line) 80%, var(--c-brand) 20%);
}
.company-facts-row:first-child {
  padding-top: 4px;
}
.company-facts-row dt {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  padding-top: 2px;
}
.company-facts-row dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--c-text-sub);
}

/* 事業内容: 3色ドット付きリスト */
.company-biz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.company-biz-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  font-weight: 700;
  color: var(--c-ink);
}
.company-biz-list small {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--c-text-sub);
}
.company-biz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.company-biz-dot--ec { background: #0ea5e9; }
.company-biz-dot--welfare { background: #f97316; }
.company-biz-dot--ai { background: #8b5cf6; }

/* 拠点: 役割＋地名のチップ */
.company-base-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.company-base-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-bg);
  font-size: 0.82rem;
  color: var(--c-text-sub);
  line-height: 1.4;
}
.company-base-chips b {
  font-weight: 700;
  color: var(--c-ink);
}
.company-base-chips b::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: var(--c-line);
  margin-left: 7px;
  vertical-align: -0.12em;
}
.company-base-chips--welfare {
  border-color: rgba(249, 115, 22, 0.35) !important;
}
.company-base-chips--welfare b {
  color: var(--c-welfare-text);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .company-grid2 {
    grid-template-columns: 1fr;
  }
  .company-card-col,
  .company-facts {
    grid-column: span 12;
  }
  .company-card-col {
    position: static;
    max-width: 480px;
  }
}

@media (max-width: 540px) {
  .company-facts-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 14px;
  }
}

/* ==========================================================================
   6. アクセス — .access-grid（情報パネル＋ライブマップ）
   旧 .info-table（2行のテーブル＋テキストリンク）を置き換える。
   左＝本社の情報パネル（バッジ・住所・TEL・住所コピー）、
   右＝Googleマップ埋め込み。地図はモノクロで敷き、ホバー/操作で彩度が戻る。
   ========================================================================== */

.access-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.access-info { grid-column: span 5; }
.access-map { grid-column: span 7; }

/* ---------- 情報パネル ---------- */
.access-badge {
  display: inline-block;
  font-family: "Inter", var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-brand);
  background: rgba(43, 92, 255, 0.08);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.access-place {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 900;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.access-addr {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--c-text-sub);
  margin-bottom: 18px;
}

.access-lines {
  margin: 0 0 26px;
  display: grid;
  gap: 8px;
}
.access-lines > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: baseline;
}
.access-lines dt {
  font-family: "Inter", var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-brand);
}
.access-lines dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--c-text-sub);
}
.access-tel {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  font-family: "Inter", var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.access-tel:hover {
  color: var(--c-brand);
}

.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.access-copy.is-copied {
  color: var(--c-brand);
  border-color: var(--c-brand);
}

/* ---------- マップカード ---------- */
.access-map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  /* iframe読み込み前の下地 */
  background: var(--c-bg);
}

.access-map iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 34vw, 420px);
  border: 0;
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.5s var(--ease-out);
  /* 地図内の直接操作は無効化し、クリックはGoogleマップへの遷移に一本化する。
     （自前ピンとの位置ずれ・スクロール中の誤ズームを防ぐ） */
  pointer-events: none;
}

/* ホバー（およびリンクフォーカス時）で色が戻る＝「触れる地図」の合図 */
.access-map:hover iframe,
.access-map:focus-within iframe {
  filter: none;
}

/* 地図全面のクリック領域（Googleマップで開く） */
.access-map-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.access-map-link:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

/* 自前ピン: 実測座標=地図中心に置くブランドグラデのドット */
.access-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--g-brand);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(11, 16, 32, 0.35);
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .access-map-pin::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(43, 92, 255, 0.55);
    animation: access-pin-ring 2.6s ease-out infinite;
  }
}
@keyframes access-pin-ring {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* 地図の上に浮かぶ現在地ラベル */
.access-map-label {
  z-index: 3;
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-ink);
  pointer-events: none;
}
.access-map-label i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--g-brand);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .access-map-label i {
    animation: access-pin-pulse 2.6s ease-in-out infinite;
  }
}
@keyframes access-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 92, 255, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(43, 92, 255, 0); }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
  .access-info,
  .access-map {
    grid-column: span 12;
  }
  .access-map iframe {
    height: clamp(280px, 60vw, 380px);
  }
}