/* 自動生成（static/ → wordpress/build_theme.py）。このファイルは直接直さず、static/ を直して作り直す */
/* =========================================================
   EC制作の詳細ページ（ec.html）
   detail.css（LP制作の詳細ページ）の後に読み、違うところだけ上書きする。
   Figma：50_詳細EC_1440 を基準に、1024／768／375／425／320／2560
   ========================================================= */

/* ---------- 01 ページ冒頭：写真 ---------- */
.page-ec .dt-top__bg {
  background-image:
    linear-gradient(rgba(253, 252, 250, 0) calc(100% - 160px), #fdfcfa),
    radial-gradient(ellipse 71.43% 55.56% at 50% 50%, rgba(252, 252, 250, 0.95), rgba(252, 252, 250, 0.88) 60%, rgba(252, 252, 250, 0.6)),
    url("../assets/images/ec_hero.webp");
}

/* ---------- 03 含まれるもの：10項目を左5・右5 ---------- */
.dt-inc__list--10 {
  grid-template-rows: repeat(5, auto);
}

/* ---------- 04 料金プラン ---------- */
/* カード2枚：中（頭・比べる行4つ）を親の5段にそろえる。見本の画像とボタンはない */
.dt-plans--ec {
  grid-template-rows: repeat(5, auto);
}

.dt-plans--ec .dt-pcard {
  grid-row: span 5;
}

.dt-plans--ec .dt-pcard__rows > div:last-child {
  margin-bottom: 28px;
}

/* カードの下の注記（商品登録の数え方） */
.dt-plans__note {
  margin-top: 16px;
  color: var(--navy-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  opacity: 0.75;
}

.page-ec .dt-option {
  margin-top: 40px;
}

/* =========================================================
   768〜1439px：見本の画像がない分、料金の下と最後の行の下を詰める
   ========================================================= */
@media (min-width: 768px) and (max-width: 1439px) {
  .dt-plans--ec .dt-pcard__rows > div:first-child {
    margin-top: 0;
  }

  .dt-plans--ec .dt-pcard__rows > div:last-child {
    margin-bottom: 12px;
  }

  .dt-plans__note {
    font-size: 13px;
  }

  .page-ec .dt-option {
    margin-top: 32px;
  }
}

/* 進め方：説明が2〜3行になるので中央ぞろえ（768px以上は縦並びのステップ） */
@media (min-width: 768px) {
  .page-ec .dt-step__desc {
    text-align: center;
  }
}

/* =========================================================
   スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
  .dt-plans--ec .dt-pcard__rows > div:last-child {
    margin-bottom: 16px;
  }

  .dt-plans__note {
    font-size: 12px;
    line-height: 20px;
  }

  .page-ec .dt-option {
    margin-top: 32px;
  }
}

/* 375〜424px：冒頭の料金と期間の数字は26（300,000が入るように） */
@media (max-width: 424px) {
  .page-ec .dt-fact__num,
  .page-ec .dt-fact:last-child .dt-fact__num,
  .page-ec .dt-fact__value,
  .page-ec .dt-fact:last-child .dt-fact__value {
    font-size: 26px;
  }
}

/* =========================================================
   Figma 320（〜374px）
   ========================================================= */
@media (max-width: 374px) {
  .page-ec .dt-fact__num,
  .page-ec .dt-fact:last-child .dt-fact__num,
  .page-ec .dt-fact__value,
  .page-ec .dt-fact:last-child .dt-fact__value {
    font-size: 20px;
  }

  .dt-plans--ec .dt-pcard__price-value {
    font-size: 18px;
  }

  .dt-plans--ec .dt-pcard__price-value small {
    font-size: 10px;
  }

  /* オプション：タグの左右の余白を詰めて4段に */
  .page-ec .dt-option__tags li {
    padding-inline: 12px;
  }
}