/* product-rebuild.html 専用CSS。
   デザインシステム(style.css)に該当コンポーネントが無いため、このページだけで使う想定で追加。 */

/* interview: CASE(七四六家)のQ&A。カードで囲むとメリハリが失われるため、フォントの強弱だけで
   Q(紺・太字・丸バッジ)とA(グレー・通常)を分ける構成にした(2026-09-01)。 */
.interview {
  display: grid;
  gap: var(--space-12);
  max-width: 760px;
}

.interview__item {
  display: grid;
  gap: var(--space-3);
}

.interview__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-brand-700);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.interview__q-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-700);
  color: var(--color-surface);
  font-family: var(--font-wordmark);
  font-size: var(--text-sm);
  font-weight: 700;
}

.interview__a {
  margin: 0;
  padding-left: calc(28px + var(--space-3));
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.interview__item.reveal:nth-child(1) {
  transition-delay: 0s;
}

.interview__item.reveal:nth-child(2) {
  transition-delay: .06s;
}

.interview__item.reveal:nth-child(3) {
  transition-delay: .12s;
}

.interview__item.reveal:nth-child(4) {
  transition-delay: .18s;
}

.interview__item.reveal:nth-child(5) {
  transition-delay: .24s;
}

.interview__item.reveal:nth-child(6) {
  transition-delay: .3s;
}

/* stat-grid / stat-card: 「数値で見る七四六家」をビジュアルで見せる用(2026-09-01追加)。
   リンクではないため.cardのホバー演出は付けない。 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.stat-card {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.stat-card__label {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.stat-card__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-wordmark);
}

.stat-card__before {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: 700;
}

.stat-card__arrow {
  color: var(--color-accent);
  font-size: var(--text-lg);
}

.stat-card__after {
  color: var(--color-brand-700);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
}

.stat-card__note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.stat-card.reveal:nth-child(1) {
  transition-delay: 0s;
}

.stat-card.reveal:nth-child(2) {
  transition-delay: .08s;
}

.stat-card.reveal:nth-child(3) {
  transition-delay: .16s;
}

/* link-book-row: 関連リンクと書籍を横並びにして右側の余白を埋める(2026-09-01、
   縦積みだと書籍カードの右に余白が目立つという指摘への対応)。 */
.link-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* link-list: 関連リンク(SNS・連絡窓口)の単純なリスト。アイコン(プラットフォーム識別用)+
   .text-linkの2パーツ構成(2026-09-06、末尾の矢印スライド演出は.text-linkの下線ホバーに統一
   したため廃止)。 */
.link-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.link-list__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-050);
  color: var(--color-brand-700);
}

.link-list__icon svg {
  width: 18px;
  height: 18px;
}

.link-list__link:hover {
  color: var(--color-accent);
}

.link-list__link:hover .link-list__icon {
  color: var(--color-accent);
}

.link-list__link:hover .text-link::after,
.link-list__link:focus-visible .text-link::after {
  transform: scaleX(1);
}

.link-list__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* book-promo: 書籍のアピールエリア。書影は横並びのサムネイル(book-promo__cover)。
   ./images/nanashiroke-book-cover.jpg が届けば自動表示、無ければonerrorでimgを削除して
   プレースホルダーのアイコン+キャプションを表示。 */
.book-promo {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.book-promo__cover {
  position: relative;
  flex: none;
  width: 120px;
  height: auto;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
}

.book-promo__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.book-promo__cover-icon {
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}

.book-promo__cover-caption {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.book-promo__body {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.book-promo__body .badge {
  justify-self: start;
}

.book-promo__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.book-promo__title {
  margin: 0 0 var(--space-2);
  color: var(--color-brand-700);
  font-size: var(--text-lg);
  font-weight: 700;
}

.book-promo__body .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

/* cta-band__link: 末尾CTA帯に添える関連ページへの小さな一言リンク(2026-09-06、CTAの外に
   はみ出た独立リストだった.cta-linksを廃止し、CTA帯の中に統合。重複していた「七四六家を見る」
   「再建事例を見る」(いずれも本ページ内の情報と重複)は削除し、他ページへの導線として価値のある
   「関連するアプリ開発実績を見る」だけを残した)。紺背景の中で使うため.icon-arrowは使わず
   (紺塗り/紺線のどちらも紺背景では視認できないため)、.text-linkのみを使う。 */
.cta-band__link {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

@media (max-width: 800px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .interview__a {
    padding-left: 0;
  }

  .link-book-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* 再建の流れ: 7ステップは横一列だとラベルが長く(最大19文字)、狭い画面では
     1列に潰れて縦に長く読みにくくなるため、このページだけ2列に折り返す
     (2026-09-01)。線つなぎ(::before)は横一列前提の演出なので、折り返し時は非表示にする。 */
  .process__track .stepper {
    flex-wrap: wrap;
    row-gap: var(--space-8);
  }

  .process__track .stepper__step {
    flex: 0 0 50%;
  }

  .process__track .stepper__step:not(:first-child)::before {
    display: none;
  }
}