/* ─── Google Fonts ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@300;400;700&family=Outfit:wght@400;500;600;700&display=swap');

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --primary: #388cc8;
  --primary-light: #EEF2FF;
  --primary-dark: #000;
  --accent: #F59E0B;
  --accent-light: #FEF3C7;
  --fg: #000;
  --muted: #78716C;
  --muted-bg: #F5F5F4;
  --border: #E7E5E4;
  --bg: #FAFAF9;
  --white: #FFFFFF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-primary: 0 4px 16px rgba(59,91,219,0.22);
}

body {
  margin: 0;
  font-family: "Zen Old Mincho", sans-serif;
  font-weight: 400;
  font-style: normal;

  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }
a { color: inherit; }

/* ─── Site Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,249,0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.logo-link:hover { opacity: 0.7; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text__main { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--primary); }
.logo-text__sub  { font-size: 9px; color: var(--muted); letter-spacing: 0.15em; margin-top: 2px; }

/* ─── Step Indicator Bar ─────────────────────────────────────────────────────── */
.step-bar { background: var(--white); border-bottom: 1px solid var(--border); }
.step-bar__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
}
.step-item { display: flex; align-items: center; }
.step-item--flex { flex: 1; }
.step-item-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.step-circle-wrap { position: relative; }
.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: var(--muted-bg); color: var(--muted);
  transition: all 0.25s;
}
.step-circle--active       { background: var(--primary); color: white; box-shadow: 0 0 0 4px rgba(59,91,219,0.15); }
.step-circle--active-yellow { background: #F59E0B; color: white; box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }
.step-circle--done         { background: rgba(59,91,219,0.12); color: var(--primary); }
.step-circle--done-yellow  { background: #FEF3C7; color: #B45309; }
.step-check {
  position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: var(--primary); border-radius: 50%;
  color: white; font-size: 8px;
  display: flex; align-items: center; justify-content: center;
}
.step-check--yellow { background: #F59E0B; }
.step-label { font-size: 10px; color: var(--muted); text-align: center; width: 50px; line-height: 1.3; }
.step-label--active       { color: var(--primary); font-weight: 600; }
.step-label--active-yellow { color: #B45309; font-weight: 600; }
.step-label--done         { color: rgba(59,91,219,0.6); }
.step-connector { flex: 1; height: 1px; background: var(--border); margin: 0 4px; margin-bottom: 20px; transition: background 0.4s; }
.step-connector--done { background: var(--primary); }

/* ─── Step Main Content ──────────────────────────────────────────────────────── */
.step-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 120px;
}

/* ─── Step Header ────────────────────────────────────────────────────────────── */
.step-header { margin-bottom: 24px; }
.step-header__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary);
}
.step-header__label--yellow { color: #B45309; }
.step-header__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px; font-weight: 300;
  color: var(--fg);
  margin: 4px 0 12px;
}
.step-header__desc {
  font-size: 12px; color: var(--muted);
  background: rgba(245,245,244,0.7);
  border-radius: var(--radius-md);
  padding: 12px 16px; line-height: 1.75;
}
.step-header__desc--yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.step-header__divider { height: 1px; background: var(--border); margin-top: 16px; }

/* ─── Section Group Heading ──────────────────────────────────────────────────── */
.section-heading {
  font-size: 13px; font-weight: 600; color: var(--fg);
  padding-left: 12px; border-left: 2px solid var(--primary);
  margin: 0 0 16px;
}

/* ─── Form Fields ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.field-optional {
  font-size: 10px; color: var(--muted);
  background: var(--muted-bg); padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.field-caption { font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.6; }
.field-input, .field-textarea {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; color: var(--fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus, .field-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,91,219,0.10);
}
.field-input::placeholder, .field-textarea::placeholder { color: #A8A29E; font-size: 12px; }
.field-textarea { resize: vertical; min-height: 76px; line-height: 1.65; }

.field-section { margin-bottom: 28px; }

/* ─── Accordion ──────────────────────────────────────────────────────────────── */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--bg);
  border: none; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 500; color: var(--fg);
  text-align: left; transition: background 0.15s;
}
.accordion-trigger:hover { background: var(--muted-bg); }
.accordion-trigger-right { display: flex; align-items: center; gap: 8px; }
.accordion-arrow { transition: transform 0.2s; font-size: 14px; color: var(--muted); }
.accordion-arrow--open { transform: rotate(90deg); }
.accordion-body { border-top: 1px solid var(--border); display: none; }
.accordion-body--open { display: block; }
.accordion-inner { padding: 20px; background: rgba(245,245,244,0.4); }
.accordion-inner > p { font-size: 11px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }

