/* phoenix.css — 株式会社日本フェニックス 全面刷新 (2026-09) 専用コンポーネント。
   common.css には手を入れず、刷新対象12ページからのみ読み込む。
   配色は A デザインのトンマナ (ネイビー基調 + #60a5fa アクセント) を踏襲。 */

/* ============================================================
   配色トークン (2026-09 改修 A-1 / A-6 / A-7)

   既定 = オフホワイト #F8F8F5 の紙面。カードの面・光彩・グラデーションは使わず、
   細い罫線 #D3D1C7 と余白だけで区切る。
   濃紺の帯はトップの「ヒーロー / STATEMENT / OUR PHILOSOPHY / めざす未来 /
   お問い合わせ」だけに残し、その5セクションでのみトークンを反転させる。
   ============================================================ */

:root {
  --pj-bg:         #f8f8f5;                 /* 紙面の基調 */
  /* A-1: 紙面の基調をオフホワイト #F8F8F5 に。theme.json(bgBase) も同値に更新済みだが、
     theme-loader の fetch 前・no-JS・fetch 失敗時のフォールバックにも効かせる。
     common.css は触らず、後から読み込む本ファイルの :root で上書きする。 */
  --color-bg:      #f8f8f5;
  --pj-ink:        #16294f;                 /* 見出し (明朝) */
  --pj-body:       #3b3b34;                 /* 本文 */
  --pj-muted:      #63635a;                 /* 補助テキスト */
  --pj-accent:     #1a3560;                 /* アクセント (紺) */
  --pj-accent-dim: #33507f;                 /* 英字ラベル (eyebrow) */
  --pj-line:       #d3d1c7;                 /* 細い罫線 (依頼指定) */
  --pj-surface:    #f3f3f3;                 /* 表の見出し列 (依頼指定) */
  --pj-panel:      transparent;             /* カードの面は使わない */
  --pj-panel-2:    transparent;
  --pj-btn-bg:     #1a3560;
  --pj-btn-fg:     #ffffff;
  --pj-serif:      'Shippori Mincho', 'Noto Serif JP', serif;
  --pj-sans:       'Noto Sans JP', sans-serif;
}

/* 濃紺の帯を残す5セクション。カスタムプロパティは継承するので、
   ここで差し替えるだけで配下のコンポーネントがすべて反転する。 */
#hero-top,
#concept,
#philosophy,
#our-future,
#contact-teaser {
  --pj-bg:         #14294d;
  --pj-ink:        #e8f0ff;
  --pj-body:       rgba(200, 220, 255, 0.86);
  --pj-muted:      rgba(190, 213, 245, 0.82);
  --pj-accent:     #60a5fa;
  --pj-accent-dim: rgba(147, 197, 253, 0.95);
  --pj-line:       rgba(255, 255, 255, 0.22);
  --pj-surface:    rgba(255, 255, 255, 0.06);
  --pj-panel:      transparent;
  --pj-panel-2:    transparent;
  --pj-btn-bg:     #ffffff;
  --pj-btn-fg:     #14294d;
}

/* ============================================================
   基本タイポグラフィ
   ============================================================ */

.pj-eyebrow {
  font-family: var(--pj-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pj-accent-dim);
  margin-bottom: 0.7rem;
}
.pj-eyebrow.is-center { text-align: center; }

/* 2行見出しを原稿の改行位置どおりに折る。
   content.json 側の値に \n が入っても同じ位置で折れる (textContent 上書き対策)。 */
.pj-wrap { white-space: pre-line; }

.pj-h2 {
  font-family: var(--pj-serif);
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.35rem);
  line-height: 1.5;
  font-weight: 700;
  color: var(--pj-ink);
  margin: 0 0 1.4rem;
}
.pj-h2.is-center { text-align: center; }

.pj-h3 {
  font-family: var(--pj-serif);
  font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.4rem);
  line-height: 1.6;
  font-weight: 700;
  color: var(--pj-ink);
  margin: 0 0 0.7rem;
}

.pj-body { color: var(--pj-body); line-height: 2.05; margin-bottom: 1.15rem; }
.pj-body:last-child { margin-bottom: 0; }
.pj-body.is-center { text-align: center; }

