/* =========================================================
   起業の経営学 第1版: トップページ（type top のページだけで読み込む）
   A案「道しるべ」。ファーストビューは抽象的な背景（紺に、からし色の道すじ）
   持ち主: デザイナー1
   ========================================================= */

/* ---------- 2. ファーストビュー ----------
   - スマートフォンとタブレット: 文字は濃い紺の地の上。その下に背景の絵（道すじ）を見せる
   - PC（1200px から）: 絵を全面に敷き、文字は左の濃い紺の部分に載せる
   - 絵は assets/img/hero-abstract.svg（02_designer/tools/hero_abstract_svg.py で生成）。左側は --hero-base と同じ色 */

.top-hero {
  --hero-base: var(--color-navy-dark);
  --art-h: clamp(220px, 66vw, 340px); /* 文字の下に見せる絵の高さ */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 36px calc(var(--art-h) - 16px);
  background: var(--hero-base);
}

.hero-abstract__art {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--art-h);
  background: url("../img/hero-abstract.svg") right bottom / auto 100% no-repeat;
}

/* 絵の上端を、文字の下の地へなじませる */
.hero-abstract__art::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  background: linear-gradient(180deg, var(--hero-base), rgba(0, 32, 78, 0));
}

.top-hero__text {
  max-width: 640px;
}

/* 濃い紺の地の小さな見出しと線は、明るい青緑（4.60:1） */
.top-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--color-teal-light);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.top-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 32px;
  height: var(--stroke-mark);
  border-radius: 999px;
  background: var(--color-teal-light);
}

.top-hero__title {
  margin-bottom: 20px;
  color: var(--color-white);
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.top-hero__lead {
  max-width: 34em;
  margin-bottom: 28px;
  color: #e6edf6;
  font-size: 1rem;
  line-height: 1.95;
  word-break: auto-phrase;
}

.top-hero__actions {
  display: grid;
  gap: 12px;
}

/* 濃い紺の地のボタン: 主は青緑の面に白の文字、副は白い線。
   青緑の面は濃い紺の地との差が小さい（3.20:1）ので、主の縁を明るい青緑にし、副の線を少し抑えて、主が先に目に入るようにする */
.top-hero .button--primary {
  border-color: var(--color-teal-light);
  background: var(--color-teal);
  color: var(--color-white);
}

.top-hero .button--primary:hover {
  background: var(--color-teal-dark);
}

.top-hero .button--secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--color-white);
}

.top-hero .button--secondary:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.12);
}

.top-hero :focus-visible {
  outline-color: var(--color-white);
}

@media (min-width: 640px) {
  .top-hero__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
  }

  .top-hero__lead {
    font-size: 1.0625rem;
  }

  .top-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  /* タブレット: 文字の右があくので、絵を文字の横まで上げる（道すじは文字の右下に来る） */
  .hero-abstract__art {
    height: calc(var(--art-h) + 170px);
  }
}

@media (min-width: 1200px) {
  .top-hero {
    display: grid;
    align-items: center;
    min-height: 600px;
    padding-block: 80px 144px;
  }

  .hero-abstract__art {
    top: 0;
    height: auto;
    background-position: right center;
    background-size: cover;
  }

  .hero-abstract__art::before {
    display: none;
  }

  .top-hero__text {
    max-width: 560px;
  }
}

/* ---------- 4-4 流れ図: 3つの柱の道すじ（ファーストビューの下端に重ねた帯） ---------- */

.route-bar-wrap {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

.route-bar {
  display: grid;
  gap: 14px;
  padding: 18px 14px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  box-shadow: 0 1px 0 rgba(0, 32, 78, 0.04), 0 16px 32px -20px rgba(0, 32, 78, 0.45);
}

.route-bar__label {
  justify-self: start;
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.route-bar__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.route-bar__stops::before {
  content: "";
  position: absolute;
  top: calc(20px - var(--stroke-route) / 2);
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: var(--stroke-route);
  border-radius: 999px;
  background: var(--color-mustard);
}

.route-bar__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.route-bar__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--color-navy);
  box-shadow: 0 0 0 4px var(--color-white);
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.route-bar__name {
  color: var(--color-navy-dark);
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: none;
}

.route-bar__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 柱の名前: 狭い画面では短い名前（読み上げも見えているほうだけ） */
.route-bar__long {
  display: none;
}

.route-bar__q {
  color: var(--color-text-light);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0;
  word-break: auto-phrase;
}

.route-bar__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--color-line) 0 2px, transparent 2px 4px) border-box left top / 100% 1px no-repeat;
  color: var(--color-text-light);
  font-size: 0.8125rem;
  line-height: 1.6;
  word-break: auto-phrase;
}

