/* ==========================================================================
   interview-2026.css — ベンダーインタビュー記事のデザイン刷新（2026-08〜）

   共通 `interview.css` のあとに読み込む。
   基本方針:
   - 見出し系は Shippori Mincho（本文は Noto Sans JP のまま）
   - タイトルの疑似斜体（<em>）は使わない。強調は <span class="ht-key"> で weight のみ
   - 図解は「濃い見出し帯 + ヘッダの黒 + 到達点の緑ベタ」で塊として立たせる（.ig-2026）
   - 記事側は <link rel="stylesheet" href="interview.css">
     に続けて <link rel="stylesheet" href="interview-2026.css"> を読み込むだけ
   ========================================================================== */

:root {
  --display: 'Shippori Mincho', 'Noto Serif JP', serif;
}

/* --------------------------------------------------------------------------
   1. 改行制御 — 語中改行・1行だけ余る泣き別れを防ぐ
   （hero-title は base で clamp + word-break: keep-all を効かせているので除外）
   -------------------------------------------------------------------------- */
.section-heading,
.section-sub-heading,
.ig-2026-heading,
.photo-caption,
.interviewee-role,
.stat-label {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
.section-heading { text-wrap: balance; }

/* 人名・商号など「絶対に割らない」区間 */
.nw { white-space: nowrap; }

/* --------------------------------------------------------------------------
   2. タイポグラフィ — 見出し系だけを専用の明朝に差し替える
   -------------------------------------------------------------------------- */
.hero-title,
.section-heading,
.section-sub-heading,
.ig-2026-heading,
.interviewee-name,
.company-profile-name,
.highlight-box .point-list li,
.pull-quote-text { font-family: var(--display); }

/* H1 — 疑似斜体は使わない。ht-key で weight のみ強調 */
.hero-title {
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: .012em;
}
.hero-dark-wrap .hero-title { color: rgba(255, 255, 255, .9); }
.hero-title .ht-key {
  font-style: normal;
  font-weight: 700;
  margin-left: -.5em;  /* 行頭の始まりカッコを半字ぶら下げて他行と頭を揃える */
}
.hero-dark-wrap .hero-title .ht-key { color: #fff; }

/* セクション番号 — 見出しの一部として */
.section-label { margin-bottom: 1.15rem; }
.section-label-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--accent-dark);
}

/* H2 — 一回り大きく、太さは落とす。下線はなし */
.section-heading {
  font-size: 2.05rem;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.004em;
  margin-bottom: 1.6rem;
}

/* H3 — 緑の縦棒をやめ、短い罫を上に置く */
.section-sub-heading {
  position: relative;
  margin: 3.7rem 0 1.35rem;
  padding: 1.15rem 0 0;
  border-left: 0;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .004em;
}
.section-sub-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 2px;
  background: var(--accent);
}
/* H2 直後の H3 は上の余白を詰める */
.section-heading + .section-sub-heading { margin-top: 2.2rem; }

/* --------------------------------------------------------------------------
   3. 図解（.ig-2026 = 案C リッチ志向）

   HTML 構造:
     <figure class="ig-2026" id="fig-…">
       <figcaption class="ig-2026-head">
         <span class="ig-2026-kicker"><span class="ig-2026-no">図 1</span>会社の輪郭</span>
         <h3 class="ig-2026-heading">LayerXが掲げている言葉</h3>
       </figcaption>
       <div class="ig-2026-body"> … </div>
       <p class="ig-2026-note"> … </p>
     </figure>
   -------------------------------------------------------------------------- */