.pj-lead {
  color: var(--pj-body);
  font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.12rem);
  line-height: 2.1;
  margin-bottom: 1.4rem;
}
.pj-lead.is-center { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }


.pj-narrow { max-width: 60rem; margin-left: auto; margin-right: auto; }
.pj-narrower { max-width: 48rem; margin-left: auto; margin-right: auto; }

/* セクション見出しの上に細いアクセント罫を引く */

/* ============================================================
   ページヒーロー (下層12ページ共通)

   従来はヒーロー背景に AI 生成写真を敷いていたが、いずれも作業着 + 建築CAD図面の
   「設計事務所」写真で、プロフェッショナルSEファームの内容と一致しなかった。
   写真は本文側で顧客提供の実画像を原寸で使い、ヒーローは設計図のグリッドを想起させる
   タイポグラフィ主体の構成にする。
   ============================================================ */

.pj-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(6.5rem, 5rem + 6vw, 9.5rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem);
  background: var(--pj-bg);
  border-bottom: 1px solid var(--pj-line);
  isolation: isolate;
}

/* A-6: 方眼(設計図のグリッド)と右上の光彩は廃止。文字と余白だけで見せる。 */

.pj-hero .container { position: relative; z-index: 1; }

/* A-5: 素材写真は全ページで使用しない (当社方針)。 */
.pj-hero-photo { display: none !important; }

.pj-hero-title {
  font-family: var(--pj-serif);
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.4rem);
  line-height: 1.45;
  font-weight: 700;
  color: var(--pj-ink);
  margin: 0;
  text-wrap: balance;
}

.pj-hero-lead {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  color: var(--pj-body);
  font-size: clamp(0.95rem, 0.9rem + 0.22vw, 1.06rem);
  line-height: 2.05;
}

/* ============================================================
   ページ内ジャンプリンク (依頼書 4. ページ内アンカー)
   ============================================================ */

.pj-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 1.5rem 0 0;
}
.pj-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.35rem;
  border: 1px solid var(--pj-line);
  border-radius: 999px;
  background: transparent;
  color: var(--pj-accent);
  font-family: var(--pj-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pj-jump a::after { content: '↓'; margin-left: 0.5rem; font-size: 0.8em; opacity: 0.75; }
.pj-jump a:hover, .pj-jump a:focus-visible {
  border-color: var(--pj-accent);
  color: var(--pj-ink);
}

/* アンカー着地時に固定ヘッダーへ潜り込ませない */
.pj-anchor { scroll-margin-top: 88px; }

/* ============================================================
   定義リスト (会社概要・募集要項・協業のかたち 等)
   ============================================================ */

.pj-dl { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; border-top: 1px solid var(--pj-line); }
.pj-dl > dt,
.pj-dl > dd {
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--pj-line);
  line-height: 1.95;
  margin: 0;
}
.pj-dl > dt {
  font-family: var(--pj-sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--pj-ink);
  background: var(--pj-surface);
  letter-spacing: 0.02em;
}
.pj-dl > dd { color: var(--pj-body); font-size: 0.94rem; }
.pj-dl > dd .pj-sub { display: block; color: var(--pj-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* ============================================================
   チェック / 除外リスト (私たちが売る・売らないもの)
   ============================================================ */

.pj-check, .pj-cross { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.pj-check > li, .pj-cross > li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--pj-body);
  line-height: 1.85;
  font-size: 0.95rem;
}
.pj-check > li::before, .pj-cross > li::before {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-weight: 700;
  font-size: 1rem;
}
.pj-check > li::before { content: '✓'; color: var(--pj-accent); }
.pj-cross > li::before { content: '×'; color: #6f6f66; }

/* リストの直後に続く補足文が、リストへ貼り付いて見えないよう間隔を空ける */
.pj-check + .pj-body, .pj-cross + .pj-body,
.pj-check + .pj-lead, .pj-cross + .pj-lead,
.pj-tags + .pj-body { margin-top: 1.35rem; }

/* 対になる2枚のパネル (売らないもの / 売るもの) */
.pj-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pj-duo > div {
  padding: 1.4rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pj-line);
  border-radius: 0;
}
.pj-duo > div.is-positive { background: transparent; border-top-color: var(--pj-line); }

/* ============================================================
   動画 (YouTube) — 16:9 レスポンシブ
   ============================================================ */

.pj-video { max-width: 52rem; margin: 0 auto; }
.pj-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: #0b1a33;
  border: 1px solid var(--pj-line);
}
.pj-video-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pj-video-cap {
  margin-top: 0.8rem;
  text-align: center;
  font-family: var(--pj-sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--pj-muted);
}

