/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--btn-r);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  border: none;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

/* フォーム応募 */
.btn--form {
  background: var(--cta-form);
  color: #fff;
  box-shadow: 0 4px 16px rgba(232,165,152,0.32);    /* 旧: rgba(255,143,74,...)（オレンジ）→ コーラル */
}
.btn--form:hover {
  background: var(--cta-form-drk);
  box-shadow: 0 6px 22px rgba(232,165,152,0.42);    /* 旧: rgba(255,143,74,...) → コーラル */
  transform: translateY(-1px);
}

/* LINE応募 */
.btn--line {
  background: var(--cta-line);
  color: #fff;
  box-shadow: 0 4px 16px rgba(6,199,85,0.28);
}
.btn--line:hover {
  background: var(--cta-line-drk);
  box-shadow: 0 6px 22px rgba(6,199,85,0.38);
  transform: translateY(-1px);
}

/* サイズ */
.btn--sm  { font-size: var(--fs-xs); padding: 9px 18px; }
.btn--lg  { font-size: var(--fs-xl); padding: 18px 40px; }
.btn--full { width: 100%; }

/* CTA icon */
.btn__icon { font-size: 1.15em; }

/* CTA マイクロコピー（CVR改善・心理障壁の低減）*/
.cta-microcopy {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  text-align: center;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-normal);
  margin: 0 auto 10px;
  max-width: 92%;
}


