/**
 * sys-tre.com Design System — components.css
 * Phase 2 成果物 (2026-04-22)
 *
 * 依存: tokens.css（先に読み込むこと）
 * 命名: BEM 風 .ds-component__element--modifier
 * ルール: tokens.css の var() のみ使用、生HEX禁止、!important禁止
 */

/* ============================================================
   UTILITIES — Grid / Flex helpers
   ============================================================ */
.ds-grid {
  display: grid;
  gap: var(--ds-space-6);
}
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 768px) {
  .ds-grid-3,
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .ds-grid-2,
  .ds-grid-3,
  .ds-grid-4 { grid-template-columns: 1fr; }
}

.ds-flex {
  display: flex;
  gap: var(--ds-space-3);
}
.ds-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
}

/* ============================================================
   BUTTON EXTENSIONS (tokens.css のベースに追加)
   ============================================================ */

/* Link 風ボタン（矢印付き） */
.ds-btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ds-text-link);
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
  text-decoration: none;
}
.ds-btn-link::after {
  content: "→";
  transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-btn-link:hover {
  color: var(--ds-text-link-hover);
}
.ds-btn-link:hover::after {
  transform: translateX(4px);
}

/* アイコン内蔵ボタン */
.ds-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 12px 20px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  border-radius: var(--ds-radius);
  cursor: pointer;
  transition: all var(--ds-dur) var(--ds-ease);
  text-decoration: none;
}
.ds-btn-icon:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary-dark);
  box-shadow: var(--ds-shadow-sm);
}

/* Disabled 状態 */
.ds-btn[disabled],
.ds-btn-disabled,
.ds-btn-link[disabled],
.ds-btn-icon[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   CURRENCY PAIR BADGE
   ============================================================ */
.ds-pair-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  color: var(--ds-surface);
  border-radius: var(--ds-radius-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ds-pair-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.ds-pair-badge--usdjpy { background: var(--ds-pair-usdjpy); }
.ds-pair-badge--eurusd { background: var(--ds-pair-eurusd); }
.ds-pair-badge--gbpusd { background: var(--ds-pair-gbpusd); }
.ds-pair-badge--gbpjpy { background: var(--ds-pair-gbpjpy); }
.ds-pair-badge--eurjpy { background: var(--ds-pair-eurjpy); }
.ds-pair-badge--audusd { background: var(--ds-pair-audusd); }
.ds-pair-badge--nzdusd { background: var(--ds-pair-nzdusd); }
.ds-pair-badge--usdcad { background: var(--ds-pair-usdcad); }
.ds-pair-badge--usdchf { background: var(--ds-pair-usdchf); }
.ds-pair-badge--xauusd { background: var(--ds-pair-xauusd); color: var(--ds-dark); }
.ds-pair-badge--xagusd { background: var(--ds-pair-xagusd); color: var(--ds-dark); }

/* ============================================================
   STRATEGY BADGE
   ============================================================ */
.ds-strat-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  color: var(--ds-surface);
  border-radius: var(--ds-radius-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ds-strat-badge--scalp      { background: var(--ds-strat-scalp); }
.ds-strat-badge--day        { background: var(--ds-strat-day); }
.ds-strat-badge--swing      { background: var(--ds-strat-swing); }
.ds-strat-badge--grid       { background: var(--ds-strat-grid); }
.ds-strat-badge--martingale { background: var(--ds-strat-martingale); }
.ds-strat-badge--hedge      { background: var(--ds-strat-hedge); }
.ds-strat-badge--anomaly    { background: var(--ds-strat-anomaly); }
.ds-strat-badge--morning    { background: var(--ds-strat-morning); }

/* ============================================================
   SPARKLINE (SVG wrapper)
   ============================================================ */
.ds-sparkline {
  width: 100%;
  height: 60px;
  display: block;
  overflow: visible;
}

.ds-sparkline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ds-sparkline__fill {
  fill: currentColor;
  opacity: 0.08;
  stroke: none;
}

/* ============================================================
   EA CARD (Phase 2 最重要コンポーネント)
   ============================================================ */
.ds-ea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-xs);
  overflow: hidden;
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-ea-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow);
}

/* 左端 4px 戦略色アクセント */
.ds-ea-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--ds-ea-accent, var(--ds-primary));
}