/* ============================================================
   図版 (写真 + キャプション)
   ============================================================ */

.pj-figure { margin: 0; }
.pj-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.pj-figure figcaption { margin-top: 0.6rem; font-size: 0.78rem; color: var(--pj-muted); text-align: center; }

/* 2カラム (文章 + 図版)。common.css の .two-col と別に、比率と縦位置を制御する */
.pj-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.75rem; align-items: center; }
.pj-split.is-reverse > :first-child { order: 2; }
.pj-split.is-top { align-items: start; }

/* ============================================================
   カード (共通)
   ============================================================ */

.pj-cards { display: grid; gap: 1.25rem; }
.pj-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pj-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pj-card {
  padding: 1.4rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pj-line);
  border-radius: 0;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.pj-card-n {
  display: block;
  font-family: var(--pj-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pj-accent);
  margin-bottom: 0.6rem;
}
.pj-card p { color: var(--pj-body); font-size: 0.93rem; line-height: 1.95; margin: 0; }

/* リンクになっているカードだけホバーで持ち上げる */
a.pj-card { display: block; text-decoration: none; }
a.pj-card:hover, a.pj-card:focus-visible {
  border-top-color: var(--pj-accent);
}

/* ============================================================
   ボタン
   ============================================================ */

.pj-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.pj-actions.is-center { justify-content: center; }

.pj-btn, .pj-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 2rem;
  border-radius: 4px;
  font-family: var(--pj-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.3s ease;
}
.pj-btn {
  background: var(--pj-btn-bg);
  color: var(--pj-btn-fg);
  border: 1px solid var(--pj-btn-bg);
}
.pj-btn:hover, .pj-btn:focus-visible { opacity: 0.85; }
.pj-btn-ghost {
  background: transparent;
  color: var(--pj-accent);
  font-weight: 500;
  border: 1px solid var(--pj-line);
}
.pj-btn-ghost:hover, .pj-btn-ghost:focus-visible { border-color: var(--pj-accent); color: var(--pj-ink); }
.pj-btn::after, .pj-btn-ghost::after { content: '→'; margin-left: 0.6rem; }

/* ============================================================
   問い合わせフォームの土台

   フォームは外部ウィジェットが描画する。ウィジェット側は明るい背景を前提に
   濃い文字色を出すため、濃紺のセクションへ直接置くとラベルがほぼ読めない
   (実測: ラベルが背景と同化)。オフホワイトの面を敷いて本来の配色で見せる。
   ============================================================ */

.pj-formpanel {
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: #ffffff;
  border-radius: 0;
  border: 1px solid var(--pj-line);
  color: #3d3d38;
}
.pj-formpanel [data-sm-widget] { min-height: 4rem; }
/* ウィジェット内の見出しが本文色のまま沈まないよう、面に合わせて締める */
.pj-formpanel h1, .pj-formpanel h2, .pj-formpanel h3, .pj-formpanel label {
  color: #1a2b5f;
}

/* ============================================================
   料金表
   ============================================================ */

.pj-price { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.pj-price th, .pj-price td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--pj-line); text-align: left; line-height: 1.8; }
.pj-price thead th {
  font-family: var(--pj-sans);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pj-ink);
  background: var(--pj-surface);
  border-bottom-color: var(--pj-line);
}
.pj-price tbody th { font-weight: 600; color: var(--pj-ink); white-space: nowrap; background: var(--pj-surface); }
.pj-price td { color: var(--pj-body); }
.pj-price tr.is-pick th, .pj-price tr.is-pick td { font-weight: 700; }
.pj-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   FAQ
   ============================================================ */

