/* ペルコモの全体図（public/js/service-map.js）と、帯の「いまここ」（public/js/band.js の band-where・band-next）。
 * 色は紺・金・灰だけ。丸い札は使わず、番号は明朝の数字。矢印は飾り（読み上げに出さない）。 */

/* ── 全体図 ── */
.smap {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-6);
}
/* 章の見出しは、ほかの章（doc.css の .doc h2）と同じ形：明朝800・紺、左に金の細い縦線 */
.smap > h2 {
  margin: 0 0 var(--space-6);
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-mincho);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--brand-12);
}
.smap-flows {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.smap-flow {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--brand-12);
}
.smap-arrow {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-mark);
}
.smap-arrow::before {
  content: '→' / '';
}
.smap-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
html[data-top='new'] .smap-head h3 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--brand-12);
}
.smap-tier {
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-quiet);
  white-space: nowrap;
}
.smap-line {
  margin: var(--space-2) 0 var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.smap-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.smap-steps li {
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}
.smap-n {
  flex: none;
  width: 1.5rem;
  font-family: var(--font-mincho);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-mark);
}
.smap-step-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--brand-12);
}
.smap-step-line {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-quiet);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.smap-parts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.smap-parts li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
}
/* 三つの達人の行：名前の下に、参考にした手法の札 */
.smap-parts li.smap-master {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
}
.smap-master-name {
  font-weight: 600;
}
.smap-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.smap-method {
  padding: 1px var(--space-2);
  font-size: var(--fs-note, 0.8125rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--brand-12);
  background: var(--brand-2);
  border: 1px solid var(--brand-4);
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .smap-flows {
    grid-template-columns: minmax(0, 1fr);
  }
  .smap-gap {
    height: var(--space-7);
  }
  .smap-arrow {
    justify-content: flex-start;
    padding: var(--space-4) 0;
  }
  .smap-arrow::before {
    content: '↓' / '';
  }
}
@media (max-width: 560px) {
  .smap {
    padding-top: var(--space-7);
  }
  .smap > h2 {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
  }
  .smap-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* ── 帯の道（public/js/road.js）：話し方を学ぶ・100人に聴くの帯は道の全体を小さく、企画を磨くの帯は6段の右に「このあと」 ── */
html[data-top='new'] .band-where {
  flex: none;
  margin: 0;
  padding: 0;
}
html[data-top='new'] .band-where ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-top='new'] .band-where .road-after ol {
  gap: 0;
}
html[data-top='new'] .band-where .road-after li + li {
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid #3b4a6b;
}
html[data-top='new'] .band-where .road-go::before {
  content: '→' / '';
  font-size: 0.875rem;
  color: #8e98ad;
}
/* 道の中の機能の名前。押せるもの（既存の .band-step の例外の中）は薄い字に下線、いまの機能は金の太字 */
html[data-top='new'] .road-feat {
  display: inline-block;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-align: left;
  color: #c9d0dc;
}
html[data-top='new'] button.road-feat {
  text-decoration: underline;
  text-decoration-color: #3b4a6b;
  text-underline-offset: 4px;
  cursor: pointer;
}
html[data-top='new'] button.road-feat:hover {
  color: #fff;
}
html[data-top='new'] .road-feat.now {
  font-weight: 700;
  color: var(--gold);
  box-shadow: 0 2px 0 var(--gold);
}
@media (max-width: 900px) {
  html[data-top='new'] .page-band-in.with-where {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }
  html[data-top='new'] .page-band-in.with-where .band-where {
    flex-basis: 100%;
  }
  /* 狭い画面では、押す場所は指の下限の高さ（帯を高くしないよう、上下の余白を帯の外へはみ出させる） */
  html[data-top='new'] button.road-feat {
    min-height: var(--tap);
    margin: calc((var(--tap) - 22px) / -2) 0;
    display: inline-flex;
    align-items: center;
  }
  html[data-top='new'] .road-feat.now {
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 4px;
  }
}