/* Header: title + strategy badge */
.ds-ea-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.ds-ea-card__title {
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-heading);
  color: var(--ds-text);
  margin: 0;
}

/* Pair badges row */
.ds-ea-card__pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Sparkline container — colored by strategy */
.ds-ea-card__sparkline {
  position: relative;
  padding: var(--ds-space-3) 0;
  color: var(--ds-ea-accent, var(--ds-primary));
}

/* Stats grid (3 columns) */
.ds-ea-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

.ds-ea-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.ds-ea-card__stat-label {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  font-family: var(--ds-font-en);
  letter-spacing: var(--ds-ls-wide);
  text-transform: uppercase;
}

.ds-ea-card__stat-value {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-fw-black);
  font-size: var(--ds-text-h4);
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ds-ea-card__stat-value--positive { color: var(--ds-success); }
.ds-ea-card__stat-value--negative { color: var(--ds-danger); }
.ds-ea-card__stat-value--warn     { color: var(--ds-warning); }

/* Footer: vendor + CTA */
.ds-ea-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.ds-ea-card__vendor {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

.ds-ea-card__vendor::before {
  content: "by ";
  opacity: 0.6;
}

/* Strategy accent mixin（各戦略カードに付与） */
.ds-ea-card--scalp      { --ds-ea-accent: var(--ds-strat-scalp); }
.ds-ea-card--day        { --ds-ea-accent: var(--ds-strat-day); }
.ds-ea-card--swing      { --ds-ea-accent: var(--ds-strat-swing); }
.ds-ea-card--grid       { --ds-ea-accent: var(--ds-strat-grid); }
.ds-ea-card--martingale { --ds-ea-accent: var(--ds-strat-martingale); }
.ds-ea-card--hedge      { --ds-ea-accent: var(--ds-strat-hedge); }
.ds-ea-card--anomaly    { --ds-ea-accent: var(--ds-strat-anomaly); }
.ds-ea-card--morning    { --ds-ea-accent: var(--ds-strat-morning); }

/* ============================================================
   HERO
   ============================================================ */
.ds-hero {
  position: relative;
  min-height: min(720px, 100vh);
  padding: var(--ds-space-24) 0 var(--ds-space-16);
  background: linear-gradient(145deg, var(--ds-dark-deep) 0%, #15120e 40%, var(--ds-dark) 100%);
  color: var(--ds-text-inverse);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 122, 61, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.ds-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 70%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 122, 61, .15) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ds-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-container-px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-12);
  align-items: center;
}

@media (max-width: 768px) {
  .ds-hero { min-height: auto; padding: var(--ds-space-16) 0 var(--ds-space-12); }
  .ds-hero__inner { grid-template-columns: 1fr; gap: var(--ds-space-8); }
}

.ds-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 6px 16px;
  background: rgba(255, 122, 61, .15);
  border: 1px solid rgba(255, 122, 61, .3);
  color: var(--ds-primary-light);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wide);
  font-family: var(--ds-font-en);
  text-transform: uppercase;
}

.ds-hero__badge--danger  { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .4); color: #FCA5A5; }
.ds-hero__badge--info    { background: rgba(37, 99, 235, .15); border-color: rgba(37, 99, 235, .4); color: #93C5FD; }

.ds-hero__title {
  font-size: var(--ds-text-display);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-ls-tight);
  margin-top: var(--ds-space-5);
  color: var(--ds-text-inverse);
}

.ds-hero__title em {
  color: var(--ds-primary);
  font-style: normal;
}

.ds-hero__sub {
  margin-top: var(--ds-space-5);
  font-size: var(--ds-text-h4);
  line-height: var(--ds-lh-body);
  color: rgba(255, 255, 255, .75);
  max-width: 560px;
}

.ds-hero__meta {
  margin-top: var(--ds-space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-6);
}

.ds-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-hero__meta-value {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-fw-black);
  font-size: var(--ds-text-h3);
  color: var(--ds-primary-light);
  font-variant-numeric: tabular-nums;
}

.ds-hero__meta-label {
  font-size: var(--ds-text-xs);
  color: rgba(255, 255, 255, .55);
  letter-spacing: var(--ds-ls-wide);
}