/* ═══════════════════════════════════════
   CTA PAIR
═══════════════════════════════════════ */
.cta-pair {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-pair .btn { flex: 1; min-width: 180px; }


/* ═══════════════════════════════════════
   CHECKLIST
═══════════════════════════════════════ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-normal);
}
.check-item__mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  margin-top: 2px;
  font-weight: var(--fw-bold);
}
.check-item__mark--yes {
  background: var(--cta-line);
  color: #fff;
}
.check-item__mark--no {
  background: #FFE5E5;
  color: var(--danger);
}


/* ═══════════════════════════════════════
   BADGE (trust tags)
═══════════════════════════════════════ */
.badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--btn-r);
  letter-spacing: var(--ls-heading);
}
.badge--primary { background: var(--primary); color: #fff; }
.badge--form    { background: var(--cta-form); color: #fff; }
.badge--line    { background: var(--cta-line); color: #fff; }


/* ═══════════════════════════════════════
   AVATAR PLACEHOLDER
═══════════════════════════════════════ */
.avatar-ph {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-ph--a { background: linear-gradient(135deg,#FFB094,var(--cta-form)); }
.avatar-ph--b { background: linear-gradient(135deg,#F4B3D0,#E87AB0); }
.avatar-ph--c { background: linear-gradient(135deg,#A8D8F0,#6ABCE8); }
.avatar-ph--d { background: linear-gradient(135deg,#B8EAC8,#5FCFA0); }
.avatar-ph--e { background: linear-gradient(135deg,#D4C0F8,#A888E8); }
.avatar-ph--f { background: linear-gradient(135deg,#FFE0A0,#FFC040); }


/* ═══════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgba(0,188,212,0.2);
}
.faq-item:first-child { border-top: 1px solid rgba(0,188,212,0.2); }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: font-size var(--transition), color var(--transition);
}
.faq-item__q::before {
  content: 'Q.';
  color: var(--primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  flex-shrink: 0;
  min-width: 28px;
  line-height: var(--lh-flat);
}

/* 展開時：フォントサイズ拡大 */
.faq-item.is-open .faq-item__q {
  font-size: var(--fs-xl);
}

.faq-item__q-text { flex: 1; line-height: var(--lh-normal); }

.faq-item__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  color: #fff;
  transition: transform var(--transition);
}
.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.36s ease;
}
.faq-item.is-open .faq-item__a { max-height: 500px; }

.faq-item__a-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 36px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid rgba(255,107,136,0.55);
  box-shadow: 4px 5px 14px rgba(255,107,136,0.28), 3px 4px 6px rgba(0,0,0,0.10);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-relaxed);
}
.faq-item__a-inner::before {
  content: 'A.';
  color: var(--accent);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  flex-shrink: 0;
  min-width: 28px;
  line-height: var(--lh-normal);
}


/* ═══════════════════════════════════════
   RATE SECTION (Pokewaku style)
═══════════════════════════════════════ */
.rate-section {
  margin: 60px 0 48px;
  text-align: center;
}

.rate-section__no1 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-mid);
  letter-spacing: var(--ls-heading);
  margin-bottom: 10px;
}

.rate-section__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-heading);
  margin-bottom: 12px;
}
.rate-section__title em {
  font-style: normal;
  color: var(--accent-mid);
}

/* 50%〜60% 大型表示（Asterisk風） */
.rate-range {
  margin: 4px 0 16px;
  text-align: center;
  line-height: var(--lh-flat);
}
.rate-range__val {
  display: inline-block;
  font-size: var(--fs-num-md);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-body);
  color: var(--accent-mid);
  text-shadow:
    0 4px 0 rgba(200, 50, 110, 0.25),
    0 8px 16px rgba(200, 50, 110, 0.15);
}
.rate-range__tilde {
  font-size: 0.5em;
  vertical-align: middle;
}
.rate-range__unit {
  font-size: 0.55em;
  vertical-align: baseline;
}
.rate-section__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fde0ec;
  color: var(--accent-darker);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rate-card {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.rate-card__header {
  background: #f97fa8;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
  padding: 10px 0;
  letter-spacing: var(--ls-heading);
}

.rate-card__rows {
  background: #fff;
}
.rate-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  gap: 4px;
}
.rate-row__pt {
  font-size: var(--fs-base);
  color: var(--text-sub);
  flex-shrink: 0;
}
.rate-row__dots {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--accent-mid);
  letter-spacing: var(--ls-eyebrow);
  text-align: center;
}
.rate-row__pct {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--accent-mid);
  flex-shrink: 0;
}
.rate-row__pct small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--gray-500);
  margin-left: 2px;
}

.rate-card__footer {
  padding: 14px 16px;
  background: #fff8f9;
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
}
.rate-card__footer strong {
  font-size: var(--fs-base);
}
.rate-highlight {
  background: linear-gradient(transparent 55%, #ffe066 55%);
  font-weight: var(--fw-bold);
}

.rate-note {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  margin-top: 10px;
  line-height: var(--lh-normal);
}


/* ═══════════════════════════════════════
   REWARD SIMULATOR
═══════════════════════════════════════ */
.simulator {
  background: #d6eecc;
  border-radius: 12px;
  padding: 28px 20px 24px;
  margin-top: 28px;
  position: relative;
}

/* Title with horizontal lines */
.simulator__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  margin-bottom: 22px;
  white-space: nowrap;
}
.simulator__title::before,
.simulator__title::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--gray-500);
}

/* Each field row */
.sim-field {
  margin-bottom: 16px;
}
.sim-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-bottom: 6px;
}

/* Dropdowns */
.sim-field select {
  width: 100%;
  padding: 11px 36px 11px 12px;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--text-sub);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.sim-field select:focus {
  outline: none;
  border-color: var(--gray-500);
}

/* Result row: box + 円 */
.sim-result__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-result__box {
  width: 50%;
  background: #fff;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.sim-result__en {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  flex-shrink: 0;
}

/* Bonus box */
.sim-bonus {
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 18px;
  background: rgba(255,255,255,0.45);
}
.sim-bonus__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
  margin-bottom: 8px;
}
.sim-bonus ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sim-bonus ul li {
  font-size: var(--fs-sm);
  color: var(--text-sub);
  line-height: var(--lh-normal);
}

/* Notes */
.simulator__notes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
}
.simulator__notes li {
  font-size: var(--fs-2xs);
  color: var(--orange-deep);
  line-height: var(--lh-normal);
}
.simulator__notes li::before {
  content: '※';
  margin-right: 3px;
}
.simulator__notes li.sim-note--plain::before {
  content: '';
  margin-right: 0;
}
.sim-note--plain {
  color: var(--text-sub);
}