.route-bar__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1200px) {
  .route-bar__long {
    display: inline;
  }

  .route-bar__short {
    display: none;
  }
}

@media (min-width: 960px) {
  .route-bar-wrap {
    margin-top: -72px;
  }

  .route-bar {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 240px);
    align-items: center;
    gap: 32px;
    padding: 24px 32px;
  }

  .route-bar__label {
    align-self: start;
    margin-top: 10px;
  }

  .route-bar__stops::before {
    top: calc(24px - var(--stroke-route) / 2);
  }

  .route-bar__marker {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .route-bar__name {
    font-size: 1rem;
  }

  .route-bar__q {
    font-size: 0.8125rem;
  }

  .route-bar__caption {
    justify-content: flex-start;
    padding: 0 0 0 24px;
    border-top: 0;
    border-left: 1px solid transparent;
    background: repeating-linear-gradient(180deg, var(--color-line) 0 2px, transparent 2px 4px) border-box left top / 1px 100% no-repeat;
    text-align: left;
  }
}

/* ---------- 3. 問いかけ ---------- */

.top-why {
  padding-block: var(--section-space);
}

.top-why__inner {
  max-width: calc(820px + var(--gutter) * 2);
}

.top-why__body {
  margin-block: 16px 28px;
  font-size: 1.0625rem;
}

/* 2-5 表（比べる表）: 大手の戦い方と、小さな会社の戦い方 */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.compare-table th {
  padding: 0 12px 10px 0;
  /* 見出しの下の線も、行の区切りと同じ薄い 1px（REQ-023。定義リストとそろえた。見出しは小さな灰の文字で区別できる） */
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-light);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-align: left;
}

.compare-table td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.6;
  vertical-align: middle;
}

.compare-table td:first-child {
  width: 40%;
  color: var(--color-text-light);
}

.compare-table td:last-child {
  color: var(--color-navy-dark);
  font-weight: 700;
}

.compare-table__num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.75rem;
  vertical-align: 1px;
}

@media (min-width: 640px) {
  .compare-table {
    font-size: 1rem;
  }
}

/* ---------- 4. 3つの柱 ---------- */

.top-pillars {
  padding-block: var(--section-space);
  background: var(--color-navy-faint);
}

.top-pillars__lead {
  max-width: 40em;
  margin-top: 14px;
}

.pillar-route {
  position: relative;
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* スマートフォン: 縦の道。柱から次の柱へ、からし色の線でつなぐ */
.pillar:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -20px;
  left: calc(22px - var(--stroke-route) / 2);
  width: var(--stroke-route);
  background: var(--color-mustard);
}

.pillar__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  box-shadow: 0 0 0 5px var(--color-navy-faint);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.pillar__body {
  padding: 20px 20px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.pillar__name {
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.35;
}

.pillar__q {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--color-navy-tint);
  color: var(--color-navy);
  font-size: 0.875rem;
  font-weight: 700;
}

.pillar__desc {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.85;
}

.pillar__topics {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid transparent;
  background: repeating-linear-gradient(90deg, var(--color-line) 0 2px, transparent 2px 4px) border-box left top / 100% 1px no-repeat;
  font-size: 0.875rem;
}

.pillar__topics li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.pillar__topics li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-teal);
  border-radius: 50%;
}

.pillar__topics a {
  color: var(--color-navy-dark);
  text-decoration-color: rgba(52, 88, 135, 0.4);
  text-underline-offset: 0.25em;
}

.pillar__topics a:hover {
  text-decoration-color: currentColor;
}

.pillar__link {
  display: inline-block;
  margin-top: 18px;
  color: var(--color-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-button);
  text-underline-offset: 0.4em;
}

.pillar__link::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--arrow-duration) ease-out;
}

.pillar-loop {
  margin-top: 20px;
}

.pillar-loop__line {
  display: none;
}

.pillar-loop__text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 760px;
  margin-inline: auto;
  position: relative;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: var(--color-white);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.pillar-loop__text::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--color-navy);
  pointer-events: none;
  -webkit-mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
  mask: var(--dash-frame) 0 0 / 100% 100% no-repeat;
}

.pillar-loop__text strong {
  color: var(--color-navy-dark);
}

