@charset "UTF-8";
/**
 * css/creator-pc/creator_pc_visual.css - クリエイターPC の図解アイコンと挿絵
 * 部品のチップ・優先順位のはしご・作業の流れ・ストレージの分け方・表の見出しに付けるアイコンと、
 * 見出しの横に置く挿絵（.cp-section__head--illust / .cp-illust）
 * 図解の本体は creator_pc_diagram.css、土台（トークン・テーマ色）は creator_pc_base.css
 *
 * @changelog
 *   2026-11-13  AI(Cursor)  初版作成
 */

/* ===== 部品のチップ ===== */
.cp-chip .cp-icon {
  width: 18px;
  height: 18px;
  margin: 0 5px 0 -4px;
  color: var(--cp-accent-ink);
  stroke-width: 2;
}

/* ===== 作業の流れ：番号とアイコンを 1 行に ===== */
.cp-flow__step:has(.cp-flow__icon)::before {
  content: none;
}

.cp-flow__icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--cp-accent-ink);
}

.cp-flow__icon .cp-icon {
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cp-accent-soft), color-mix(in srgb, var(--cp-accent-2) 14%, #fff));
}

.cp-flow__icon::after {
  content: counter(cp-flow, decimal-leading-zero);
  font-family: var(--cp-font-latin);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .1em;
}

.cp-flow__step:has(.cp-flow__icon):not(:last-child)::after {
  top: 48px;
}

.cp-page .cp-flow__icon + .cp-flow__title {
  margin-top: 4px;
}

/* ===== 優先順位のはしご：部品名の左にアイコン ===== */
@media (min-width: 901px) {
  .cp-ladder__item:has(.cp-ladder__icon) {
    grid-template-columns: 64px minmax(0, 16em) minmax(0, 1fr);
  }
}

.cp-ladder__part:has(.cp-ladder__icon) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.cp-ladder__icon {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--cp-accent-ink);
  background: var(--cp-accent-soft);
}

.cp-ladder__item:nth-child(1) .cp-ladder__icon {
  color: #fff;
  background: var(--cp-accent-ink);
}

/* ===== ストレージの分け方・同時に動くもの ===== */
.cp-stack__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  color: color-mix(in srgb, var(--s, var(--cp-accent)) 75%, #000);
  background: color-mix(in srgb, var(--s, var(--cp-accent)) 14%, #fff);
}

/* ===== 比較カード ===== */
.cp-compare__icon {
  display: grid;
  align-self: flex-start;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 14px;
  color: var(--cp-accent-ink);
  background: linear-gradient(135deg, var(--cp-accent-soft), color-mix(in srgb, var(--cp-accent-2) 14%, #fff));
}

.cp-compare__icon .cp-icon {
  width: 28px;
  height: 28px;
}

.cp-compare__col--accent .cp-compare__icon {
  color: #fff;
  background: linear-gradient(135deg, var(--cp-accent-ink), var(--cp-accent));
}

/* ===== 表の見出し ===== */
.cp-th-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-th-icon .cp-icon {
  width: 18px;
  height: 18px;
  color: var(--cp-accent-ink);
}

/* ===== 挿絵 ===== */
.cp-section__head--illust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: 24px 56px;
  max-width: none;
}

.cp-section__head--illust .cp-section__head-text {
  max-width: 760px;
}

.cp-illust {
  margin: 0;
  overflow: clip;
  border-radius: var(--cp-radius);
  background: var(--cp-accent-soft);
  box-shadow: 0 18px 40px -28px rgba(22, 24, 29, .45);
}

.cp-illust img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cp-about__grid > .cp-illust {
  align-self: center;
}

@media (min-width: 901px) {
  .cp-about__grid:has(> .cp-illust) {
    row-gap: 40px;
  }

  .cp-about__grid > .cp-about__points {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cp-section__head--illust {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp-section__head--illust .cp-illust {
    max-width: 440px;
  }
}

@media (max-width: 680px) {
  .cp-flow__icon .cp-icon {
    width: 24px;
    height: 24px;
    padding: 10px;
  }
}