html[data-top='new'] .band-next {
  display: none;
}
@media (min-width: 1100px) {
  html[data-top='new'] .band-next {
    display: flex;
    align-items: center;
    flex: none;
    gap: var(--space-4);
    margin-left: var(--space-5);
    padding-left: var(--space-5);
    border-left: 1px solid #3b4a6b;
  }
  html[data-top='new'] .page-band-in:has(.band-next) .band-road {
    margin-left: auto;
  }
  html[data-top='new'] .band-next-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #c9d0dc;
    white-space: nowrap;
  }
  html[data-top='new'] .band-next-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0 0 0 var(--space-4);
    list-style: none;
    border-left: 1px solid #3b4a6b;
  }
  html[data-top='new'] .band-next-list li {
    position: relative;
  }
  html[data-top='new'] .band-next-list li::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-4));
    top: 50%;
    width: var(--space-3);
    border-top: 1px solid #3b4a6b;
  }
  html[data-top='new'] .band-next button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }
  html[data-top='new'] .band-next.strong .band-next-label {
    color: var(--gold);
  }
  html[data-top='new'] .band-next.strong button.road-feat {
    color: var(--gold);
    font-weight: 700;
    text-decoration-color: var(--gold);
  }
}
.smap-audience {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-quiet);
  word-break: auto-phrase;
  text-wrap: balance;
}
.smap-audience + .smap-line {
  margin-top: var(--space-4);
}
.smap-audience .nowrap {
  white-space: nowrap;
}

/* ── トップの短い版：6段は名前を横に並べるだけ。トップの終わりのボタン ── */
.smap.is-short .smap-line { margin-bottom: var(--space-4); }
.smap-names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.smap-names li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--brand-12);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .smap-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .smap-names li { font-size: 0.8125rem; }
}
.top-end {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

/* トップの短い版：三つの列は同じ形（手法の札の見出し＋札）。列の下に、企画を磨くの6つのステップを番号つきの一列で */
.smap.is-short .smap-methods-label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-note, 0.8125rem);
  color: var(--text-quiet);
}
.smap.is-short .smap-methods-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.smap-road-wrap {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-soft);
}
/* 道（public/js/road.js）：企画を磨く（6つのステップ）｜分かれる線｜このあと（話し方を学ぶ・100人に聴く） */
.road-big {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 13rem;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: var(--space-5);
}
.road-title {
  /* 「ペルコモでできること」（.smap > h2）と同じタイトルのデザイン：金の縦線・明朝・太字 */
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-mincho);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--brand-12);
}
.road-title-main { grid-column: 1; grid-row: 1; }
.road-title-after { grid-column: 3; grid-row: 1; }
.road-steps {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.road-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-quiet);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
.road-n {
  font-family: var(--font-mincho);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-hover, var(--gold));
}
.road-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  word-break: auto-phrase;
  text-wrap: balance;
}
.road-line {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-quiet);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.road-fork {
  grid-column: 2;
  grid-row: 2;
  display: block;
}
.road-fork svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: var(--brand-12);
  stroke-width: 1.5;
}
.road-feats {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.road-feats li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-quiet);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
}
/* 矢じりは、線の終わり（飾り） */
.road-feats li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left: 7px solid var(--brand-12);
  border-right: 0;
}
.road-feat-name {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--brand-12);
  white-space: nowrap;
}
.road-feat-tier {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-quiet);
}
@media (max-width: 1100px) {
  .road-big { grid-template-columns: minmax(0, 1fr) 2rem 11.5rem; }
  .road-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .road-big { grid-template-columns: minmax(0, 1fr); }
  .road-title-main, .road-steps, .road-fork, .road-title-after, .road-feats { grid-column: 1; }
  .road-title-main { grid-row: 1; }
  .road-steps { grid-row: 2; }
  .road-fork { grid-row: 3; height: 1.75rem; }
  .road-fork svg { display: none; }
  .road-fork::before { content: '↓' / ''; display: block; text-align: center; line-height: 1.75rem; color: var(--brand-12); }
  .road-title-after { grid-row: 4; }
  .road-feats { grid-row: 5; flex-direction: row; }
  .road-feats li { flex: 1 1 0; padding: var(--space-3); }
  .road-feats li::before { display: none; }
  .road-feat-name { font-size: 1rem; }
}

/* 短い版：三つの列は同じ幅 */
.smap.is-short .smap-flows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-6);
}
.smap.is-short .smap-arrow,
.smap.is-short .smap-gap {
  display: none;
}
/* 狭い画面では、短い版も一列（三つの列を並べると、名前も文も1文字ずつ折れた） */
@media (max-width: 900px) {
  .smap.is-short .smap-flows {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) 0;
  }
}
@media (max-width: 560px) {
  .road-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .road-title {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
  }
}