.pj-faq { display: grid; gap: 0.85rem; }
.pj-faq > details {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pj-line);
  border-radius: 0;
  overflow: hidden;
}
.pj-faq > details:last-child { border-bottom: 1px solid var(--pj-line); }
.pj-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 48px;
  padding: 1.05rem 0.25rem;
  color: var(--pj-ink);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.7;
}
.pj-faq summary::-webkit-details-marker { display: none; }
.pj-faq summary::before { content: 'Q'; color: var(--pj-accent); font-family: var(--pj-sans); font-weight: 700; }
.pj-faq summary::after { content: '+'; margin-left: auto; color: var(--pj-accent); font-size: 1.25rem; line-height: 1; }
.pj-faq > details[open] summary::after { content: '−'; }
.pj-faq-a {
  display: flex;
  gap: 0.75rem;
  padding: 0 0.25rem 1.25rem;
  color: var(--pj-body);
  font-size: 0.93rem;
  line-height: 1.95;
}
.pj-faq-a::before { content: 'A'; color: var(--pj-muted); font-family: var(--pj-sans); font-weight: 700; flex: none; }

/* ============================================================
   タグ (開発環境・対応領域)
   ============================================================ */

.pj-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
/* 中央寄せのセクション内では、タグの並びも中央に揃える */
.pj-narrow > .pj-tags, .pj-narrower > .pj-tags { justify-content: center; }
.pj-tags > li {
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: 1px solid var(--pj-line);
  border-radius: 999px;
  color: var(--pj-body);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ============================================================
   地図
   ============================================================ */

.pj-map { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; border-radius: 0; overflow: hidden; border: 1px solid var(--pj-line); }
.pj-map > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   サイトマップ / お知らせ一覧
   ============================================================ */

.pj-linklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.pj-linklist > li { border-bottom: 1px solid var(--pj-line); }
.pj-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 0.5rem 1rem 0;
  color: var(--pj-ink);
  font-size: 0.98rem;
  text-decoration: none;
  transition: color 0.2s ease, padding 0.2s ease;
}
.pj-linklist a::after { content: '→'; color: var(--pj-accent); }
.pj-linklist a:hover, .pj-linklist a:focus-visible { color: var(--pj-accent); padding-left: 0.5rem; }
.pj-linklist .pj-sub { display: block; font-size: 0.76rem; color: var(--pj-muted); margin-top: 0.15rem; }

/* ============================================================
   レスポンシブ (SP: 依頼書指定どおり 900px 以下で2カラムを上下2段へ)
   ============================================================ */

@media (max-width: 900px) {
  .pj-split, .pj-duo { grid-template-columns: 1fr; gap: 1.75rem; }
  .pj-split.is-reverse > :first-child { order: 0; }
  .pj-cards.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .pj-linklist { grid-template-columns: 1fr; }
}

/* ============================================================
   common.css との継ぎ目の是正

   common.css は白背景を前提にした旧デザインの規則を持っており、
   ネイビー基調の刷新ページにそのまま乗ると画面上で破綻していた。
   common.css 自体は触らず、刷新12ページ側でだけ打ち消す。
   ============================================================ */

/* (1) A-7: 会社概要・役員構成・料金表を「白地に細い罫線、見出し列だけ薄いグレー
   #F3F3F3」に統一する。common.css は td を白 (#fff)、th を --color-heading-ink
   (紺地に白文字) にしており、SP用の折り返し規則と組み合わさると 641px と 640px で
   白/紺が反転していた。印刷しても読めるよう、常に白地 + #3b3b34 の文字で通す。 */