/* ─── Step 2: Keyword Cards ──────────────────────────────────────────────────── */
.kw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) { .kw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .kw-grid { grid-template-columns: repeat(4, 1fr); } }

.kw-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: white; cursor: pointer; text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all 0.15s;
}
.kw-card:hover { border-color: rgba(59,91,219,0.3); box-shadow: var(--shadow); }
.kw-card--selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 4px 12px rgba(59,91,219,0.10); }
.kw-card__check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; background: var(--primary);
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  color: white; font-size: 11px;
}
.kw-card--selected .kw-card__check { display: flex; }
.kw-card__emoji { font-size: 20px; line-height: 1; }
.kw-card__label { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 4px; }
.kw-card__desc  { font-size: 10px; color: var(--muted); line-height: 1.4; }
.kw-count { margin-top: 16px; text-align: center; font-size: 12px; color: var(--primary); }

/* ─── Step 3: Element Cards ──────────────────────────────────────────────────── */
.el-section { margin-bottom: 36px; }
.el-section-header {
  display: flex; flex-direction: column;
  margin-bottom: 12px;
  padding-left: 12px; border-left: 2px solid var(--primary);
}
.el-section-header h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin: 0; }
.el-section-header span { font-size: 11px; color: var(--muted); margin-top: 2px; }

.el-grid { display: grid; gap: 10px; }
.el-grid--colors   { grid-template-columns: repeat(3, 1fr); }
.el-grid--shapes   { grid-template-columns: repeat(3, 1fr); }
.el-grid--lines    { grid-template-columns: repeat(2, 1fr); }
.el-grid--typo     { grid-template-columns: repeat(2, 1fr); }
.el-grid--textures { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) {
  .el-grid--colors   { grid-template-columns: repeat(4, 1fr); }
  .el-grid--shapes   { grid-template-columns: repeat(4, 1fr); }
  .el-grid--lines    { grid-template-columns: repeat(3, 1fr); }
  .el-grid--typo     { grid-template-columns: repeat(3, 1fr); }
  .el-grid--textures { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .el-grid--colors { grid-template-columns: repeat(6, 1fr); }
  .el-grid--shapes { grid-template-columns: repeat(5, 1fr); }
}

.el-wrap { position: relative; }

.el-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: white; cursor: pointer; width: 100%;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.15s;
}
.el-card:hover { border-color: rgba(59,91,219,0.3); box-shadow: var(--shadow); }
.el-card--selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 4px 12px rgba(59,91,219,0.10); }
.el-card__check {
  position: absolute; top: 7px; right: 7px;
  width: 18px; height: 18px; background: var(--primary); border-radius: 50%;
  display: none; align-items: center; justify-content: center; color: white; font-size: 10px;
}
.el-card--selected .el-card__check { display: flex; }
.el-card__visual { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.el-card__color  { width: 40px; height: 40px; border-radius: 8px; }
.el-card__label  { font-size: 11px; font-weight: 500; color: var(--fg); text-align: center; line-height: 1.3; }

.el-free-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  border-top: 1px solid var(--border); padding-top: 24px; margin-top: 8px;
}
@media (min-width: 560px) { .el-free-grid { grid-template-columns: 1fr 1fr; } }

/* ─── Step 3: Keyword summary (read-only) ────────────────────────────────────── */
.kw-summary-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.kw-summary-item__header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.kw-summary-item__emoji { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.kw-summary-item__label { font-size: 14px; font-weight: 600; color: var(--fg); }
.kw-summary-item__desc  { font-size: 11px; color: var(--muted); margin-left: 6px; }

.kw-rec-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--border);
  font-size: 12px;
}
.kw-rec-row__cat {
  width: 38px; flex-shrink: 0;
  font-size: 11px; color: var(--muted); padding-top: 3px;
}
.kw-rec-row__items { display: flex; flex-wrap: wrap; gap: 5px; }

.kw-rec-color {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg);
}
.kw-rec-color__swatch {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
}
.kw-rec-chip {
  font-size: 11px; background: var(--muted-bg); color: var(--fg);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}

.kw-summary-empty {
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: var(--radius-md); padding: 14px 16px;
  font-size: 12px; color: #92400E; line-height: 1.7; margin-bottom: 20px;
}
.kw-summary-empty a { color: var(--primary); text-decoration: none; font-weight: 500; }
.kw-summary-empty a:hover { text-decoration: underline; }