/* ═══════════════════════════════════════
   COMPARE TABLE (待機ゼロ)
═══════════════════════════════════════ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }
.compare-table thead th {
  background: var(--bg1);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: var(--text-sub);
}
.compare-table thead th:first-child {
  text-align: left;
  width: 36%;
}
.compare-table thead th.ct-ours {
  background: linear-gradient(135deg, rgba(232,165,152,0.12), rgba(212,136,122,0.08));
  color: var(--primary);
  font-weight: var(--fw-black);
}
.compare-table td:first-child {
  text-align: left;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  background: var(--bg-white);
}
.compare-table td.ct-ours {
  font-weight: var(--fw-bold);
  color: var(--primary);
  background: rgba(232,165,152,0.04);
}
.compare-table td.ct-bad {
  color: var(--danger);
}

.ct-ok  { color: var(--cta-line); font-weight: var(--fw-bold); }
.ct-ng  { color: var(--gray-300); }


/* ═══════════════════════════════════════
   PHONE EXPLAIN SECTION
   (詳細ページ：電話説明への動機付け / コンバージョン核)
═══════════════════════════════════════ */

/* ── 長文版（equipment / how-to-start） ── */
.phone-section {
  background: var(--bg-white);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 26px 22px 24px;
  margin: 32px 0;
  box-shadow: 0 10px 28px rgba(255, 107, 157, 0.10);
}
.phone-section__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
  text-align: center;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0 0 4px;
}
.phone-section__caveat {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-align: center;
  letter-spacing: var(--ls-heading);
  margin: 0 0 22px;
}
.phone-section__block {
  margin-bottom: 20px;
}
.phone-section__block:last-child {
  margin-bottom: 0;
}
.phone-section__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-heading);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 107, 157, 0.4);
}
.phone-section__text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.phone-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phone-section__list li {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-relaxed);
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}
.phone-section__list--check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: var(--fw-black);
}
.phone-section__list--dot li::before {
  content: '・';
  position: absolute;
  left: 4px;
  top: 2px;
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* ═══════════════════════════════════════
   詳細ページ：長文解説セクション（SEO 網羅性向上）
═══════════════════════════════════════ */
.detail-narrative {
  padding: 22px 20px;         /* 背景は削除しつつ、横余白（左右 20px）は維持 */
  margin: 48px 0;             /* 上下 32→48px（H2 上の余白も拡大） */
}
.detail-narrative__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
.detail-narrative__text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  margin: 0 0 22px;                /* 段落間スペース（22px） */
}
.detail-narrative__text:last-child { margin-bottom: 0; }
/* 本文中の <strong> は黄色マーカーのみで強調（太字なし・pokewaku 風） */
.detail-narrative__text strong {
  color: inherit;                 /* 本文と同じ色 */
  font-weight: inherit;           /* 本文と同じウェイト（太字にしない） */
  background: linear-gradient(transparent 60%, var(--marker-green-soft) 60%);
  padding: 0 2px;
}

/* ─── 汎用マーカークラス（任意の本文中の語句を強調・太字なし） ─── */
.hl-marker {
  background: linear-gradient(transparent 60%, var(--marker-green-soft) 60%);
  padding: 0 2px;
  color: inherit;
  font-weight: inherit;
}
.hl-marker--strong {
  background: linear-gradient(transparent 55%, var(--marker-green) 55%);
  padding: 0 2px;
  color: inherit;
  font-weight: inherit;
}
.detail-narrative__title--sub {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin: 56px 0 16px;          /* 上 24→56px（セクション間を広げる） */
  padding: 8px 0 8px 12px;
  border-left: 4px solid var(--primary);
  border-bottom: none;
}

/* ═══════════════════════════════════════
   detail-narrative 視覚要素（共通パーツ）
═══════════════════════════════════════ */

