/* ===================================================
   EDITORIAL — プロジェクト詳細ページ
   手本: 技術書の 1 章。editorial.css（色・書体・ヘッダー）の後に読み込み、
   styles.css の詳細ページ用スタイルを上書きする
   =================================================== */

/* ---------- 章の扉（ページ上部の帯） ----------
   帯の写真と濃い紺紫はそのまま。文字の扱いだけトップにそろえる */

.editorial .project-detail {
  padding-top: 61px;
}

.editorial .project-header {
  padding: 56px 0 48px;
  margin-bottom: 0;
}

.editorial .project-breadcrumb {
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(243, 240, 255, 0.7);
  opacity: 1;
}

.editorial .project-breadcrumb a {
  color: rgba(243, 240, 255, 0.85);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}

.editorial .project-breadcrumb a:hover {
  opacity: 1;
  border-bottom-color: rgba(243, 240, 255, 0.6);
}

.editorial .project-detail-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.editorial .project-detail-subtitle {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(243, 240, 255, 0.8);
  opacity: 1;
  margin: 0;
}

/* ---------- 本文と目次の 2 段 ---------- */

.editorial .project-content-wrapper {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  margin: 56px 0 96px;
}

.editorial .content-section {
  padding: 0 0 56px;
  margin: 0;
  scroll-margin-top: 88px;
}

.editorial .content-section h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: var(--line-strong);
}

.editorial .content-section h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
}

.editorial .content-section h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}

.editorial .content-section p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
  margin-bottom: 16px;
}

/* 箇条書きは、トップの要点と同じ「─」の印で揃える */
.editorial .content-section ul,
.editorial .styled-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.editorial .content-section li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}

.editorial .content-section li::before {
  content: "─";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}

.editorial .content-section a {
  color: var(--accent);
  border-bottom: 1px solid #ddd6fe;
  transition: border-color var(--ease);
}

.editorial .content-section a:hover {
  border-bottom-color: currentColor;
}

/* 画像：角は 2px、影は付けず罫線で縁取る */
.editorial .image-container {
  margin: 0 0 32px;
  text-align: center;
}

.editorial .image-container img,
.editorial .content-section img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto 24px;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* 概要の上に置く、実物の画面のサムネイル。
   縦横比がページごとに違う（一覧アプリ、ダッシュボードなど）ので、
   決まった大きさの枠に収め、object-fit: contain で切らずに全体を見せる */
.editorial .project-image {
  margin: 0 0 32px;
  padding: 20px;
  background: var(--paper-2);
  border: var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial .project-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- 流れ（課題定義 → 解析 → …） ----------
   矢印は消し、同じ幅のカードを横に並べる。順番は見出しの番号で伝わる */

.editorial .workflow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 24px 0 8px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.editorial .workflow-arrow {
  display: none;
}

.editorial .workflow-step {
  min-width: 0;
  padding: 18px 20px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.editorial .workflow-step h3 {
  font-size: 15px;
  margin-bottom: 6px;
}

.editorial .workflow-step p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* ---------- 使用技術 ----------
   区分ごとの白いカード。中身はトップと同じ面だけのタグ */

.editorial .tech-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
}

.editorial .tech-item {
  padding: 20px 22px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
}

.editorial .tech-item h4 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

.editorial .tech-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.editorial .tech-item li,
.editorial .tech-tag {
  padding: 3px 10px;
  margin: 0;
  background: var(--paper-2);
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink);
  white-space: nowrap;
}

.editorial .tech-item li::before {
  content: none;
}

.editorial .tech-tag:hover {
  color: var(--ink);
}

.editorial .tech-category-row {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  margin: 0;
  border-bottom: var(--line);
}

.editorial .tech-category-label {
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.editorial .tech-tag-list {
  gap: 6px;
}

/* ---------- 主な機能・工夫ポイント ---------- */

.editorial .feature-detail {
  margin: 0;
  padding: 24px 0;
  background: none;
  border-top: var(--line);
  border-radius: 0;
}

.editorial .feature-detail:first-of-type {
  border-top: none;
  padding-top: 0;
}

.editorial .feature-detail h3 {
  color: var(--ink);
}

.editorial .feature-detail ul {
  margin-bottom: 0;
}

.editorial .feature-list-grid {
  gap: 12px;
  margin: 0;
}

.editorial .feature-card {
  padding: 20px 24px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--ease);
}

.editorial .feature-card::before {
  content: none;
}

.editorial .feature-card:hover {
  border-color: #c4b5fd;
  box-shadow: none;
  transform: none;
}