.price-table.on-dark td,
.price-table td { background: #ffffff !important; color: var(--pj-body) !important; }
.price-table th {
  background: var(--pj-surface) !important;
  color: var(--pj-ink) !important;          /* テーマ色 (--color-heading-ink) 依存を切る */
  font-family: var(--pj-sans) !important;
  font-weight: 600;
}
.price-table td, .price-table th { border-bottom: 1px solid var(--pj-line) !important; }
.price-table { border-top: 1px solid var(--pj-line); }

/* (0) A-1 で白地に反転した節の低コントラスト箇所を締める。
   もとは濃紺地向けに淡い青 (#bfdbfe 等) をインライン style で当てていた箇所で、
   オフホワイト地ではほぼ読めなくなるため濃色へ振り替える。
   #concept は濃紺のまま残す4か所のひとつなので、従来どおり淡色側で扱う。 */
#services li > span[style*="color"],
#services a > span[style*="color"] { color: var(--pj-accent) !important; }
#services p[style*="color:rgba(200,220,255"],
#services p[style*="color:rgba(219,234,254"] { color: var(--pj-body) !important; }
#concept p[style*="rgba(180,205,240,0.68)"] { color: var(--pj-muted) !important; }
#phoenix-model .pm-layer-num { color: var(--pj-accent) !important; }

/* (2) フッター下部のコピーライトが common.css で rgba(255,255,255,0.5) 指定。
   フッター背景 rgb(30,58,110) 上で実測 4.05:1 と AA 未達だったため引き上げる。 */
.site-footer .footer-bottom { color: rgba(255, 255, 255, 0.62) !important; }

/* (3) トップの5ステップ (.pj-flow) の最終行だけ common.css がピンクにしていた。
   実測: step6 のみ タイトル rgb(255,217,236) / バッジ背景 rgba(244,114,182,.32)。
   A-6 に合わせ、グラデーションのバッジは使わず罫線と余白だけで揃える。 */
.pj-flow-step:last-child .pj-flow-t { color: var(--pj-ink); }
.pj-flow-step:last-child .pj-flow-no {
  color: var(--pj-accent);
  background: transparent;
  border-color: var(--pj-line);
}
.pj-flow-step:last-child { border-top-color: var(--pj-line); border-bottom-color: var(--pj-line); }

/* common.css の .price-table は min-width:480px を持ち、colgroup で1列目を280pxに
   固定しているページがある。390px幅では右へ106pxはみ出して内容が読めなくなるため、
   刷新対象ページに限って項目名/内容の上下2段へ折り返す。 */
@media (max-width: 640px) {
  .price-table { min-width: 0 !important; table-layout: auto !important; }
  .price-table colgroup, .price-table col { display: none !important; }
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td { display: block !important; width: auto !important; }
  .price-table tr { border-bottom: 1px solid var(--pj-line); }
  .price-table tr:last-child { border-bottom: 0; }
  .price-table th {
    font-size: 0.84rem;
    padding: 0.7rem 0.9rem 0.55rem !important;
    border-bottom: 0 !important;
  }
  .price-table td { border-bottom: 0 !important; padding: 0.65rem 0.9rem 0.95rem !important; }
  .table-scroll { overflow-x: visible; }
}

@media (max-width: 640px) {
  .pj-cards.cols-2, .pj-cards.cols-3 { grid-template-columns: 1fr; }
  .pj-dl { grid-template-columns: 1fr; border-top: 0; }
  .pj-dl > dt { border-bottom: 0; padding-bottom: 0.35rem; border-top: 1px solid var(--pj-line); }
  .pj-dl > dd { padding-top: 0.35rem; }
  .pj-jump { justify-content: stretch; }
  .pj-jump a { flex: 1 1 100%; justify-content: center; }
  .pj-actions .pj-btn, .pj-actions .pj-btn-ghost { flex: 1 1 100%; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .pj-btn, .pj-btn-ghost, a.pj-card, .pj-linklist a { transition: none; }
  .pj-btn:hover, a.pj-card:hover { transform: none; }
}


/* ============================================================
   A-6 総仕上げ (2026-09 改修)

   生成時の各ページにはインライン style で
   「半透明カード + 角丸 + 影 + backdrop-filter」が多数残っている。
   個別に消すと取りこぼすため、刷新12ページ共通で無効化する。
   濃紺のまま残す4か所 (#hero-top / #concept+#philosophy / #our-future /
   #contact-teaser) の中でも、箱ではなく罫線で区切る方針は同じ。
   ============================================================ */

main [style*="box-shadow"],
main [style*="backdrop-filter"] {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 半透明の白パネル (ガラス風カード) の面と角丸を落とし、細い罫線に置き換える。
   面の指定は rgba(255,255,255,0.0x) のインライン style に集中している。 */
main [style*="background:rgba(255,255,255"],
main [style*="background: rgba(255,255,255"],
main [style*="background:rgba(255, 255, 255"],
main [style*="background: rgba(255, 255, 255"] {
  background: transparent !important;
  border-color: var(--pj-line) !important;
  border-radius: 0 !important;
}

/* 角丸は使わない (罫線と余白で区切る)。画像・動画・地図も同じ。 */
main [style*="border-radius"] { border-radius: 0 !important; }

/* 罫線の色を依頼指定の #D3D1C7 (濃紺面では白の半透明) に揃える。 */
main [style*="border:1px solid rgba(255,255,255"],
main [style*="border: 1px solid rgba(255,255,255"],
main [style*="border:1px solid rgba(255, 255, 255"],
main [style*="border: 1px solid rgba(255, 255, 255"],
main [style*="border-top:1px solid rgba(255,255,255"],
main [style*="border-bottom:1px solid rgba(255,255,255"],
main [style*="border-left:3px solid"] {
  border-color: var(--pj-line) !important;
}


/* ============================================================
   A-1 の後始末 — 濃紺地前提のインライン文字色をトークンへ振り替える

   生成時の各節には濃紺地を前提にした淡色 (白・淡い青) が style 属性で
   直接書かれており、オフホワイト地ではほぼ読めない。
   HTML を書き換えるかわりに属性セレクタで拾い、値をトークンへ寄せる。
   濃紺のまま残す5節ではトークン側が反転しているので、同じ規則で
   従来どおりの淡色に解決される。
   ============================================================ */

/* 見出し相当 (白・ほぼ白) */
main [style*="color:#ffffff"],
main [style*="color:#fff"],
main [style*="color:#e8f0ff"],
main [style*="color:#f0f4ff"],
main [style*="color:#e2e8f0"],
main [style*="color:rgba(180,220,255,1.0)"] {
  color: var(--pj-ink) !important;
}

/* 補助テキスト (白の半透明) */
main [style*="color:rgba(255,255,255,0.65)"],
main [style*="color:rgba(255,255,255,0.62)"],
main [style*="color:rgba(255,255,255,0.55)"] {
  color: var(--pj-muted) !important;
}

/* 本文 (淡い青) */
main [style*="color:rgba(200,220,255,0.88)"],
main [style*="color:rgba(200,220,255,0.85)"],
main [style*="color:rgba(200,220,255,0.82)"],
main [style*="color:rgba(200,220,255,0.8)"],
main [style*="color:rgba(200,220,255,0.78)"],
main [style*="color:rgba(200,220,255,0.7)"],
main [style*="color:rgba(200,220,255,0.65)"],
main [style*="color:rgba(219,234,254,0.92)"],
main [style*="color:rgba(219,234,254,0.9)"],
main [style*="color:rgba(220,232,255,0.92)"],
main [style*="color:rgba(180,205,240,0.82)"],
main [style*="color:rgba(180,205,240,0.75)"] {
  color: var(--pj-body) !important;
}

/* 英字ラベル・アクセント (青) */
main [style*="color:#60a5fa"],
main [style*="color:#93c5fd"],
main [style*="color:rgba(147,197,253,0.95)"],
main [style*="color:rgba(147,197,253,0.88)"],
main [style*="color:rgba(147,197,253,0.85)"],
main [style*="color:rgba(147,197,253,0.75)"],
main [style*="color:rgba(180,205,240,0.68)"] {
  color: var(--pj-accent-dim) !important;
}

/* A-4: 「私たちが売らないもの」の赤をやめ、「売るもの」と同じ紺に揃える。
   × 印だけは薄いグレーにする (.pj-cross / .se-card-label--bad 側で指定)。 */
main [style*="color:#e74c3c"] { color: var(--pj-accent) !important; }

/* A-6: 青のグラデーションボタンを単色にする。
   ボタンは文字色の規則より詳細度を高くして、上の振り替えに勝たせる。 */
main a[style*="linear-gradient(135deg,#1d4ed8"],
main a[style*="linear-gradient(135deg, #1d4ed8"],
main a[style*="linear-gradient(135deg,#2563eb"],
main a[style*="linear-gradient(135deg, #2563eb"] {
  background: var(--pj-btn-bg) !important;
  color: var(--pj-btn-fg) !important;
  border: 1px solid var(--pj-btn-bg) !important;
}
/* 枠線だけのボタン (背景 rgba(0,0,0,.6) の擬似ゴースト) も同じ扱いに。 */
main a[style*="background:rgba(0,0,0,0.6)"],
main a[style*="background:rgba(0,0,0,.6)"] {
  background: transparent !important;
  color: var(--pj-accent) !important;
  border: 1px solid var(--pj-line) !important;
}

/* 装飾用の細い青グラデーション罫 (見出し下のライン等) は単色の罫線に。 */
main div[style*="linear-gradient(90deg,#1d4ed8"],
main div[style*="linear-gradient(90deg, #1d4ed8"],
main div[style*="linear-gradient(180deg,#1d4ed8"],
main div[style*="linear-gradient(180deg, #1d4ed8"] {
  background: var(--pj-accent) !important;
}


/* ============================================================
   循環 (.pj-flow) — common.css は濃紺地前提で白文字・青のグラデーション
   バッジ・最終行だけピンクの罫線を指定している。common.css は触らず、
   刷新12ページ側でトークンに寄せて打ち消す (A-1 / A-6)。
   ============================================================ */

.pj-flow-t { color: var(--pj-ink); }
.pj-flow-d { color: var(--pj-body); }
.pj-flow-no {
  color: var(--pj-accent);
  background: transparent;
  border: 1px solid var(--pj-line);
  box-shadow: none;
}
.pj-flow-step { border-color: var(--pj-line); }
.pj-flow-step::before { -webkit-text-stroke-color: var(--pj-line); }
.pj-flow-step:last-child .pj-flow-no {
  color: var(--pj-accent);
  background: transparent;
  border-color: var(--pj-line);
  box-shadow: none;
}
.pj-flow-step:last-child::before { -webkit-text-stroke-color: var(--pj-line); }


/* A-6: 各節に敷かれた radial-gradient の光彩オーバーレイを消す。
   いずれも装飾専用の空 div (position:absolute; inset:0; pointer-events:none)。 */
main div[style*="radial-gradient"] { background: none !important; }


/* A-5: 図版を外した 2カラム (.pj-split) は、残った本文を全幅に伸ばす。
   右の 0.85fr が空のまま残って不自然な余白になるのを防ぐ。 */
.pj-split > :only-child { grid-column: 1 / -1; }


/* A-6: common.css の .card は白い面 + 角丸 + 影の「箱」。刷新12ページでは
   箱を並べず、上辺の細い罫線と余白だけで区切る (.pj-card と同じ見せ方に揃える)。
   common.css 自体は触らず、後から読み込む本ファイルで打ち消す。 */
main .card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--pj-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
main a:hover .card,
main a.card:hover { transform: none; box-shadow: none; border-top-color: var(--pj-accent); }
main .card > .card-body { padding: 1.4rem 0 0; }
main .card-title { color: var(--pj-ink); }
main .card-text { color: var(--pj-body); }


/* ============================================================
   A-6 の徹底 (レビュー指摘の反映)

   構文修復で4辺の枠が復活する箱を、下辺の細い罫線だけに落とす。
   角丸は「箱」に見える面(カード・パネル・行)では 0 にし、
   ピル(タグ・ジャンプリンク)とボタンは従来どおり残す。
   ============================================================ */

/* 事業詳細の箇条書き / 三層構造の行 / 実績と信頼のチェック項目 */
.biz-detail-points li,
.pm-layer-row,
#evidence-intro li[style] {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pj-line) !important;
  border-radius: 0 !important;
}

/* 面として残っていた角丸を落とす (ピル・ボタン・丸バッジは対象外) */
.concept-stats,
.pj-video-frame,
.pj-figure img,
.pj-formpanel,
.se-card,
.se-list-item { border-radius: 0 !important; }


/* 組織図は元画像が 3111x2571px。SP幅だと役職名が読めないため、
   狭い画面でのみ横スクロールできる枠に入れる (ページ自体は横に伸ばさない)。 */
.pj-org-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  .pj-org-scroll > img { width: 720px !important; max-width: none; }
}