.ds-hero__cta-group {
  margin-top: var(--ds-space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}

/* Ghost ボタン on Dark Hero */
.ds-hero .ds-btn-ghost {
  color: var(--ds-text-inverse);
  border-color: rgba(255, 255, 255, .25);
}
.ds-hero .ds-btn-ghost:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary-light);
}

/* Visual column */
.ds-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-hero__visual img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(255, 122, 61, .25));
}

/* Feature Hero のモックアップ */
.ds-hero__mockup {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
  width: 100%;
  max-width: 480px;
}

.ds-hero__mockup-bar {
  display: flex;
  gap: 6px;
  padding-bottom: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border);
}
.ds-hero__mockup-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-gray-200);
}

/* Campaign Hero のオファーカード */
.ds-hero__offer {
  background: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-dark) 100%);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-8);
  text-align: center;
  color: var(--ds-text-inverse);
  box-shadow: 0 24px 48px rgba(255, 81, 0, .4);
  width: 100%;
  max-width: 420px;
}

.ds-hero__offer-label {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wide);
  opacity: 0.85;
}

.ds-hero__offer-amount {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-fw-black);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  margin: var(--ds-space-3) 0;
  font-variant-numeric: tabular-nums;
}

.ds-hero__offer-unit {
  font-size: 0.4em;
  font-weight: var(--ds-fw-bold);
  margin-left: 4px;
}

.ds-hero__offer-caption {
  font-size: var(--ds-text-sm);
  opacity: 0.85;
  margin-top: var(--ds-space-2);
}

/* ============================================================
   STATS COUNTER
   ============================================================ */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}

@media (max-width: 768px) {
  .ds-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ds-stats { grid-template-columns: 1fr; }
}

.ds-stats__item {
  padding: var(--ds-space-6) var(--ds-space-4);
  text-align: center;
  border-right: 1px solid var(--ds-border);
}

.ds-stats__item:last-child { border-right: 0; }

@media (max-width: 768px) {
  .ds-stats__item:nth-child(2n) { border-right: 0; }
  .ds-stats__item { border-bottom: 1px solid var(--ds-border); }
  .ds-stats__item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .ds-stats__item { border-right: 0; border-bottom: 1px solid var(--ds-border); }
  .ds-stats__item:last-child { border-bottom: 0; }
}

.ds-stats__num {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-fw-black);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ds-primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ds-stats__num-suffix {
  font-size: 0.5em;
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text-muted);
  margin-left: 2px;
}

.ds-stats__label {
  margin-top: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  letter-spacing: var(--ds-ls-wide);
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.ds-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-6);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-xs);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-testimonial:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-sm);
}

.ds-testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--ds-gold);
  font-size: var(--ds-text-body);
  line-height: 1;
}

.ds-testimonial__stars span:not(.on) {
  color: var(--ds-gray-300);
}

.ds-testimonial__quote {
  font-size: var(--ds-text-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-text);
  margin: 0;
}

.ds-testimonial__quote::before {
  content: "“";
  display: inline-block;
  margin-right: 2px;
  color: var(--ds-primary);
  font-weight: var(--ds-fw-black);
}
.ds-testimonial__quote::after {
  content: "”";
  display: inline-block;
  color: var(--ds-primary);
  font-weight: var(--ds-fw-black);
}

.ds-testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-sub);
}

.ds-testimonial__name {
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
}

.ds-testimonial__period {
  color: var(--ds-text-muted);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
}

/* ============================================================
   FAQ ACCORDION (details ベース、JS 不要)
   ============================================================ */
.ds-faq {
  border-top: 1px solid var(--ds-border);
}

.ds-faq__item {
  border-bottom: 1px solid var(--ds-border);
}

.ds-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-5) var(--ds-space-2);
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--ds-dur) var(--ds-ease);
}

/* Chrome/Safari の marker 削除 */
.ds-faq__item summary::-webkit-details-marker { display: none; }

.ds-faq__item summary:hover {
  color: var(--ds-primary-dark);
}

.ds-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23575250' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--ds-dur) var(--ds-ease);
}

.ds-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.ds-faq__content {
  padding: 0 var(--ds-space-2) var(--ds-space-5);
  font-size: var(--ds-text-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-text-sub);
}

