@charset "UTF-8";
/* ============================================================
   company-common.css
   会社案内カテゴリ共通CSS（/company/company.html 他、同カテゴリの
   企業理念ページ等でも流用する前提の共通スタイル）
   ※ reset / style / lower / service など他の共通CSSは変更しない。
   ※ 幅は既存の .content-wrap（max-width:1130px）と統一。
============================================================ */

/* ============================================================
   0. 会社ページ用カラー変数
============================================================ */
.page-company {
  --co-color: #BE0161;
  --co-color-light: rgba(190, 1, 97, 0.08);
  --co-color-grad: linear-gradient(90deg, #BE0161 0%, #ff4081 100%);
  --co-shadow: rgba(190, 1, 97, 0.25);
}


/* ============================================================
   1. ヒーロー（全幅・リッチ版）
============================================================ */
.co-hero {
  margin-top: 0;
  padding: 108px 20px 88px;
  background: url(../images/common/mv_bg.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
/* 写真がしっかり見えるよう、暗いグラデーションは半透明のオーバーレイとして重ねる（CRMサービスページと同じ画像を使用）
   ※ 画像パスは本CSSファイル（/assets/css/company-common.css）からの相対パスで指定。
     service.css / lower.css と同じ書き方（../images/common/mv_bg.jpg）に統一。 */
.co-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(12,12,20,0.60) 0%, rgba(17,17,24,0.52) 40%, rgba(30,34,53,0.42) 75%, rgba(42,48,80,0.36) 100%);
  pointer-events: none;
}
.co-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 1;
}
.co-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.co-hero-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: var(--co-color-grad);
  border-radius: 20px;
  letter-spacing: 0.05em;
}
.co-hero-en {
  font-size: 12px;
  font-weight: bold;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.15em;
}
.co-hero-ttl {
  font-size: 34px;
  font-weight: bold;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 26px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-feature-settings: "palt";
}
.co-hero-lead {
  font-size: 16px;
  line-height: 1.95;
  color: rgba(255,255,255,0.82);
  max-width: 760px;
  margin: 0 0 16px;
}
.co-hero-lead:last-of-type { margin-bottom: 0; }
.co-hero-lead strong {
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .co-hero { padding: 84px 16px 56px; }
  .co-hero-ttl { font-size: 24px; margin-bottom: 20px; }
  .co-hero-lead { font-size: 14px; }
}