/* 対比スタットボックス */
.dn-stat-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}
.dn-stat-pair__item {
  background: #fff;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid var(--gray-200);
}
.dn-stat-pair__item--before {
  opacity: 0.7;
}
.dn-stat-pair__item--after {
  border-color: var(--accent);
  background: linear-gradient(135deg, #fff 0%, #fff5f9 100%);
}
.dn-stat-pair__label {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--gray-600);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: 4px;
}
.dn-stat-pair__item--after .dn-stat-pair__label { color: var(--accent); }
.dn-stat-pair__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}
.dn-stat-pair__item--before .dn-stat-pair__value { color: var(--gray-500); }
.dn-stat-pair__item--after .dn-stat-pair__value { color: var(--accent-deep); }
.dn-stat-pair__value small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.dn-stat-pair__vs {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--gray-500);
}

/* 3アイコン横並び（trio） */
.dn-trio {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  background: #fafafa;
  border-radius: 12px;
  padding: 14px 10px;
  margin: 14px 0;
}
.dn-trio__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dn-trio__img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.dn-trio__img--placeholder {
  width: 56px;
  height: 56px;
  background: repeating-linear-gradient(45deg, var(--gray-200), var(--gray-200) 4px, #fff 4px, #fff 8px);
  border-radius: 50%;
}
.dn-trio__label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
}
.dn-trio__role {
  font-size: var(--fs-3xs);
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.dn-trio__plus {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
}

/* 手書き風プルクオート */
.dn-quote {
  position: relative;
  background: #fff;
  border-left: 3px solid var(--accent);
  padding: 18px 18px 14px 26px;
  margin: 16px 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.dn-quote__mark {
  position: absolute;
  top: -8px;
  left: 10px;
  font-family: var(--font-num);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
}
.dn-quote__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin: 0 0 6px;
  background: linear-gradient(transparent 65%, var(--marker-green-soft) 65%);
  display: inline;
  padding: 0 2px;
}
.dn-quote__author {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: var(--gray-600);
  text-align: right;
}

/* 3状態マトリクス */
.dn-matrix {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}
.dn-matrix__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--gray-200);
}
.dn-matrix__row--ok { border-left: 3px solid var(--cta-line); }
.dn-matrix__row--warn { border-left: 3px solid var(--gold); }
.dn-matrix__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: #fff;
}
.dn-matrix__row--ok .dn-matrix__icon { background: var(--cta-line); }
.dn-matrix__row--warn .dn-matrix__icon { background: var(--gold); }
.dn-matrix__case {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.dn-matrix__result {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-body);
}
.dn-matrix__row--ok .dn-matrix__result { color: var(--cta-line-drk); }
.dn-matrix__row--warn .dn-matrix__result { color: var(--gold); }

/* ハッシュタグリスト */
.dn-tags {
  list-style: none;
  margin: 14px 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dn-tags li {
  background: var(--bg-pale-pink);
  border: none;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  letter-spacing: var(--ls-body);
}

/* ═══════════════════════════════════════
   detail-narrative 視覚要素（追加パーツ）
═══════════════════════════════════════ */

/* dn-statbar：4 stat 横並びベルト */
.dn-statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 14px 0 18px;
  background: var(--bg-pale-pink);
  padding: 14px 4px;
}
.dn-statbar__cell {
  text-align: center;
  border-right: 1px dotted var(--accent-pale);
  padding: 0 4px;
}
.dn-statbar__cell:last-child { border-right: none; }
.dn-statbar__cell--peak .dn-statbar__num {
  color: var(--accent-deep);
}
.dn-statbar__num {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-default);
}
.dn-statbar__unit {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin-top: -2px;
}
.dn-statbar__lbl {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  margin-top: 4px;
  letter-spacing: var(--ls-body);
}