/* 開閉時のフェード */
.ds-faq__item[open] .ds-faq__content {
  animation: ds-faq-fade var(--ds-dur-slow) var(--ds-ease-out);
}

@keyframes ds-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TRUST STRIP (リスク開示)
   ============================================================ */
.ds-trust-strip {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--ds-space-6);
  align-items: center;
  padding: var(--ds-space-8);
  background: var(--ds-gray-50);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

@media (max-width: 640px) {
  .ds-trust-strip {
    grid-template-columns: 80px 1fr;
    padding: var(--ds-space-5);
    gap: var(--ds-space-4);
  }
}

.ds-trust-strip__mascot {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ds-trust-strip__title {
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-2);
}

.ds-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-sub);
  line-height: var(--ds-lh-body);
}

.ds-trust-strip__list li {
  padding-left: 16px;
  position: relative;
}

.ds-trust-strip__list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--ds-text-muted);
  font-weight: var(--ds-fw-black);
}

/* ============================================================
   FEATURE CARD
   ============================================================ */
.ds-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ds-space-6) var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-xs);
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow);
}

.ds-feature-card__icon {
  width: 96px;
  height: 96px;
  margin-bottom: var(--ds-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-primary-bg);
  border-radius: var(--ds-radius-circle);
  padding: var(--ds-space-2);
}

.ds-feature-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-feature-card__title {
  font-family: var(--ds-font-jp);
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-2);
}

.ds-feature-card__desc {
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-body);
  color: var(--ds-text-sub);
  margin: 0 0 var(--ds-space-3);
  flex-grow: 1;
}

.ds-feature-card__link {
  margin-top: auto;
}

/* ============================================================
   SECTION HEADING (セクションタイトル共通)
   ============================================================ */
.ds-section-head {
  text-align: center;
  margin-bottom: var(--ds-space-12);
}

.ds-section-head__en {
  display: inline-block;
  font-family: var(--ds-font-en);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wide);
  color: var(--ds-primary-dark);
  text-transform: uppercase;
  margin-bottom: var(--ds-space-3);
}

.ds-section-head__title {
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-fw-black);
  color: var(--ds-text);
  line-height: var(--ds-lh-heading);
  margin: 0;
}

.ds-section-head__lead {
  margin-top: var(--ds-space-3);
  font-size: var(--ds-text-body);
  color: var(--ds-text-sub);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--ds-lh-body);
}

/* ============================================================
   HERO — visual type (画像付きヒーロー)  Phase 5-A.5 追加
   main4.png のような人物+訴求コピー+NEWバッジ構成
   推奨マークアップ:
     <section class="ds-hero ds-hero--visual">
       <div class="ds-hero__copy">
         <span class="ds-hero__eyebrow">NEW</span>
         <h1 class="ds-hero__title">有料EAが <em>完全無料</em> で使える</h1>
         <p class="ds-hero__lead">自動売買ツール専用マーケットプレイスサイト</p>
         <div class="ds-hero__cta">
           <a class="ds-btn ds-btn-primary ds-btn-lg" href="#">無料で始める</a>
           <a class="ds-btn ds-btn-ghost" href="#">サービスを見る</a>
         </div>
       </div>
       <div class="ds-hero__media">
         <img src="../assets/hero/hero-main.png" width="1200" height="630"
              alt="..." loading="eager" decoding="async" fetchpriority="high">
       </div>
     </section>
   ============================================================ */
.ds-hero--visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-10);
  align-items: center;
  padding: var(--ds-section-y) var(--ds-container-px);
  max-width: var(--ds-container-lg);
  margin-inline: auto;
  background: linear-gradient(135deg, var(--ds-surface-warm) 0%, var(--ds-primary-bg) 100%);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.ds-hero--visual .ds-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  z-index: 1;
}

.ds-hero--visual .ds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--ds-space-1);
  padding: 6px 14px;
  background: var(--ds-primary);
  color: var(--ds-text-on-primary);
  font-family: var(--ds-font-en);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-black);
  letter-spacing: var(--ds-ls-wide);
  border-radius: var(--ds-radius-pill);
  text-transform: uppercase;
}

.ds-hero--visual .ds-hero__title {
  font-size: var(--ds-text-display);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-ls-tight);
  color: var(--ds-text);
  margin: 0;
}