.ig-2026 {
  margin: 4.25rem 0;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(26, 24, 20, .08);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 24, 20, .03);
}
.ig-2026-head {
  position: relative;
  padding: 1.7rem 2.25rem 1.5rem;
  background: linear-gradient(135deg, #35312b 0%, #1a1814 65%);
}
.ig-2026-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent) 0%, #a8c85a 45%, rgba(168, 200, 90, 0) 100%);
}
.ig-2026-kicker {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #a8c85a;
}
.ig-2026-no { margin-right: .85rem; color: #fff; letter-spacing: .08em; }
.ig-2026-heading {
  font-family: var(--display);
  font-size: 1.44rem;
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: .018em;
  color: #fff;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.ig-2026-body { padding: 2rem 2.25rem; }
.ig-2026-note {
  margin: 0 2.25rem 2rem;
  padding: 1rem 1.2rem;
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  font-size: 11.5px;
  line-height: 1.95;
  color: #46551f;
}

/* 図1 — 掲げている言葉。ラベルを上に出し、到達点だけ緑の面に */
.ig-2026-creed { display: flex; flex-direction: column; gap: .95rem; }
.ig-2026-creed-row {
  padding: 1.4rem 1.55rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(150deg, #fcfbf8 0%, #f1efe8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(26, 24, 20, .03);
}
.ig-2026-creed-label {
  margin-bottom: .6rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ig-2026-creed-text {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.008em;
  color: var(--ink);
}
.ig-2026-creed-row.is-goal {
  background: linear-gradient(150deg, #52760a 0%, #2f4400 100%);
  border-color: #2f4400;
}
.ig-2026-creed-row.is-goal .ig-2026-creed-label { color: #bcd987; }
.ig-2026-creed-row.is-goal .ig-2026-creed-text { color: #fff; }

/* 図2 — 比較表。濃色ヘッダ＋緑の丸ベタで「全部○」の圧を出す */
.ig-2026-table-wrap { overflow-x: auto; border-radius: 4px; border: 1px solid var(--rule); }
.ig-2026-table { width: 100%; min-width: 470px; border-collapse: collapse; }
.ig-2026-table th {
  padding: .95rem 1.1rem;
  background: #3a3630;
  color: rgba(255, 255, 255, .93);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}
.ig-2026-table th:first-child { text-align: left; }
.ig-2026-table td {
  padding: 1.05rem 1.1rem;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.ig-2026-table td:first-child {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 500;
}
.ig-2026-table tbody tr:nth-child(odd) td { background: #fbfaf7; }
.ig-2026-table tbody tr:last-child td { border-bottom: 0; }
.ig-2026-maru {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, #6d9410, var(--accent-dark));
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(61, 88, 0, .32);
}

/* 図3 — 表面 / 中身。右（中身）を濃い緑ベタにして主役を明示する */
.ig-2026-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: stretch; }
.ig-2026-vs-panel { padding: 1.75rem 1.65rem 1.9rem; border-radius: 5px; display: flex; flex-direction: column; }
.ig-2026-vs-panel.is-surface {
  background: linear-gradient(160deg, #f8f7f3, #eae8e1);
  border: 1px solid var(--rule);
}
.ig-2026-vs-panel.is-core {
  background: linear-gradient(160deg, #52760a 0%, #2c4000 100%);
  border: 1px solid #2c4000;
}
.ig-2026-vs-label {
  margin-bottom: .6rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ig-2026-vs-panel.is-core .ig-2026-vs-label { color: #bcd987; }
.ig-2026-vs-big {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  color: #7d776b;
  margin-bottom: .5rem;
}
.ig-2026-vs-panel.is-core .ig-2026-vs-big { color: #fff; }
.ig-2026-vs-sub { font-size: 12px; line-height: 1.75; color: var(--ink-muted); margin-bottom: 1.1rem; }
.ig-2026-vs-panel.is-core .ig-2026-vs-sub { color: rgba(255, 255, 255, .72); }
.ig-2026-vs-tag {
  align-self: flex-start;
  margin-bottom: 1.25rem;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  background: #ddd8cc;
  color: #6b6250;
}
.ig-2026-vs-panel.is-core .ig-2026-vs-tag { background: #a8c85a; color: #23330a; }
.ig-2026-vs-list { list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.ig-2026-vs-list li {
  position: relative;
  padding: .5rem 0 .5rem 1.3rem;
  font-size: .89rem;
  line-height: 1.7;
  color: var(--ink-soft);
  border-top: 1px solid rgba(26, 24, 20, .07);
}
.ig-2026-vs-list li:first-child { border-top: 0; }
.ig-2026-vs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.02em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b3ac9c;
}
.ig-2026-vs-panel.is-core .ig-2026-vs-list li { color: rgba(255, 255, 255, .92); border-top-color: rgba(255, 255, 255, .14); }
.ig-2026-vs-panel.is-core .ig-2026-vs-list li::before { background: #a8c85a; }

/* 図4 — 4段階。大きな番号を地紋に沈め、到達点だけ緑に寄せる */
.ig-2026-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.ig-2026-flow-card {
  position: relative;
  overflow: hidden;
  padding: 1.45rem 1.55rem 1.55rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(150deg, #fcfbf8, #f1efe8);
  box-shadow: inset 0 1px 0 #fff;
}
.ig-2026-flow-num {
  position: absolute;
  right: .85rem;
  top: -.15rem;
  font-family: var(--serif);
  font-size: 4.3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(26, 24, 20, .065);
  pointer-events: none;
}
.ig-2026-flow-title {
  position: relative;
  margin-bottom: .5rem;
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.ig-2026-flow-body { position: relative; font-size: 12.5px; line-height: 1.9; color: var(--ink-muted); }
.ig-2026-flow-card.is-goal {
  background: linear-gradient(150deg, #f5fce6, #e2f1bd);
  border-color: #b9d178;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.ig-2026-flow-card.is-goal .ig-2026-flow-num { color: rgba(61, 88, 0, .15); }
.ig-2026-flow-card.is-goal .ig-2026-flow-title { color: var(--accent-dark); }
.ig-2026-flow-card.is-goal .ig-2026-flow-body { color: #4b5a2e; }

/* 図5 — 絞り込み3点 / トライアル2点。丸ベタの番号とグループ帯 */
.ig-2026-group + .ig-2026-group { margin-top: 1.7rem; }
.ig-2026-band {
  display: inline-flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .95rem;
  padding: 7px 15px;
  border-radius: 3px;
  background: #3a3630;
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .03em;
}
.ig-2026-band-step { font-size: 10.5px; letter-spacing: .12em; opacity: .72; }
.ig-2026-band-count { font-size: 11px; opacity: .72; }
.ig-2026-group.is-trial .ig-2026-band {
  background: linear-gradient(135deg, #6d9410, var(--accent-dark));
  box-shadow: 0 2px 8px -2px rgba(61, 88, 0, .45);
}
.ig-2026-checks { display: flex; flex-direction: column; gap: .7rem; }
.ig-2026-check {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.15rem;
  align-items: center;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: linear-gradient(150deg, #fcfbf8, #f1efe8);
  box-shadow: inset 0 1px 0 #fff;
}
.ig-2026-check-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #928c80, #6a655b);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.26rem;
  line-height: 1;
  box-shadow: 0 3px 8px -2px rgba(26, 24, 20, .35);
}
.ig-2026-check-title {
  margin-bottom: .2rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.ig-2026-check-sub { font-size: 12.5px; line-height: 1.7; color: var(--ink-muted); }
.ig-2026-group.is-trial .ig-2026-check {
  background: linear-gradient(150deg, #f5fce6, #e4f2c2);
  border-color: #b9d178;
}
.ig-2026-group.is-trial .ig-2026-check-num {
  background: linear-gradient(140deg, #6d9410, var(--accent-dark));
  box-shadow: 0 3px 8px -2px rgba(61, 88, 0, .45);
}
.ig-2026-group.is-trial .ig-2026-check-title { color: var(--accent-dark); }
.ig-2026-group.is-trial .ig-2026-check-sub { color: #4b5a2e; }

/* 図6 — 3段階。塗りの濃さで進行を出し、その先だけ濃い緑ベタ */
.ig-2026-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ig-2026-track-step {
  position: relative;
  padding: 1.45rem 1.4rem 1.55rem;
  border-radius: 5px;
}
.ig-2026-track-step:nth-child(1) { background: linear-gradient(160deg, #f8f7f3, #eceae3); border: 1px solid var(--rule); }
.ig-2026-track-step:nth-child(2) { background: linear-gradient(160deg, #f5fce6, #e4f2c2); border: 1px solid #cfe08f; }
.ig-2026-track-step:nth-child(3) {
  background: linear-gradient(160deg, #52760a, #2c4000);
  border: 1px solid #2c4000;
}
.ig-2026-track-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -.72rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #b3ac9c;
  border-right: 1.5px solid #b3ac9c;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
.ig-2026-track-phase {
  display: inline-block;
  margin-bottom: .7rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ig-2026-track-step:nth-child(2) .ig-2026-track-phase { color: var(--accent-dark); }
.ig-2026-track-step:nth-child(3) .ig-2026-track-phase { color: #bcd987; }
.ig-2026-track-title {
  margin-bottom: .6rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.ig-2026-track-body { font-size: 12.5px; line-height: 1.9; color: var(--ink-muted); }
.ig-2026-track-step:nth-child(3) .ig-2026-track-title { color: #fff; }
.ig-2026-track-step:nth-child(3) .ig-2026-track-body { color: rgba(255, 255, 255, .8); }

/* --------------------------------------------------------------------------
   4. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .section-heading { font-size: 1.58rem; padding-bottom: .8rem; margin-bottom: 1.8rem; }
  .section-sub-heading { font-size: 1.18rem; margin-top: 2.8rem; padding-top: 1rem; }
  .ig-2026 { margin: 3rem 0; border-radius: 4px; }
  .ig-2026-head { padding: 1.35rem 1.35rem 1.2rem; }
  .ig-2026-heading { font-size: 1.2rem; }
  .ig-2026-body { padding: 1.5rem 1.35rem; }
  .ig-2026-note { margin: 0 1.35rem 1.5rem; }
  .ig-2026-creed-text { font-size: 1.24rem; }
  .ig-2026-vs { grid-template-columns: 1fr; gap: 1rem; }
  .ig-2026-vs-big { font-size: 2.5rem; }
  .ig-2026-flow { grid-template-columns: 1fr; }
  .ig-2026-track { grid-template-columns: 1fr; gap: 1.5rem; }
  .ig-2026-track-step:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.1rem;
    transform: translateX(-50%) rotate(135deg);
  }
  .ig-2026-check { grid-template-columns: 38px 1fr; gap: .9rem; padding: .95rem 1rem; }
  .ig-2026-check-num { width: 38px; height: 38px; font-size: 1.1rem; }
}