/* ─── Notice box ─────────────────────────────────────────────────────────────── */
.notice {
  font-size: 11px; background: #FFFBEB; border: 1px solid #FDE68A;
  color: #92400E; padding: 10px 14px; border-radius: var(--radius-md);
  margin-bottom: 16px; line-height: 1.65;
}

/* ─── Step 4: Checklist ──────────────────────────────────────────────────────── */
.check-card {
  border: 2px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; margin-bottom: 14px; transition: border-color 0.2s;
  background: white;
}
.check-card--checked { border-color: var(--primary); }
.check-card > label { display: flex; gap: 14px; padding: 18px; cursor: pointer; }
.check-card__box {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 2px solid var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
  transition: all 0.15s;
}
.check-card--checked .check-card__box { background: var(--primary); border-color: var(--primary); color: white; }
.check-card input[type="checkbox"] { display: none; }
.check-card__icon { font-size: 22px; flex-shrink: 0; }
.check-card__content { flex: 1; }
.check-card__title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.check-card__list { list-style: none; padding: 0; margin: 0; }
.check-card__list li { font-size: 11px; color: var(--muted); line-height: 1.75; display: flex; gap: 6px; }
.check-card__list li::before { content: '・'; color: var(--primary); flex-shrink: 0; }
.step4-hint { text-align: center; font-size: 11px; color: var(--muted); background: var(--muted-bg); padding: 8px 16px; border-radius: 8px; margin-top: 8px; }