.ds-hero--visual .ds-hero__title em {
  font-style: normal;
  color: var(--ds-primary-dark);
  background: linear-gradient(transparent 60%, #FFE9D4 60%);
  padding: 0 6px;
}

.ds-hero--visual .ds-hero__lead {
  font-size: var(--ds-text-h4);
  color: var(--ds-text-sub);
  line-height: var(--ds-lh-body);
  max-width: 32ch;
}

.ds-hero--visual .ds-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-3);
}

.ds-hero--visual .ds-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  box-shadow: var(--ds-shadow-md);
}

.ds-hero--visual .ds-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* SP: 画像を上・テキスト下にスタック */
@media (max-width: 768px) {
  .ds-hero--visual {
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
    padding: var(--ds-space-10) var(--ds-container-px-sm);
    border-radius: var(--ds-radius);
  }
  .ds-hero--visual .ds-hero__media {
    order: -1;
  }
  .ds-hero--visual .ds-hero__title {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }
  .ds-hero--visual .ds-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-hero--visual .ds-hero__cta .ds-btn {
    width: 100%;
  }
}

/* Dark mode */
:root[data-theme="dark"] .ds-hero--visual {
  background: linear-gradient(135deg, var(--ds-dark-surface) 0%, rgba(255,122,61,0.18) 100%);
}
:root[data-theme="dark"] .ds-hero--visual .ds-hero__title { color: var(--ds-sem-text); }
:root[data-theme="dark"] .ds-hero--visual .ds-hero__lead  { color: var(--ds-sem-text-sub); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-hero--visual {
    background: linear-gradient(135deg, var(--ds-dark-surface) 0%, rgba(255,122,61,0.18) 100%);
  }
  :root:not([data-theme="light"]) .ds-hero--visual .ds-hero__title { color: var(--ds-sem-text); }
  :root:not([data-theme="light"]) .ds-hero--visual .ds-hero__lead  { color: var(--ds-sem-text-sub); }
}

/* ============================================================
   Hero — Bleed (full-bleed background + text overlay)
   データアート型背景 + 左寄せテキストオーバーレイ
   ============================================================ */
.ds-hero--bleed {
  position: relative;
  padding: clamp(var(--ds-space-16), 10vw, var(--ds-space-24)) var(--ds-container-px);
  background-color: #0D0B09;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.ds-hero--bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13,11,9,0.92) 0%,
    rgba(13,11,9,0.70) 28%,
    rgba(13,11,9,0.35) 52%,
    rgba(13,11,9,0.00) 75%);
  z-index: 0;
  pointer-events: none;
}

.ds-hero--bleed .ds-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--ds-container-lg);
  margin-inline: auto;
  width: 100%;
}

.ds-hero--bleed .ds-hero__copy {
  max-width: 52%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

.ds-hero--bleed .ds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--ds-space-1);
  padding: 6px 14px;
  background: var(--ds-primary);
  color: var(--ds-text-on-primary);
  font-family: var(--ds-font-en);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-black);
  letter-spacing: var(--ds-ls-wide);
  border-radius: var(--ds-radius-pill);
  text-transform: uppercase;
}

.ds-hero--bleed .ds-hero__title {
  font-size: var(--ds-text-display);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-ls-tight);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.ds-hero--bleed .ds-hero__title em {
  color: var(--ds-primary);
  font-style: normal;
}

.ds-hero--bleed .ds-hero__lead {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-lh-relaxed);
  color: rgba(255,255,255,0.88);
  margin: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.ds-hero--bleed .ds-hero__cta {
  display: flex;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  margin-top: var(--ds-space-2);
}

.ds-hero--bleed .ds-hero__cta .ds-btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}
.ds-hero--bleed .ds-hero__cta .ds-btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.75);
}

@media (max-width: 900px) {
  .ds-hero--bleed .ds-hero__copy { max-width: 64%; }
}