/* dn-scale：水平スケール（チップ単価など） */
.dn-scale {
  margin: 14px 0 18px;
  position: relative;
  padding: 0 4px;
}
.dn-scale__line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  height: 2px;
  background: linear-gradient(to right, var(--accent-pale), var(--accent));
  z-index: 1;
}
.dn-scale__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.dn-scale__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dn-scale__list li::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--accent);
  margin-bottom: 6px;
  border: 2px solid #fff;
}
.dn-scale__peak::before {
  background: var(--accent-deep) !important;
  width: 14px !important;
  height: 14px !important;
  margin-bottom: 4px !important;
}
.dn-scale__val {
  font-family: var(--font-num);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
}
.dn-scale__peak .dn-scale__val {
  font-size: var(--fs-lg);
  color: var(--accent-deep);
}
.dn-scale__lbl {
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  letter-spacing: var(--ls-body);
}
.dn-scale__cap {
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  text-align: center;
  margin: 14px 0 0;
}

/* dn-stairs：階段グラフ（料率変動） */
.dn-stairs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: end;
  height: 140px;
  margin: 14px 0 18px;
  padding: 0 0 4px;
  border-bottom: 1px dotted var(--accent-pale);
}
.dn-stairs__bar {
  height: var(--h);
  background: linear-gradient(to top, var(--accent-pale), var(--accent));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 2px;
  text-align: center;
  position: relative;
}
.dn-stairs__bar--peak {
  background: linear-gradient(to top, var(--accent), var(--accent-deep));
}
.dn-stairs__pct {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: var(--lh-flat);
}
.dn-stairs__pt {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  white-space: nowrap;
  font-weight: var(--fw-bold);
}

/* dn-payday：支払いカレンダー風 */
.dn-payday {
  margin: 14px 0 18px;
  padding: 14px 0;
  background: var(--bg-pale-pink);
}
.dn-payday__row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px dotted var(--accent-pale);
  font-size: var(--fs-sm);
}
.dn-payday__row:last-of-type { border-bottom: none; }
.dn-payday__period {
  color: var(--text);
  font-weight: var(--fw-bold);
}
.dn-payday__arrow {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  color: var(--accent);
  text-align: center;
  line-height: var(--lh-flat);
}
.dn-payday__pay {
  color: var(--text);
  text-align: right;
}
.dn-payday__pay strong {
  color: var(--accent-deep);
  font-weight: var(--fw-black);
}
.dn-payday__cap {
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  text-align: center;
  margin: 8px 14px 0;
  line-height: var(--lh-relaxed);
}

/* dn-formula：シミュレーター式 */
.dn-formula {
  margin: 14px 0 18px;
  padding: 16px 0;
  text-align: center;
}
.dn-formula__line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.dn-formula__var {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
  background: var(--bg-pale-pink);
  padding: 4px 10px;
}
.dn-formula__op {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
}
.dn-formula__const {
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
}
.dn-formula__equal {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  margin: 4px 0;
}
.dn-formula__result {
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--text);
  background: linear-gradient(transparent 60%, var(--marker-green) 60%);
  display: inline-block;
  padding: 0 8px;
}
.dn-formula__cap {
  font-size: var(--fs-3xs);
  color: var(--text-sub);
  margin: 10px 0 0;
}


/* ── 電話説明カード（構造化版 — タイトル + 所要時間バッジ + 安心ポイント4箇条） ── */
.phone-mini {
  background: var(--bg-white);
  border: 2px solid var(--accent-pale);
  border-radius: var(--radius-md);
  padding: 0;
  margin: 32px 0;
  overflow: hidden;
}
.phone-mini__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--accent-pale);
  flex-wrap: wrap;
}
.phone-mini__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  color: var(--accent-deep);
}
.phone-mini__icon svg { width: 100%; height: 100%; }
.phone-mini__title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  color: var(--accent-deep);
  letter-spacing: var(--ls-default);
  line-height: var(--lh-snug);
  margin: 0;
}
.phone-mini__duration {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--white);
  background: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: var(--ls-default);
  line-height: var(--lh-flat);
}
.phone-mini__body {
  padding: 14px 18px 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  margin: 0;
}
.phone-mini__points {
  list-style: none;
  padding: 8px 18px 18px;
  margin: 0;
}
.phone-mini__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-default);
}
.phone-mini__point-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-fresh);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-black);
  line-height: 1;
  margin-top: 1px;
}
.phone-mini__points strong {
  color: var(--accent-deep);
  font-weight: var(--fw-bold);
}