/* ============================================================
   2. セクション共通（背景切替＋幅統一）
============================================================ */
.co-section {
  padding: 68px 0;
}
.co-section-white { background: #fff; }
.co-section-gray  { background: #f8f9fa; }

/* 幅：既存 .content-wrap / .detail-section-inner と同じ 1130px */
.co-section-inner {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 15px;
}

.co-section-head {
  margin-bottom: 44px;
  text-align: center;
}
.co-section-head.align-left { text-align: left; }
.co-label {
  display: inline-block;
  padding: 5px 18px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: bold;
  color: var(--co-color, #BE0161);
  background: var(--co-color-light, rgba(190,1,97,0.08));
  border-radius: 20px;
  letter-spacing: 0.1em;
}
.co-section-ttl {
  font-size: 32px;
  font-weight: bold;
  color: #1a1a2e;
  line-height: 1.4;
  margin-bottom: 16px !important;
  font-feature-settings: "palt";
}
.co-section-lead {
  font-size: 16px;
  line-height: 1.9;
  color: #666;
  max-width: 860px;
  margin: 0 auto;
}
.co-section-head.align-left .co-section-lead { margin: 0; }

@media screen and (max-width: 767px) {
  .co-section { padding: 44px 0; }
  .co-section-ttl { font-size: 24px; }
}


/* ============================================================
   3. サブセクション見出し（番号付き中見出し）
   例：1. データ活用が成果につながらない理由
   「1. タイトル」形式＋タイトル文字幅ぶんだけ下線を引くデザイン
============================================================ */
.co-subsec { margin-bottom: 52px; }
.co-subsec:last-child { margin-bottom: 0; }
.co-subsec-head {
  margin-bottom: 22px;
}
.co-subsec-ttl {
  display: inline-block;
  font-size: 23px;
  font-weight: bold;
  color: #1a1a2e;
  line-height: 1.6;
  margin: 0 !important;
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--co-color, #BE0161);
}
.co-subsec-num {
  color: var(--co-color, #BE0161);
  font-family: "Inter", sans-serif;
  font-weight: bold;
  margin-right: 2px;
}
.co-subsec-body p {
  font-size: 16px;
  line-height: 1.95;
  color: #555;
  margin-bottom: 18px;
}
.co-subsec-body p:last-child { margin-bottom: 0; }

@media screen and (max-width: 600px) {
  .co-subsec-ttl { font-size: 18px; }
}


/* ============================================================
   4. 課題グリッド（分断による課題）
   ※ 1列縦並び／箇条書き感のあるコンパクトなリスト表示
   （カード状の背景・シャドウ・左アクセント枠は使わない）
============================================================ */
.co-problem-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 26px;
}
.co-problem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid #eee;
}
.co-problem-item:last-child {
  border-bottom: none;
}
.co-problem-item-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--co-color-light, rgba(190,1,97,0.08));
  color: var(--co-color, #BE0161);
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-problem-item-icon svg {
  width: 13px;
  height: 13px;
}
.co-problem-item-txt {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  font-weight: 500;
}

/* 結論テキスト（背景なし・テキストのみで強調） */
.co-conclusion-plain {
  text-align: center;
  padding: 4px 10px 0;
}
.co-conclusion-plain p {
  font-size: 17px;
  font-weight: bold;
  color: var(--co-color, #BE0161);
  line-height: 1.7;
  margin: 0 !important;
}

@media screen and (max-width: 640px) {
  .co-problem-item { padding: 9px 2px; }
  .co-conclusion-plain p { font-size: 15px; }
}


/* ============================================================
   5. 分断をつなぐ　リンクカード（戦略と実装／データと業務／AIと現場）
============================================================ */
.co-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.co-link-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.co-link-item-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #1a1a2e;
}
.co-link-item-plus {
  color: var(--co-color, #BE0161);
  font-size: 16px;
  font-weight: bold;
}
.co-link-item-arrow {
  margin-top: 10px;
  color: var(--co-color, #BE0161);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

@media screen and (max-width: 767px) {
  .co-link-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   6. 専門家チーム体制図（ハブ型ダイアグラム／6ノード）
============================================================ */
.co-team-diagram {
  width: 100%;
  max-width: 640px;
  margin: 28px auto 8px;
}
.co-team-hub-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 90%;
}
.co-team-hub-inner {
  position: absolute;
  inset: 0;
}
.co-team-hub-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.co-hub-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 122px; height: 122px;
  background: linear-gradient(135deg, #BE0161 0%, #8c0047 100%);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(190,1,97,0.35);
  z-index: 10; text-align: center;
  padding: 12px; box-sizing: border-box;
}
.co-hub-center-label {
  font-size: 10.5px; font-weight: bold;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em; margin-bottom: 4px !important;
}
.co-hub-center-ttl {
  font-size: 14px; font-weight: bold;
  color: #fff; line-height: 1.4;
  margin: 0 !important;
}
.co-hub-node {
  position: absolute; width: 106px;
  background: #fff; border: 2px solid #f0c0d8;
  border-radius: 12px; padding: 13px 9px 11px;
  box-shadow: 0 3px 14px rgba(190,1,97,0.12);
  text-align: center; box-sizing: border-box;
  transition: box-shadow 0.2s, border-color 0.2s;
  z-index: 10;
}
.co-hub-node:hover {
  box-shadow: 0 6px 20px rgba(190,1,97,0.22);
  border-color: #BE0161;
}
.co-hub-node-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #fce8f2 0%, #f9d0e6 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 7px;
}
.co-hub-node-icon svg { width: 17px; height: 17px; }
.co-hub-node-ttl {
  font-size: 10.5px; font-weight: bold;
  color: #BE0161; line-height: 1.4; margin: 0 0 4px !important;
}
.co-hub-node-desc { font-size: 9.5px; color: #777; line-height: 1.5; margin: 0 !important; }
.co-hub-node-1 { top: 6%; left: calc(50% - 53px); }
.co-hub-node-2 { top: 19%; right: 6%; }
.co-hub-node-3 { bottom: 19%; right: 6%; }
.co-hub-node-4 { bottom: 6%; left: calc(50% - 53px); }
.co-hub-node-5 { bottom: 19%; left: 6%; }
.co-hub-node-6 { top: 19%; left: 6%; }
.co-team-diagram-note {
  text-align: center; font-size: 11px;
  color: #999; margin-top: 16px; line-height: 1.7;
}

@media screen and (max-width: 600px) {
  .co-team-hub-wrap { padding-bottom: 116%; }
  .co-hub-center { width: 90px; height: 90px; }
  .co-hub-center-ttl { font-size: 11px; }
  .co-hub-center-label { font-size: 9px; }
  .co-hub-node { width: 82px; padding: 9px 6px 8px; }
  .co-hub-node-icon { width: 26px; height: 26px; }
  .co-hub-node-icon svg { width: 13px; height: 13px; }
  .co-hub-node-ttl { font-size: 9.5px; }
  .co-hub-node-desc { font-size: 8.5px; }
}


/* ============================================================
   6-b. 「成果を生み出すチーム体制」セクション導入テキスト
   （独立セクション化に伴い、サブセクション見出しの子要素だった
     リード文を、セクション直下のテキストとして扱うためのクラス）
============================================================ */
.co-team-intro {
  max-width: 860px;
  margin: 0 auto 8px;
}
.co-team-intro p {
  font-size: 16px;
  line-height: 1.95;
  color: #555;
  margin-bottom: 18px;
}
.co-team-intro p:last-child { margin-bottom: 0; }


/* ============================================================
   7. コンサル×開発 連携フロー（横型ステップ）
============================================================ */
.co-flow-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
}
.co-flow-item {
  flex: 1 1 140px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 4px;
}
.co-flow-item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--co-color-light, rgba(190,1,97,0.08));
  color: var(--co-color, #BE0161);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}
.co-flow-item-label {
  font-size: 15px;
  font-weight: bold;
  color: #1a1a2e;
  line-height: 1.5;
}
.co-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 16px;
  flex: 0 0 auto;
  padding: 0 2px;
}

.co-partner-highlight {
  background: var(--co-color-light, rgba(190,1,97,0.08));
  border-left: 3px solid var(--co-color, #BE0161);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.co-partner-highlight p {
  font-size: 15.5px;
  line-height: 1.9;
  color: #444;
  margin: 0 !important;
}

/* 末尾の強調メッセージ（背景なし・テキストのみ／ピンク・大きめ） */
.co-final-quote {
  text-align: center;
  padding: 8px 12px 0;
}
.co-final-quote p {
  font-size: 20px;
  font-weight: bold;
  color: var(--co-color, #BE0161);
  line-height: 1.8;
  margin: 0 !important;
}

@media screen and (max-width: 640px) {
  .co-final-quote p { font-size: 16px; }
}

@media screen and (max-width: 767px) {
  .co-flow-arrow { transform: rotate(90deg); width: 100%; }
  .co-flow-list { flex-direction: column; }
  .co-flow-item { flex: 1 1 auto; }
}


/* ============================================================
   7-b. AI×データドリブンコンサルティング×AIドリブン開発
   （サブ的な内容のため、控えめな1カラム・テキストのみの構成）
============================================================ */
.co-section-sub {
  padding: 52px 0;
}
.co-section-sub .co-section-head {
  margin-bottom: 28px;
}
.co-section-sub .co-section-ttl {
  font-size: 24px;
}
.co-flow-plain-body {
  max-width: 760px;
  margin: 0 auto;
}
.co-flow-plain-body p {
  font-size: 15.5px;
  line-height: 1.95;
  color: #555;
  text-align: center;
  margin-bottom: 16px;
}
.co-flow-plain-body p:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px) {
  .co-section-sub { padding: 36px 0; }
  .co-section-sub .co-section-ttl { font-size: 20px; }
}


/* ============================================================
   8. 支援領域リンク・支援実績リンク（共通の「見る」リンク）
============================================================ */
.co-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: bold;
  color: var(--co-color, #BE0161);
  text-decoration: none;
  border-bottom: 1px solid var(--co-color, #BE0161);
  padding-bottom: 2px;
}
.co-more-link:hover { opacity: 0.7; }


/* ============================================================
   9. 導入実績スタッツ（.achv-grid）
   ※ 旧 company.css から移行
============================================================ */
.achv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 28px;
}
.achv-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 26px 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.achv-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #BE0161, #d4006e);
  border-radius: 10px 10px 0 0;
}
.achv-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(190,1,97,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.achv-num {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 30px !important;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.achv-unit {
  font-size: 14px;
  font-weight: bold;
  color: #1a1a2e;
  margin-left: 2px;
}
.achv-num-text {
  font-size: 22px !important;
  letter-spacing: 0.04em;
}
/* 「戦略から実装まで」のように文章として長くなるケース用の調整（3番目の実績カード） */
.achv-num-phrase {
  font-size: 18px !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.achv-label {
  font-size: 12.5px !important;
  color: #777;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 767px) {
  .achv-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .achv-item { padding: 20px 10px 16px; }
  .achv-icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .achv-icon svg { width: 18px; height: 18px; }
  .achv-num { font-size: 22px !important; }
  .achv-num-text { font-size: 15px !important; }
  .achv-num-phrase { font-size: 13px !important; white-space: normal; }
  .achv-unit { font-size: 11px; }
  .achv-label { font-size: 10.5px !important; line-height: 1.5 !important; }
}
@media screen and (max-width: 400px) {
  .achv-grid { grid-template-columns: 1fr; gap: 10px; }
  .achv-item { padding: 18px 16px; }
}


/* ============================================================
   10. 会社概要テーブル 角丸ラッパー（既存テーブルを軽く強化）
============================================================ */
.co-table-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border, #EFEFF0);
}
.co-table-wrap table { margin-bottom: 0 !important; border: none !important; }
.co-table-wrap table td { border-left: none !important; border-right: none !important; }
.co-table-wrap table tr:first-child td { border-top: none !important; }


/* ============================================================
   10-b. 会社概要／沿革／アクセスマップ セクション
   ※ テーブル・タイムライン本体（table / .timeline）のデザインは
     一切変更しない。見出し（h4）と余白・区切り線だけを
     他の新セクションと同じ質感に揃えるためのスコープ限定調整。
============================================================ */
.co-legacy-wrap h4 {
  /* 固定ヘッダー分のアンカー補正（#map 等）は既存 .body-wrap h4 の値を踏襲しつつ、見た目だけ変更 */
  margin-top: -90px;
  padding-top: 120px;
  margin-bottom: 24px;
  display: inline-block;
  font-size: 23px;
  font-weight: bold;
  color: #1a1a2e;
  line-height: 1.6;
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--co-color, #BE0161);
}
.co-legacy-wrap hr {
  margin: 48px 0;
  border: none;
  border-top: 1px solid #EFEFF0;
}

@media screen and (max-width: 600px) {
  .co-legacy-wrap h4 { font-size: 18px; }
}


/* ============================================================
   11. カテゴリナビ直下のリード文ボックス（任意）
============================================================ */
.co-lead-box {
  background: #f8f9fa;
  border-left: 3px solid var(--co-color, #BE0161);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin-bottom: 8px;
}
.co-lead-box p {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.85;
  color: #444;
}


/* ============================================================
   12-b. 支援領域カード：会社ページでは6枚を3列2行で表示
   （共通CSSのグリッド定義は変更せず、会社ページ限定で明示指定）
============================================================ */
.page-company .svc-card-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px) {
  .page-company .svc-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .page-company .svc-card-grid {
    grid-template-columns: 1fr;
  }
}
/* カード内タイトルの文字サイズを会社ページ限定で少し大きく（共通side.cssの!importantを上書き） */
.page-company .svc-card-ttl {
  font-size: 15px !important;
}


/* ============================================================
   12-c. カテゴリ内ナビ（会社概要 ⇄ 企業理念／私たちの原点）
   ヒーロー直下に設置。既存の .cat-nav をベースに、
   会社ページでは項目数（2件）に合わせて2カラム・中央寄せに調整。
============================================================ */
.co-subnav-wrap {
  background: #fff;
  border-bottom: 1px solid #EFEFF0;
  padding: 18px 15px;
}
.page-company .co-subnav-wrap .cat-nav {
  max-width: 460px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 480px) {
  .page-company .co-subnav-wrap .cat-nav {
    max-width: 100%;
  }
}


/* ============================================================
   12. 末尾CTA帯（お問い合わせ誘導）
   ※ ボックス全体をリンク化（<a class="co-cta-box">）。
     lower.css の .body-wrap a { text-decoration:underline; color:... }
     による上書き対策として、色・下線を !important で保護している。
============================================================ */
a.co-cta-box,
.co-cta-box {
  display: block;
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.co-cta-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(190,1,97,0.14);
  border-color: #e0c0cc;
}
.co-cta-box-ttl {
  font-size: 18px !important;
  font-weight: bold;
  color: #1a1a2e !important;
  line-height: 1.7 !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
}
.co-cta-box-sub {
  font-size: 13.5px !important;
  color: #888 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.co-cta-box-arrow {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: bold;
  color: var(--co-color, #BE0161) !important;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 600px) {
  .co-cta-box-ttl { font-size: 15.5px !important; }
}


/* ============================================================
   13. 企業理念ページ（私たちの原点）専用スタイル
   ※ 長文の読み物ページ用。会社概要ページと共通の
     co-hero / co-subnav-wrap / co-section 等をベースに、
     本文・強調フレーズ・引用・フロー・ロゴ紹介などを追加。
============================================================ */

/* 本文（記事）エリア全体の最大幅（可読性のため少し狭め） */
.co-story {
  max-width: 820px;
  margin: 0 auto;
}

/* リード文（記事冒頭の一段大きい文章） */
.co-story-lead {
  font-size: 18px;
  line-height: 2;
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
}

/* 通常本文 */
.co-story-body p {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 26px;
}
.co-story-body p:last-child { margin-bottom: 0; }

/* 短い断定フレーズを積み重ねて強調する部分（引用風・シンプル）
   （例：「顧客データは存在している。」「ツールもある。」
         「しかし、顧客を本質的に理解できていない。」） */
.co-story-emphasis {
  position: relative;
  text-align: left;
  margin: 40px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--co-color, #BE0161);
}
.co-story-emphasis p {
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  color: #666;
  line-height: 1.9;
  margin: 0 0 6px !important;
}
.co-story-emphasis p:last-child {
  color: var(--co-color, #BE0161);
  font-weight: bold;
  margin-bottom: 0 !important;
}

/* 引用（装飾なし・テキストのみ）
   （"データをどう統合し、顧客をどう理解し、どう意思決定につなげるか"
     等の中核メッセージ、および末尾の結びの言葉に使用） */
.co-quote-plain {
  margin: 40px 0;
  text-align: center;
}
.co-quote-plain p {
  font-size: 19px;
  font-weight: bold;
  color: var(--co-color, #BE0161);
  line-height: 1.9;
  margin: 0 !important;
  font-feature-settings: "palt";
}

@media screen and (max-width: 640px) {
  .co-quote-plain p { font-size: 16px; }
  .co-story-emphasis p { font-size: 15px; }
  .co-story-lead { font-size: 16px; }
}

/* 4ステップの積み上げフロー（データを統合し→理解し→つなげ→改善） */
.co-story-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 36px 0;
}
.co-story-step {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 4px;
}
.co-story-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 16px;
  padding: 0 4px;
}

@media screen and (max-width: 767px) {
  .co-story-step-arrow { transform: rotate(90deg); }
  .co-story-steps { flex-direction: column; }
}

/* 装飾のないシンプルな箇条書き
   （「データはあるが活用されない」等の現状課題フレーズに使用） */
.co-plain-list {
  margin: 28px 0;
  padding-left: 1.4em;
  list-style: disc;
}
.co-plain-list li {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 10px;
}
.co-plain-list li:last-child { margin-bottom: 0; }

@media screen and (max-width: 640px) {
  .co-plain-list li { font-size: 14.5px; }
}

/* 支援領域一覧（企業理念ページでは5項目：紹介のみのシンプル版） */
.co-story-service-ttl {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #999;
  letter-spacing: 0.1em;
  margin: 44px 0 18px;
}

/* ロゴ紹介セクション */
.co-logo-section {
  text-align: center;
}
.co-logo-img-wrap {
  margin-bottom: 32px;
}
.co-logo-img-wrap img {
  max-width: 320px;
  width: 100%;
  height: auto;
}
/* ロゴ画像が未配置の場合のプレースホルダー表示
   （img の読み込みに失敗すると非表示になり、代わりに準備中テキストを表示） */
.co-logo-img-placeholder {
  position: relative;
  display: inline-block;
}
.co-logo-img-placeholder-txt {
  display: none;
  width: 180px;
  height: 180px;
  border: 2px dashed #ccc;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  line-height: 1.6;
}
.co-logo-ttl {
  font-size: 22px;
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 24px !important;
}
.co-logo-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.co-logo-body p {
  font-size: 15.5px;
  line-height: 2;
  color: #555;
  margin-bottom: 20px;
}
.co-logo-body p:last-child { margin-bottom: 0; }

@media screen and (max-width: 640px) {
  .co-logo-ttl { font-size: 18px; }
  .co-logo-img-wrap img { max-width: 220px; }
}

/* 末尾CTAリンク（中央寄せ） */
.co-story-cta {
  text-align: center;
  margin-top: 12px;
}

/* シンプルな縦積みリスト（支援領域の列挙など、矢印を使わない場合） */
.co-story-list {
  margin: 28px auto;
  max-width: 520px;
}
.co-story-list-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.co-story-list-item:last-child { border-bottom: none; }
.co-story-list-item::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--co-color, #BE0161);
}

@media screen and (max-width: 640px) {
  .co-story-list-item { font-size: 14.5px; }
}


/* ============================================================
   14. 既存MTページ共通の「MV（ページタイトル背景）」／横幅制限の解除
   ※ CRMstage製品ページ（/assets/css/crmstage.css）で行った対応と同じ考え方。
     本CSSは会社概要・企業理念ページ（company-common.css を読み込むページ）
     にのみ適用される前提のため、他ページには影響しません。
   ※ .co-hero の有無を判定条件にすることで、「company-common.css を読み込み、
     かつ本文の先頭が .co-hero から始まるページ」だけに限定して発動します。
============================================================ */

/* ①ヘッダー直下の共通ページタイトル背景（.mv）を非表示にする */
body:has(.co-hero) .mv {
  display: none !important;
}

/* ②MT本文を囲む .content-wrap の余白・最大幅制限を解除し、
    .co-hero / .co-section の背景をブラウザ全幅で表示させる。
    （.mv を消すと親 .content-wrap の padding-top だけが残って
      ヘッダー直下に白い余白ができてしまうため、padding は全て0にする） */
.content-wrap:has(.co-hero) {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ③MTテンプレート側の2カラム構成（.body-two／#sidebar／.body-wrap）の
    横幅制限を解除し、本文エリアを全幅化する。
    直下（>）の要素のみを対象にし、本文内で二次利用している
    .co-legacy-wrap（会社概要テーブル等）内の入れ子 .body-wrap には
    影響しないようにしている。 */
.body-two:has(.co-hero) {
  display: block !important;
}
.body-two:has(.co-hero) > #sidebar {
  display: none !important;
}
.body-two:has(.co-hero) > .body-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ============================================================
   15. MT本文共通CSS（.body-wrap p / .body-wrap a）による
   上書き対策（CRMstage製品ページ／crmstage.css で行った対策と同じ考え方）
   ------------------------------------------------------------
   本ページはMTの本文エリア(.body-wrap)内に流し込まれるため、
   ref/lower.css（本番 /assets/css/lower.css）の以下のルール
   （詳細度 0,1,1）が、本CSS内の単一クラス指定（詳細度 0,1,0）を
   上書きしてしまう。
     .body-wrap p, .body-txt { margin-bottom:30px; line-height:1.8; font-size:16px; }
     .body-wrap a { text-decoration:underline; color:var(--c-pitchblack); }
   → 該当箇所に !important を付与し、意図したデザイン（行間・余白・
     文字サイズ・リンクの色・下線の有無）を保持する。
   症状の例：
   - 「戦略はあるが、実装に落とし込めない」等の課題テキストがアイコンと
     同じ行の中央に来ず、上寄りにずれる（margin-bottom:30pxの混入）
   - 「戦略×実装」等のテキストがボックス中央でなく上寄りになる
   - チーム体制図のノード内テキストが16px/1.8で表示され、
     10.5px前提の小さいボックスと重なる
   - 「支援領域を見る ›」等の .co-more-link が黒文字・下線付きになる
============================================================ */

/* ①-b ヒーローのリード文（margin指定はあるが !important がなく上書きされる） */
.co-hero-lead {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
}
.co-hero-lead:last-of-type { margin-bottom: 0 !important; }

/* ③サブセクション本文 */
.co-subsec-body p {
  margin-bottom: 18px !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
}
.co-subsec-body p:last-child { margin-bottom: 0 !important; }

/* ④課題リスト・分断をつなぐカード（今回の不具合報告箇所） */
.co-problem-item-txt {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.co-link-item-pair {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ②セクション共通リード文 */
.co-section-lead {
  margin: 0 auto !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

/* ⑥チーム体制図（今回の不具合報告箇所：テキスト巨大化によるノードの重なり） */
.co-team-intro p {
  margin-bottom: 18px !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
}
.co-team-intro p:last-child { margin-bottom: 0 !important; }
.co-hub-center-label { margin-bottom: 4px !important; font-size: 10.5px !important; line-height: 1.4 !important; }
.co-hub-center-ttl { margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important; }
.co-hub-node-ttl {
  margin: 0 0 4px !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}
.co-hub-node-desc {
  margin: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.5 !important;
}
.co-team-diagram-note {
  margin-top: 16px !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}
@media screen and (max-width: 600px) {
  .co-hub-node-ttl { font-size: 9.5px !important; }
  .co-hub-node-desc { font-size: 8.5px !important; }
}

/* ⑦コンサル×開発 補足セクション */
.co-flow-plain-body p {
  margin-bottom: 16px !important;
  font-size: 15.5px !important;
  line-height: 1.95 !important;
}
.co-flow-plain-body p:last-child { margin-bottom: 0 !important; }

/* ⑧「支援領域を見る ›」等の共通リンク（今回の不具合報告箇所：黒文字・下線化） */
.co-more-link {
  color: var(--co-color, #BE0161) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--co-color, #BE0161) !important;
}
.co-more-link:hover { opacity: 0.7; }

/* ⑬企業理念ページ（私たちの原点）の読み物コンテンツ */
.co-story-lead {
  margin-bottom: 8px !important;
  font-size: 18px !important;
  line-height: 2 !important;
}
.co-story-body p {
  margin-bottom: 26px !important;
  font-size: 16px !important;
  line-height: 2 !important;
}
.co-story-body p:last-child { margin-bottom: 0 !important; }
.co-story-emphasis p {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}
.co-story-emphasis p:last-child { margin-bottom: 0 !important; }
.co-quote-plain p {
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.9 !important;
}
.co-plain-list li {
  margin-bottom: 10px !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.co-plain-list li:last-child { margin-bottom: 0 !important; }
.co-logo-ttl {
  margin-bottom: 24px !important;
  font-size: 22px !important;
}
.co-logo-body p {
  margin-bottom: 20px !important;
  font-size: 15.5px !important;
  line-height: 2 !important;
}
.co-logo-body p:last-child { margin-bottom: 0 !important; }
.co-story-list-item {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
@media screen and (max-width: 640px) {
  .co-quote-plain p { font-size: 16px !important; }
  .co-story-emphasis p { font-size: 15px !important; }
  .co-story-lead { font-size: 16px !important; }
  .co-plain-list li { font-size: 14.5px !important; }
  .co-logo-ttl { font-size: 18px !important; }
  .co-story-list-item { font-size: 14.5px !important; }
}
@media screen and (max-width: 767px) {
  .co-hero-lead { font-size: 14px !important; }
}

/* 結論テキスト・パートナー強調・末尾強調メッセージ（marginのみ!important済みだったため font-size/line-height を追加保護） */
.co-conclusion-plain p {
  font-size: 17px !important;
  line-height: 1.7 !important;
}
.co-partner-highlight p {
  font-size: 15.5px !important;
  line-height: 1.9 !important;
}
.co-final-quote p {
  font-size: 20px !important;
  line-height: 1.8 !important;
}
@media screen and (max-width: 640px) {
  .co-conclusion-plain p { font-size: 15px !important; }
  .co-final-quote p { font-size: 16px !important; }
}