@media (max-width: 768px) {
  .ds-hero--bleed {
    min-height: 640px;
    padding: var(--ds-space-12) var(--ds-container-px-sm);
    background-position: center 30%;
  }
  .ds-hero--bleed::before {
    background: linear-gradient(180deg,
      rgba(13,11,9,0.55) 0%,
      rgba(13,11,9,0.75) 55%,
      rgba(13,11,9,0.92) 100%);
  }
  .ds-hero--bleed .ds-hero__inner {
    display: flex;
    align-items: flex-end;
    min-height: inherit;
  }
  .ds-hero--bleed .ds-hero__copy {
    max-width: 100%;
  }
  .ds-hero--bleed .ds-hero__title {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }
  .ds-hero--bleed .ds-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-hero--bleed .ds-hero__cta .ds-btn {
    width: 100%;
  }
}

/* ============================================================
   Phase 6-D: Button double-dash aliases + new variants
   tokens.css の single-dash 定義に合わせたエイリアス + secondary/tertiary 新規
   ============================================================ */

/* ---- alias: primary ---- */
.ds-btn--primary {
  background: var(--ds-primary);
  color: var(--ds-text-on-primary);
  box-shadow: var(--ds-shadow-sm);
}
.ds-btn--primary:hover {
  background: var(--ds-primary-dark);
  color: var(--ds-text-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--ds-glow-primary);
}

/* ---- alias: ghost ---- */
.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  border: 1.5px solid var(--ds-border-strong);
}
.ds-btn--ghost:hover {
  border-color: var(--ds-primary);
  color: var(--ds-primary-dark);
}

/* ---- size aliases ---- */
.ds-btn--sm { padding: 10px 20px; font-size: var(--ds-text-sm); }
.ds-btn--lg { padding: 18px 40px; font-size: var(--ds-text-h4); }

/* ---- secondary: teal outline → fill on hover ---- */
.ds-btn--secondary {
  background: transparent;
  color: var(--ds-accent-teal);
  border: 1.5px solid var(--ds-accent-teal);
}
.ds-btn--secondary:hover {
  background: var(--ds-accent-teal);
  color: var(--ds-text-inverse);
  box-shadow: var(--ds-glow-teal);
  transform: translateY(-2px);
}

/* ---- tertiary: text + arrow, underline slide-in ---- */
.ds-btn--tertiary {
  background: transparent;
  color: var(--ds-text);
  border: none;
  padding-inline: 0;
  gap: var(--ds-space-1);
  position: relative;
}
.ds-btn--tertiary::after {
  content: "→";
  transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-btn--tertiary::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--ds-primary);
  transition: width var(--ds-dur) var(--ds-ease);
}
.ds-btn--tertiary:hover::after  { transform: translateX(4px); }
.ds-btn--tertiary:hover::before { width: 100%; }
.ds-btn--tertiary:hover         { color: var(--ds-primary-dark); }

/* ============================================================
   Phase 6-D: Card subtle
   ============================================================ */
.ds-card--subtle {
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-6);
}
.ds-card--subtle:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
  transition: box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}

/* ============================================================
   Phase 6-D: Trust bar (KPI 横並び帯)
   ============================================================ */
.ds-trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-8) var(--ds-space-12);
  padding: var(--ds-space-8) var(--ds-container-px);
  background: var(--ds-surface-alt);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}

.ds-trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-1);
}

.ds-trust-bar__val {
  font-family: var(--ds-font-en);
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-fw-black);
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-ls-tight);
  color: var(--ds-primary);
}

.ds-trust-bar__label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wide);
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

@media (max-width: 640px) {
  .ds-trust-bar {
    gap: var(--ds-space-6) var(--ds-space-8);
  }
  .ds-trust-bar__val {
    font-size: var(--ds-text-h3);
  }
}

/* ============================================================
   Phase 6-D: Pricing card — light variant
   ============================================================ */