/* ═══════════════════════════════════════════════════════
   === DN COMPONENTS V2 ===
   競合分析第2弾（larme/twinplanet/asobinext/project-idol/
   incubation/rootsbygrove/star-creation）から抽出した
   汎用視覚要素。詳細ページ全 16 ページで再利用可能。
   _design-system/09-competitor-analysis-2.md 参照
   ═══════════════════════════════════════════════════════ */

/* P-01: ドット帯セクション区切り
   ─── 章境界に挿入。中央に小見出しチップを置く */
.dn-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(var(--accent-pale) 1.5px, transparent 2px);
  background-size: 14px 14px;
  height: 64px;
  margin: 32px 0;
}
.dn-divider__chip {
  background: var(--bg-white);
  padding: 6px 18px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-eyebrow);
}

/* P-02: 巨大数字スタッツ 3列
   ─── 数字を超大型で見せる。dn-statbar より訴求力強 */
.dn-bignum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--bg-pale-pink);
  padding: 22px 14px;
  margin: 18px 0;
  text-align: center;
}
.dn-bignum__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
}
.dn-bignum__cell + .dn-bignum__cell {
  border-left: 1px dotted var(--accent-pale);
}
.dn-bignum__num {
  font-size: var(--fs-num-md);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
}
.dn-bignum__unit {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  color: var(--accent);
  margin-left: 2px;
}
.dn-bignum__lbl {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  margin-top: 6px;
  line-height: var(--lh-snug);
}
@media (max-width: 480px) {
  .dn-bignum__num { font-size: var(--fs-4xl); }
}

/* P-03: 矢印フロー区切り
   ─── ステップ間に挟む下向き矢印。番号バッジを使わずに順序を示す */
.dn-arrow {
  text-align: center;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  margin: 10px 0;
  opacity: 0.65;
}

/* P-05: 4 ボックス並列ベネフィット
   ─── 2×2 グリッド（SP は 1 列）。シャドウ・角丸ともになし */
.dn-benefit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.dn-benefit__cell {
  background: var(--bg-white);
  border: 1px solid var(--accent-pale);
  padding: 16px 14px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dn-benefit__no {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  line-height: var(--lh-flat);
  margin-bottom: 4px;
}
.dn-benefit__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  margin: 0 0 6px;
  line-height: var(--lh-snug);
}
.dn-benefit__desc {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  line-height: var(--lh-relaxed);
  margin: 0;
}
@media (max-width: 374px) {
  .dn-benefit { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────
   FV-TOC: 共通目次セクション
   ─── ポケットワーク FV 分析（pokewaku.jp）から学習。
       全詳細ページの FV 直下に統一配置することで SEO + UX を両立。
       2026-05-15 競合分析 → 09-competitor-analysis-2.md 参照
   ─────────────────────────────────── */
.fv-toc {
  background: #fafafa;
  padding: 18px 20px;
  margin: 14px 0 32px;
}
.fv-toc__head {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-eyebrow);
  text-align: center;
  margin: 0 0 12px;
}
.fv-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fv-toc__list li + li {
  border-top: 1px dotted var(--accent-pale);
}
.fv-toc__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.fv-toc__no {
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-heading);
  flex-shrink: 0;
  width: 24px;
}
.fv-toc__title {
  flex: 1;
  font-weight: var(--fw-bold);
}
.fv-toc__arrow {
  color: var(--accent);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  line-height: var(--lh-flat);
}

/* P-07: POINT 番号タイポ見出し
   ─── 「POINT 01」を裸の大判タイポで配置。バッジ・装飾なし */
.dn-point {
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--accent-pale);
}
.dn-point__no {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: 4px;
}
.dn-point__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin: 0;
}