.editorial .feature-card-number {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}

.editorial .feature-card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}

.editorial .feature-card-desc,
.editorial .feature-card-list li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* ---------- 成果・学び ---------- */

.editorial .results-grid {
  gap: 12px;
  margin: 0;
}

.editorial .result-card {
  padding: 22px 26px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--ease);
}

.editorial .result-card::before {
  content: none;
}

.editorial .result-card:hover {
  border-color: #c4b5fd;
  box-shadow: none;
  transform: none;
}

.editorial .result-card h4 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}

.editorial .result-card ul {
  padding: 0;
}

.editorial .result-card li {
  font-size: 14px;
}

/* 学び：カードをやめ、章末のまとめのように番号・見出し・本文を罫線で区切る */
.editorial .learnings {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: learning;
}

.editorial .learnings > li {
  counter-increment: learning;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 8px;
  padding: 24px 0;
  margin: 0;
  border-bottom: var(--line);
}

.editorial .learnings > li:first-child {
  padding-top: 4px;
}

.editorial .learnings > li::before {
  content: counter(learning, decimal-leading-zero);
  position: static;
  grid-row: 1 / span 3;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.editorial .learnings h3 {
  grid-column: 2;
  font-size: 17px;
  margin-bottom: 6px;
}

.editorial .learnings p,
.editorial .learnings ul {
  grid-column: 2;
  margin: 0;
}

.editorial .learnings ul li {
  font-size: 14px;
}

/* 手順の見出し（データ取得など）は 1 行に独立させる */
.editorial .methodology-steps li strong {
  display: block;
  margin-bottom: 2px;
}

/* ---------- 数字・表・流れ図 ---------- */

.editorial .performance-metrics,
.editorial .metrics-row {
  gap: 12px;
  margin: 24px 0;
}

.editorial .metric-card,
.editorial .metric-box {
  padding: 24px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
}

.editorial .metric-value,
.editorial .metric-box .metric-value {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.editorial .metric-label {
  font-size: 13px;
  color: var(--ink-2);
  opacity: 1;
}

.editorial .table-container {
  margin: 0 0 16px;
  border: var(--line);
  border-radius: var(--radius);
}

.editorial .styled-table th {
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: var(--line);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.editorial .styled-table td {
  padding: 12px 16px;
  border-bottom: var(--line);
  font-size: 14px;
  color: var(--ink-2);
}

/* 表の最初の 2 列（バージョン・アプローチ）は短い語なので折り返しにくくする */
.editorial .styled-table td:first-child,
.editorial .styled-table td:nth-child(2) {
  white-space: nowrap;
}

.editorial .styled-table tr:hover {
  background: none;
}

.editorial .eval-gate-flow {
  gap: 8px;
}

.editorial .eval-gate-step-card,
.editorial .pipeline-step {
  padding: 18px 22px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.editorial .eval-gate-step-card::before {
  content: none;
}

.editorial .eval-gate-step-card:hover,
.editorial .pipeline-step:hover {
  border-color: #c4b5fd;
  box-shadow: none;
  transform: none;
}

.editorial .eval-gate-step-body h4,
.editorial .pipeline-step h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.editorial .eval-flow-arrow-down {
  margin: -4px 0;
  font-size: 13px;
  color: var(--ink-3);
}

.editorial .score-timeline::before {
  width: 1px;
  background: var(--rule);
}

.editorial .timeline-item::before {
  width: 8px;
  height: 8px;
  left: -2.25rem;
  top: 0.65rem;
  background: var(--accent);
  border: none;
  box-shadow: none;
}

.editorial .timeline-date {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.editorial .methodology-steps li {
  padding: 16px 20px 16px 52px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
}

.editorial .methodology-steps li::before {
  width: auto;
  height: auto;
  left: 20px;
  top: 16px;
  background: none;
  border-radius: 0;
  color: var(--accent);
  font-weight: 400;
}

.editorial .methodology-steps li strong {
  font-weight: 500;
  color: var(--ink);
}

.editorial .code-example {
  background: var(--header);
  border-radius: var(--radius);
}

.editorial .algorithm-explanation {
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  border-radius: 0;
}

/* ---------- Champion-Challenger の流れ図（画像をやめて HTML で描く） ----------
   PDCA の 4 段階ごとに 1 枚の枠でまとめ、枠の左罫線と見出しの色で段階を示す。
   段階内の手順は罫線区切りの行として並べる（2026-09-28、線が箱にはみ出す表現をやめて枠groupingに変更） */

.editorial .pdca-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 0;
}

.editorial .pdca-phase {
  background: #ffffff;
  border: var(--line);
  border-left: 4px solid var(--phase-color, var(--accent));
  border-radius: var(--radius);
  padding: 16px 22px;
}

.editorial .pdca-phase-plan  { --phase-color: #34608a; }
.editorial .pdca-phase-do    { --phase-color: #9a6b12; }
.editorial .pdca-phase-check { --phase-color: #2f7a63; }
.editorial .pdca-phase-act   { --phase-color: #a1483a; }

.editorial .content-section .pdca-phase-label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--phase-color, var(--accent));
}

.editorial .pdca-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.editorial .content-section .pdca-steps .flow-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 12px 0;
}

/* .content-section li の既定の「─」印（箇条書き用）を打ち消す。
   これを忘れると、番号 01 などの上に「─」が重なって取り消し線のように見える */
.editorial .content-section .pdca-steps .flow-step::before {
  content: none;
}

.editorial .content-section .pdca-steps .flow-step:first-child {
  padding-top: 0;
}

.editorial .content-section .pdca-steps .flow-step:last-child {
  padding-bottom: 0;
}

.editorial .flow-no {
  font-size: 18px;
  line-height: 1.4;
  color: var(--phase-color, var(--accent));
  word-break: normal;
  text-wrap: normal;
}

.editorial .flow-body h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.editorial .content-section .flow-body p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

.editorial .content-section .flow-body .flow-fail {
  margin-top: 8px;
  color: var(--ink-3);
}

.editorial .content-section .flow-decision {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

.editorial .content-section .flow-question {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink);
}

.editorial .flow-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.editorial .flow-outcome {
  padding: 18px 22px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
}

.editorial .content-section .flow-outcome-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.editorial .flow-outcome h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.editorial .content-section .flow-outcome p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.editorial .content-section .flow-note {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* 右の使用技術：タグの上の余白だけ詰める */
.editorial .sidebar-tech .tech-chips {
  margin-top: 0;
}

/* 権利表記：本文の最後に小さく置く */
.editorial .credit {
  margin: 0;
  padding-top: 16px;
  border-top: var(--line);
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ---------- 右の目次とプロジェクト情報 ----------
   箱で囲まず、上の罫線と小さな見出しで区切る */

.editorial .project-sidebar {
  top: 88px;
}

.editorial .sidebar-card {
  padding: 14px 0 28px;
  margin: 0;
  background: none;
  border: none;
  border-top: var(--line-strong);
  border-radius: 0;
  box-shadow: none;
}

.editorial .sidebar-card h3 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 12px;
  padding: 0;
  border: none;
}

.editorial .toc-list li {
  margin: 0;
}

.editorial .toc-list a {
  display: block;
  padding: 5px 0;
  border-radius: 0;
  font-size: 14px;
  color: var(--ink-2);
  transition: color var(--ease);
}

.editorial .toc-list a:hover,
.editorial .toc-list .toc-sub a:hover {
  padding-left: 0;
  background: none;
  color: var(--accent);
}

.editorial .toc-list .toc-sub a {
  padding-left: 14px;
  font-size: 13px;
}

.editorial .toc-list .toc-sub a:hover {
  padding-left: 14px;
}

.editorial .info-item {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: var(--line);
  font-size: 13px;
}

.editorial .info-item strong {
  font-weight: 400;
  color: var(--ink-3);
}

.editorial .info-item span {
  color: var(--ink);
}

.editorial .sidebar-links {
  gap: 8px;
}

.editorial .sidebar-link {
  padding: 10px 14px;
  background: #ffffff;
  border: var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  transition: border-color var(--ease), color var(--ease);
}

.editorial .sidebar-link::after {
  content: " →";
  color: var(--ink-3);
}

.editorial .sidebar-link:hover {
  background: #ffffff;
  border-color: #c4b5fd;
  color: var(--accent);
  transform: none;
}

/* ---------- 画面幅ごとの調整 ---------- */

@media (max-width: 968px) {
  .editorial .project-content-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .editorial .project-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .editorial .project-header {
    padding: 40px 0 32px;
  }

  .editorial .project-content-wrapper {
    margin: 40px 0 64px;
  }

  .editorial .tech-category-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .editorial .content-section .pdca-steps .flow-step,
  .editorial .content-section .flow-decision {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .editorial .pdca-phase {
    padding: 14px 16px;
  }

  .editorial .flow-outcomes {
    grid-template-columns: 1fr;
  }

  .editorial .workflow {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}