.ds-pricing--light {
  background: var(--ds-surface-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  transition: box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.ds-pricing--light:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-3px);
}
.ds-pricing--light__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-primary-bg);
  color: var(--ds-primary-dark);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-fw-bold);
  letter-spacing: var(--ds-ls-wide);
  text-transform: uppercase;
  align-self: flex-start;
}
.ds-pricing--light__name {
  font-size: var(--ds-text-h3);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  line-height: var(--ds-lh-heading);
  margin: 0;
}
.ds-pricing--light__price {
  font-family: var(--ds-font-en);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-fw-black);
  line-height: 1;
  color: var(--ds-text);
}
.ds-pricing--light__price small {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-fw-regular);
  color: var(--ds-text-muted);
}
.ds-pricing--light__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}
.ds-pricing--light__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-sub);
  line-height: var(--ds-lh-body);
}
.ds-pricing--light__list li::before {
  content: "✓";
  color: var(--ds-accent-teal);
  font-weight: var(--ds-fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-pricing--light__cta {
  margin-top: auto;
}

/* ============================================================
   Phase 6-D: FAQ — light variant (white bg, border-bottom)
   JSON-LD schema を script タグで pattern 内に含める
   ============================================================ */
.ds-faq--light {
  background: var(--ds-surface);
}
.ds-faq--light .ds-faq__item {
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
}
.ds-faq--light .ds-faq__item summary {
  background: transparent;
  padding-block: var(--ds-space-6);
}
.ds-faq--light .ds-faq__item summary:hover {
  background: var(--ds-surface-warm);
}
.ds-faq--light .ds-faq__item[open] summary {
  color: var(--ds-primary-dark);
}
.ds-faq--light .ds-faq__content {
  padding-bottom: var(--ds-space-6);
  color: var(--ds-text-sub);
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn--secondary,
  .ds-btn--tertiary,
  .ds-card--subtle,
  .ds-pricing--light {
    transition: none;
    transform: none;
  }
  .ds-btn--tertiary::after,
  .ds-btn--tertiary::before { transition: none; }
}

/* ============================================================
   STEP RIBBON (縦積みステップフロー)
   ============================================================ */
.ds-steps {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-step {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-5);
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6) var(--ds-space-7);
  box-shadow: var(--ds-shadow-sm);
  position: relative;
}

.ds-step::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 100%;
  width: 2px;
  height: var(--ds-space-4);
  background: var(--ds-border);
}

.ds-step:last-child::before { display: none; }

.ds-step__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-circle);
  background: var(--ds-primary);
  color: var(--ds-text-inverse);
  font-family: var(--ds-font-en);
  font-weight: var(--ds-fw-black);
  font-size: var(--ds-text-h4);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ds-step__body { flex: 1; }

.ds-step__title {
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-1);
  line-height: var(--ds-lh-heading);
}

.ds-step__desc {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-sub);
  margin: 0;
  line-height: var(--ds-lh-body);
}

@media (max-width: 480px) {
  .ds-step {
    padding: var(--ds-space-4);
    gap: var(--ds-space-3);
  }
  .ds-step__num {
    width: 40px;
    height: 40px;
    font-size: var(--ds-text-body);
  }
  .ds-step::before { left: 36px; }
}

/* ============================================================
   CALLOUT (補足・警告・情報ボックス)
   ============================================================ */
.ds-callout {
  display: flex;
  gap: var(--ds-space-4);
  align-items: flex-start;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5) var(--ds-space-6);
  border-left: 4px solid var(--ds-primary);
  background: var(--ds-primary-bg);
}

.ds-callout--warning {
  border-left-color: var(--ds-warning);
  background: var(--ds-warning-bg);
}

.ds-callout--info {
  border-left-color: var(--ds-info);
  background: var(--ds-info-bg);
}

.ds-callout__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-callout__body { flex: 1; }

.ds-callout__heading {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-1);
  line-height: var(--ds-lh-heading);
}

.ds-callout__text {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-sub);
  margin: 0;
  line-height: var(--ds-lh-body);
}