/* ─── Step 5: Summary ────────────────────────────────────────────────────────── */
.summary-section { margin-bottom: 24px; }
.summary-section-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.summary-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--primary); color: white; font-size: 10px; font-weight: 700;
}
.summary-badge--yellow { background: #FBBF24; color: #78350F; }
.summary-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; }
.summary-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: rgba(245,245,244,0.5);
}
.summary-card-header--s02 { background: rgba(238,242,255,0.5); }
.summary-card-header--s03 { background: #FFFBEB; }
.summary-step-badge {
  font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(59,91,219,0.10); color: var(--primary);
}
.summary-step-badge--yellow { background: #FEF3C7; color: #B45309; }
.summary-card-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.summary-row { display: flex; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.summary-row:last-child { border-bottom: none; }
.summary-row__label { width: 108px; flex-shrink: 0; font-size: 11px; color: var(--muted); padding-top: 2px; }
.summary-row__value { font-size: 13px; color: var(--fg); word-break: break-word; white-space: pre-wrap; }

/* ─── Navigation Footer (fixed) ──────────────────────────────────────────────── */
.step-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  /*background: rgba(250,250,249,0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);*/
  padding: 12px 24px; z-index: 50;
}
.step-nav__inner {
  max-width: 720px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--radius-md);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  text-decoration: none; border: none;
}
.btn-primary { background: var(--primary); color: white; box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: #2F4EC7; }
.btn-primary:disabled { background: var(--muted-bg); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn-secondary { background: white; color: var(--fg); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--muted-bg); }
.btn-download {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: var(--radius-lg);
  background: var(--primary); color: white;
  font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; box-shadow: var(--shadow-primary);
  transition: all 0.15s;
}
.btn-download:hover { background: #2F4EC7; }

/* ─── Site Footer ────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); background: rgba(255,255,255,0.6); padding: 28px 15px; }
.site-footer__inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}
@media (min-width: 640px) { .site-footer__inner { flex-direction: row; } }
.site-footer__copy { font-size: 10px; color: var(--muted); }

/* ─── Landing: Hero ──────────────────────────────────────────────────────────── */
.lp-hero {
  min-height: 88vh; display: flex; align-items: center; justify-content: center;
  padding: 96px 24px 64px;
  background: var(--bg);
}
.lp-hero__content { max-width: 640px; text-align: center; }
.lp-hero__logo { margin: 0 auto 28px; display: flex; justify-content: center; }
.lp-hero__tag {
  display: inline-block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--primary); margin-bottom: 18px;
}
.lp-hero__title {
  font-family: 'Noto Serif JP', serif; font-size: 34px; font-weight: 300;
  color: var(--fg); line-height: 1.55; margin: 0 0 28px;
}
@media (min-width: 640px) { .lp-hero__title { font-size: 50px; } }
.lp-hero__title em { font-style: normal; color: var(--primary); font-weight: 400; }
.lp-hero__desc {
  font-size: 15px; color: var(--muted); line-height: 1.85; margin-bottom: 36px;
  max-width: 520px; margin-left: auto; margin-right: auto;
}
.lp-hero__desc strong { color: var(--fg); }
.lp-hero__actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; }
@media (min-width: 480px) { .lp-hero__actions { flex-direction: row; } }

.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 40px; background: var(--primary); color: white;
  border: none; border-radius: var(--radius-lg);
  font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 20px rgba(59,91,219,0.25); transition: all 0.15s;
}
.btn-hero:hover { background: #2F4EC7; transform: translateY(-1px); }
.btn-hero-out {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: 'Noto Sans JP', sans-serif; font-size: 14px;
  background: white; cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-hero-out:hover { background: var(--muted-bg); }

/* ─── Landing: Sections ──────────────────────────────────────────────────────── */
.lp-divider { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.lp-divider hr { border: none; border-top: 1px solid var(--border); margin: 0; }

.lp-section { padding: 72px 24px; }
.lp-section--alt { background: rgba(255,255,255,0.65); }
.lp-section__wrap { max-width: 960px; margin: 0 auto; }
.lp-section__head { text-align: center; margin-bottom: 48px; }
.lp-section__tag { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.lp-section__title { font-family: 'Noto Serif JP', serif; font-size: 24px; font-weight: 300; color: var(--fg); margin: 8px 0 0; }

.lp-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .lp-cards { grid-template-columns: repeat(3, 1fr); } }
.lp-card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 24px; text-align: center; box-shadow: var(--shadow);
}
.lp-card__icon { margin-bottom: 14px; display: flex; justify-content: center; }
.lp-card__title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 8px; line-height: 1.5; }
.lp-card__desc  { font-size: 12px; color: var(--muted); line-height: 1.75; }

.lp-features { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .lp-features { grid-template-columns: repeat(3, 1fr); } }
.lp-feature { padding: 24px; border-radius: var(--radius-xl); }
.lp-feature--accent { background: rgba(254,243,199,0.55); }
.lp-feature__icon { margin-bottom: 14px; }
.lp-feature__title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.lp-feature__desc  { font-size: 13px; color: var(--muted); line-height: 1.75; }

.lp-steps { max-width: 600px; margin: 0 auto; }
.lp-step { display: flex; gap: 22px; align-items: flex-start; }
.lp-step__track { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.lp-step__num {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--primary-light); flex-shrink: 0;
}
.lp-step__num--yellow { background: #FEF3C7; }
.lp-step__num-tag { font-size: 8px; font-weight: 700; color: var(--primary); line-height: 1; }
.lp-step__num-tag--yellow { color: #B45309; }
.lp-step__num-n { font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.lp-step__num-n--yellow { color: #B45309; }
.lp-step__line { width: 1px; flex: 1; background: var(--border); margin-top: 4px; min-height: 16px; }
.lp-step__body { padding-bottom: 28px; padding-top: 6px; }
.lp-step__title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.lp-step__desc  { font-size: 12px; color: var(--muted); }
.lp-cta { text-align: center; margin-top: 8px; }

/* ─── Logo diagram ───────────────────────────────────────────────────────────── */
.logo-diagram { max-width: 520px; margin: 0 auto; }
.logo-diagram__box {
  border: 2px dashed #7BC8E8; border-radius: var(--radius-xl);
  padding: 36px 32px 24px; background: white; position: relative;
}
.logo-diagram__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: white; border: 1px solid #7BC8E8; color: #3B9DC8;
  font-size: 11px; padding: 3px 14px; border-radius: 4px;
}
.logo-diagram__display {
  display: flex; align-items: center; gap: 24px;
  justify-content: center; margin-bottom: 16px;
}
.logo-diagram__text { display: flex; flex-direction: column; }
.logo-diagram__tagline { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 2px; }
.logo-diagram__name { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 700; color: var(--fg); line-height: 1; }
.logo-diagram__kana { font-family: 'Noto Serif JP', serif; font-size: 12px; color: var(--primary); font-weight: 500; letter-spacing: 0.15em; margin-top: 3px; }
.logo-diagram__labels { display: flex; gap: 24px; justify-content: center; }
.logo-diagram__label-item { display: flex; flex-direction: column; align-items: center; }
.logo-diagram__label-line {
  height: 12px;
  border-left: 1px solid rgba(0,0,0,0.18); border-right: 1px solid rgba(0,0,0,0.18); border-bottom: 1px solid rgba(0,0,0,0.18);
  border-radius: 0 0 2px 2px;
}
.logo-diagram__label-text { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.logo-basics-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .logo-basics-grid { grid-template-columns: 1fr 1fr; } }
.logo-basic-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.logo-basic-card__term { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.logo-basic-card__desc { font-size: 11px; color: var(--muted); line-height: 1.7; }

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .step-nav, .step-bar, .no-print { display: none !important; }
  body { background: white; }
  .step-main { max-width: 100%; padding: 16px; }
  .summary-card { page-break-inside: avoid; }
  .summary-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-footer { margin-top: 24px; }
}




/* ─── Header & Footer Logo Link ─────────────────────────────────────────────── */
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.15s;
}

/* ─── Hero Logo Area ─────────────────────────────────────────────────────────── */
.lp-hero__logo {
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ─── Logo Images Dimensions ─────────────────────────────────────────────────── */
.logo-img {
  display: block;
  height: auto;
  object-fit: contain;
}

/* ヘッダー */
.logo-img--header { height: 28px; }
.logo-img--dc-header { height: 20px; }

/* ヒーロー */
.logo-img--hero { height: 56px; }
.logo-img--dc-hero { height: 38px; }

/* ロゴ仕組み図（Logo Basics） */
.logo-img--diagram { height: 68px; }
.logo-img--dc-text { height: 28px; margin-top: 4px; }

/* フッター */
.logo-img--footer { height: 28px; }
.logo-img--dc-footer { height: 20px; }

/* ─── Features Cards ─────────────────────────────────────────────────────────── */
.lp-feature {
  padding: 24px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ─── Logo Diagram Box (Unified with Card Shadow) ───────────────────────────── */
.logo-diagram__box {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px 32px 24px;
  background: white;
  box-shadow: var(--shadow);
  position: relative;
}
.logo-diagram__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 11px;
  padding: 3px 14px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
/* ─── DC Logo + Subtitle Wrapper ────────────────────────────────────────────── */
.dc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* すべて左揃え */
  justify-content: center;
  line-height: 1;
}

/* サブテキスト共通設定（Zen Old Minchoに戻し） */
.dc-wrapper__sub {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: left;
}

/* ─── Header & Footer Logo Link ─────────────────────────────────────────────── */
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.15s;
}

/* ─── Hero Logo Area ─────────────────────────────────────────────────────────── */
.lp-hero__logo {
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ─── Logo Images & Subtitle Proportional Sizes ─────────────────────────────── */
.logo-img {
  display: block;
  height: auto;
  object-fit: contain;
}

/* 1. ヘッダー (DC.png 高さ: 20px) */
.logo-img--header { height: 28px; }
.logo-img--dc-header { height: 20px; }
.site-header .dc-wrapper__sub {
  font-size: 8px;
  margin-bottom: 2px;
}

/* 2. ヒーロー (DC.png 高さ: 38px → 比率 約1.9倍) */
.logo-img--hero { height: 56px; }
.logo-img--dc-hero { height: 38px; }
.lp-hero .dc-wrapper__sub {
  font-size: 15px;      /* 画像サイズに合わせた比率拡大 */
  margin-bottom: 4px;
}

/* 3. ロゴ仕組み図 / Logo Basics (DC.png 高さ: 28px → 比率 約1.4倍) */
.logo-img--diagram { height: 68px; }
.logo-img--dc-text { height: 28px; }
.logo-diagram .dc-wrapper__sub {
  font-size: 11px;     /* 画像サイズに合わせた比率拡大 */
  margin-bottom: 3px;
}

/* 4. フッター (DC.png 高さ: 20px) */
.logo-img--footer { height: 20px; }
.logo-img--dc-footer { height: 14px; }
.site-footer .dc-wrapper__sub {
  font-size: 5.5px;
  margin-bottom: 2px;
}

/* ─── Hover Styles (Blue Backgrounds / Accents to Black) ────────────────────── */

/* 1. プライマリボタン & ヒーローボタン & ダウンロードボタンのホバー */
.btn-primary:hover,
.btn-hero:hover,
.btn-download:hover {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* 2. セカンダリボタン（枠線タイプ）のホバー */
.btn-secondary:hover,
.btn-hero-out:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* 3. ロゴリンクホバー時の透過効果（文字は白・グレーのまま維持） */
.logo-link:hover {
  opacity: 0.7;
}
.logo-link:hover .dc-wrapper__sub {
  color: var(--muted); /* 文字色は黒にせず維持 */
}

/* 4. キーワードカード / デザイン要素カード（選択時の青枠・青背景）のホバー */
.kw-card--selected:hover,
.el-card--selected:hover {
  border-color: #000000 !important;
}

/* 5. ステップバーの円（アクティブ時）のホバー */
.step-circle--active:hover {
  background: #000000 !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
}
/* ─── Step 3: Remove Yellow Accents & Standardize to Primary ───────────────── */
.step-header__label--yellow {
  color: var(--primary);
}

.step-header__desc--yellow {
  background: rgba(245,245,244,0.7);
  border: 1px solid var(--border);
  color: var(--muted);
}

.step-circle--active-yellow {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(59,91,219,0.15);
}

.step-circle--done-yellow {
  background: rgba(59,91,219,0.12);
  color: var(--primary);
}

.step-check--yellow {
  background: var(--primary);
}

.step-label--active-yellow {
  color: var(--primary);
  font-weight: 600;
}

.lp-step__num--yellow {
  background: var(--primary-light);
}

.lp-step__num-tag--yellow,
.lp-step__num-n--yellow {
  color: var(--primary);
}

.summary-card-header--s03 {
  background: rgba(245,245,244,0.5);
}

.summary-step-badge--yellow,
.summary-badge--yellow {
  background: rgba(59,91,219,0.10);
  color: var(--primary);
}

/* ─── Step 3: Empty State Button Design ────────────────────────────────────── */
.kw-summary-empty {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.kw-summary-empty .btn-back-link {
  display: inline-flex;
  margin-top: 12px;
  text-decoration: none;
}

/* ─── Step 4 Check Cards (Unified Shadow Style) ────────────────────────────── */
.check-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow); /* 他のカードと同じシャドウを適用 */
  margin-bottom: 14px;
  transition: all 0.2s;
}

/* チェックオン（選択時）はシャドウをやや強調しつつ上品に */
.check-card--checked {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(59, 91, 219, 0.12) !important;
}

/* チェックボックス部分の境界線調整 */
.check-card__box {
  border: 1.5px solid var(--border);
}

/* ─── Print Styles ───────────────────────────────────────────────────────────── */
@media print {
  .site-header, .step-nav, .step-bar, .no-print, button { display: none !important; }
  body { background: white; color: #000; font-size: 15px !important; }
  .step-main { max-width: 100%; padding: 0; }
  .summary-card { page-break-inside: avoid; border: 1px solid #ccc !important; margin-bottom: 20px !important; }
  .summary-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-footer { margin-top: 16px; padding: 12px 0; }

  /* PDF出力時の全体の文字サイズを大幅アップ */
  .summary-card-title {
    font-size: 18px !important;
    font-weight: bold !important;
  }
  .summary-row__label {
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 160px !important; /* ラベル幅を広げて読みやすく */
  }
  .summary-row__value {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  .kw-rec-row__cat {
    font-size: 13px !important;
  }
  .kw-rec-chip, .kw-rec-color {
    font-size: 13px !important;
    padding: 3px 8px !important;
  }

  /* 分析結果のカードを2列並びにして配置を最適化 */
  .summary-row__value > div[style*="flex-direction:column"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .summary-row__value > div > div {
    break-inside: avoid;
  }
}





@media screen and (max-width: 700px) {
  /* 画面全体横あふれ防止 */
  html, body {
    overflow-x: hidden !important;
  }

  /* ヘ・フのサイトロゴサイズをスマホ用に最適化 */
  .logo-img--header {
    height: 24px !important;
    width: auto !important;
  }
  .logo-img--dc-header {
    height: 16px !important;
    width: auto !important;
  }
  .logo-img--footer {
    height: 22px !important;
    width: auto !important;
  }
  .logo-img--dc-footer {
    height: 14px !important;
    width: auto !important;
  }

  /* 2. ヘッダー内部のレイアウト崩れ・はみ出し防止 */
  .site-header {
    padding: 12px 16px !important;
  }
  .site-header__inner {
    flex-direction: row !important; /* 縦並びにならず横並びを維持 */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .logo-link {
    gap: 8px !important;
    max-width: 80% !important; /* 横幅いっぱいに広がらないよう制御 */
  }

  /* 3. フッターのレイアウト調整 */
  .site-footer {
    padding: 20px 16px !important;
  }
  .site-footer__inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* 4. メインエリアとテーブル等の崩れ防止 */
  .step-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 120px !important;
  }
  .summary-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  .summary-row__label {
    width: 100% !important;
    font-size: 12px !important;
  }
  .summary-row__value {
    font-size: 13px !important;
    max-width: 100% !important;
  }
  #kw-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}