.pillar-loop__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 960px) {
  .pillar-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 56px;
  }

  /* PC: 横の道。3つの印を1本のからし色の線でつなぐ */
  .pillar-route::before {
    content: "";
    position: absolute;
    top: calc(28px - var(--stroke-route) / 2);
    left: calc((100% - 56px) / 6);
    right: calc((100% - 56px) / 6);
    height: var(--stroke-route);
    border-radius: 999px;
    background: var(--color-mustard);
  }

  .pillar:not(:last-child)::before {
    display: none;
  }

  .pillar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-items: stretch;
    gap: 20px;
  }

  .pillar__marker {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .pillar__body {
    width: 100%;
    padding: 24px 24px 26px;
  }

  .pillar-loop {
    margin-top: 0;
  }

  .pillar-loop__line {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .pillar-loop__path {
    fill: none;
    stroke: var(--color-navy);
    stroke-width: var(--stroke-route);
    vector-effect: non-scaling-stroke; /* 実線（2026-10-17 ユーザーの指摘。REQ-017） */
    stroke-linecap: round;
  }

  .pillar-loop__arrowhead {
    fill: var(--color-navy);
  }

  /* 矢印が実線になったので、枠の上の線と重ならないように、矢印の下にすき間をあける（REQ-017） */
  .pillar-loop__text {
    margin-top: 4px;
  }
}

/* ---------- 5. あなたの段階から始める ---------- */

.top-stages {
  padding-block: var(--section-space);
}

.stage-list {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.stage-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--color-gray-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

.stage-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-card__title {
  font-size: 1.25rem;
  font-weight: 900;
}

.stage-card__desc {
  margin-top: 4px;
  color: var(--color-text-light);
  font-size: 0.9375rem;
}

.stage-card__route {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block: 14px 16px;
}

.dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

/* 印と印のあいだの、からし色の線（印が並ぶときだけ） */
.dot + .dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 3px);
  width: 12px;
  height: var(--stroke-route);
  margin-top: calc(var(--stroke-route) / -2);
  border-radius: 999px;
  background: var(--color-mustard);
}

/* 改善の輪: 白い丸に紺の矢印 */
.dot--loop {
  border: 2px solid var(--color-navy);
  background: var(--color-white);
}

.dot--loop svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-card__links {
  display: grid;
  margin-top: auto;
  border-top: 1px solid var(--color-line);
}

.stage-card__links a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-navy-dark);
  font-weight: 700;
  text-decoration: none;
}

.stage-card__links a:hover .stage-card__link-name {
  text-decoration: underline;
  text-decoration-thickness: var(--stroke-button);
  text-underline-offset: 0.3em;
}

.stage-card__links li:last-child a {
  border-bottom: 0;
}

.stage-card__links a::after {
  content: "→";
  display: inline-block;
  align-self: center;
  color: var(--color-navy);
  transition: transform var(--arrow-duration) ease-out;
}

/* 「→」の動き（site.css の 8-2 と同じ値） */
@media (prefers-reduced-motion: no-preference) {
  .pillar__link:is(:hover, :focus-visible)::after,
  .stage-card__links a:is(:hover, :focus-visible)::after {
    transform: translateX(var(--arrow-shift));
  }
}

/* リンクの名前と、違いがわかる短い補足 */
.stage-card__link-body {
  display: grid;
  gap: 1px;
}

/* 長い記事名は、文節で折り返し、2行の長さをそろえる（「…質問を／作る」のように1語だけ残らないように。REQ-034） */
.stage-card__link-name {
  word-break: auto-phrase;
  text-wrap: balance;
}

.stage-card__link-note {
  color: var(--color-text-light);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .stage-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
  }

  /* 3枚の行（絵、題名、説明、柱の印、リンク）の高さをそろえる */
  @supports (grid-template-rows: subgrid) {
    .stage-list {
      grid-template-rows: repeat(5, auto);
      row-gap: 0;
    }

    .stage-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-content: start;
    }

    .stage-card__links {
      margin-top: 0;
    }
  }
}

/* ---------- 6. 講座 / 7. 新着記事 / 8. 書いている人 ---------- */

.top-courses {
  padding-block: var(--section-space);
  background: var(--color-gray-bg);
}

.top-courses__lead {
  margin-top: 10px;
  color: var(--color-text-light);
  word-break: auto-phrase;
}

.top-articles {
  padding-block: var(--section-space);
}

/* スマートフォンでは、新着記事を4件にする */
@media (max-width: 639.98px) {
  .top-articles .card-list > :nth-child(n + 5) {
    display: none;
  }
}

.top-author {
  padding-block: var(--section-space);
  background: var(--color-navy-faint);
}

.top-author .heading {
  margin-bottom: 24px;
}

.top-author .author-card {
  max-width: 820px;
}