.ds-callout__text a {
  color: var(--ds-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   PROSE ARTICLE (長文記事タイポグラフィ)
   ============================================================ */
.ds-prose {
  font-size: var(--ds-text-body);
  color: var(--ds-text);
  line-height: var(--ds-lh-loose);
  font-family: var(--ds-font-jp);
}

.ds-prose > * + * { margin-top: var(--ds-space-5); }

.ds-prose h2 {
  font-size: var(--ds-text-h3);
  font-weight: var(--ds-fw-black);
  color: var(--ds-text);
  line-height: var(--ds-lh-heading);
  margin-top: var(--ds-space-10);
  margin-bottom: 0;
  padding-bottom: var(--ds-space-2);
  border-bottom: 3px solid var(--ds-primary);
  display: inline-block;
}

.ds-prose h3 {
  font-size: var(--ds-text-h4);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
  line-height: var(--ds-lh-heading);
  margin-top: var(--ds-space-8);
  margin-bottom: 0;
  padding-left: var(--ds-space-3);
  border-left: 4px solid var(--ds-primary);
}

.ds-prose p { margin: 0; color: var(--ds-text-sub); }

.ds-prose ul,
.ds-prose ol {
  padding-left: var(--ds-space-6);
  margin: 0;
  color: var(--ds-text-sub);
}

.ds-prose li + li { margin-top: var(--ds-space-2); }

.ds-prose ul li::marker { color: var(--ds-primary); }

.ds-prose ol li::marker {
  color: var(--ds-primary);
  font-weight: var(--ds-fw-bold);
}

.ds-prose strong {
  font-weight: var(--ds-fw-bold);
  color: var(--ds-text);
}

.ds-prose a {
  color: var(--ds-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ds-prose a:hover { text-decoration-thickness: 2px; }

.ds-prose blockquote {
  margin: 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-primary-bg);
  border-left: 4px solid var(--ds-primary);
  border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
  color: var(--ds-text-sub);
  font-style: normal;
}

.ds-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-sm);
}

.ds-prose th {
  background: var(--ds-gray-100);
  color: var(--ds-text);
  font-weight: var(--ds-fw-bold);
  text-align: left;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border);
}

.ds-prose td {
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  color: var(--ds-text-sub);
  vertical-align: top;
}

.ds-prose tr:nth-child(even) td { background: var(--ds-gray-50); }

/* ============================================================
   FLOATING CTA BAR (固定スクロール追従 CTA)
   JS: assets/js/ds-calculator.js — initFloatingCta()
       scrollY > hero height → .is-visible を付与
   ============================================================ */

.ds-cta--floating {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--ds-z-float);
  background: var(--ds-primary);
  padding: var(--ds-space-3) var(--ds-space-4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-3);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgb(0 0 0 / 0.18);
}

.ds-cta--floating.is-visible {
  transform: translateY(0);
}

.ds-cta--floating--dark {
  background: var(--ds-color-canvas, #0a0f1e);
}

.ds-cta--floating__label {
  color: var(--ds-color-on-primary, #fff);
  font-size: var(--ds-text-sm);
  font-family: var(--ds-font-jp);
  font-weight: var(--ds-fw-medium);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-cta--floating__btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .ds-cta--floating {
    display: none;
  }
}

/* ============================================================
   Trust Badges
   ============================================================ */

.ds-trust-badges {
  padding: var(--ds-space-8) var(--ds-space-4);
}

.ds-trust-badges__heading {
  text-align: center;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-color-muted);
  margin-bottom: var(--ds-space-5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ds-trust-badges--row .ds-trust-badges__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-5) var(--ds-space-7);
}

.ds-trust-badges--grid .ds-trust-badges__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ds-space-5);
  justify-items: center;
}

.ds-trust-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.ds-trust-badges__item:hover { opacity: 1; }

.ds-trust-badges__img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.2s;
}

.ds-trust-badges__item:hover .ds-trust-badges__img { filter: grayscale(0); }

.ds-trust-badges__label {
  font-size: var(--ds-text-xs);
  color: var(--ds-color-muted);
}

/* ============================================================
   Image Banner
   ============================================================ */

.ds-image-banner { overflow: hidden; }

.ds-image-banner--contained {
  padding: var(--ds-space-6) var(--ds-space-4);
}

.ds-image-banner--full { padding: 0; }

.ds-image-banner__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  max-width: var(--ds-content-max, 1200px);
  margin-inline: auto;
}

.ds-image-banner--full .ds-image-banner__figure {
  max-width: 100%;
  border-radius: 0;
}

.ds-image-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ds-image-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, transparent 60%);
}

.ds-image-banner__overlay-text {
  color: var(--ds-color-on-primary, #fff);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-fw-bold);
  font-family: var(--ds-font-jp);
  text-align: center;
  padding: var(--ds-space-4);
}

.ds-image-banner__caption {
  text-align: center;
  font-size: var(--ds-text-xs);
  color: var(--ds-color-muted);
  margin-top: var(--ds-space-2);
  padding: 0 var(--ds-space-4);
}