/* Yells 料金ページCSS（claude design styles/pricing.css 由来） */

/* -------- 料金カード -------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; align-items: start; }
.pcard {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 34px 32px; display: flex; flex-direction: column; position: relative;
}
.pcard.feat { border: 2px solid var(--c-primary); box-shadow: var(--sh-md); }
.pcard.feat::before {
  content: "おすすめ"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.pcard .plan { font-family: var(--f-latin); font-weight: 800; font-size: 17px; color: var(--c-dark); letter-spacing: 0.01em; }
.pcard .plan-sub { font-size: 12.5px; color: var(--c-muted); margin-top: 6px; min-height: 34px; }
.pcard .price-line { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 6px; }
.pcard .price-num { font-family: var(--f-jp); font-weight: 900; font-size: 38px; color: var(--c-dark); line-height: 1; letter-spacing: -0.01em; }
.pcard .price-unit { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.pcard .price-quote { font-weight: 800; font-size: 28px; color: var(--c-dark); }
.pcard .pcta { margin: 22px 0 24px; }
.pcard .pcta .btn { width: 100%; justify-content: center; }
.pcard .feat-h { font-size: 12px; font-weight: 700; color: var(--c-muted); letter-spacing: 0.02em; margin-bottom: 14px; }
.pcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pcard li { font-size: 13.5px; color: var(--c-text); line-height: 1.6; display: flex; gap: 11px; align-items: flex-start; }
.pcard li .ck { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c-primary); }
.pcard.feat li .ck { color: var(--c-primary); }

/* -------- 注記・キャンペーン -------- */
.price-note { max-width: 1080px; margin: 32px auto 0; display: flex; gap: 14px; flex-wrap: wrap; }
.price-note .note-pill {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--c-muted);
  background: var(--c-cream); border: 1px solid var(--c-border); border-radius: 999px; padding: 9px 16px;
}
.price-note .note-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex: none; }

.trial-band {
  max-width: 1080px; margin: 44px auto 0; background: var(--c-primary-050); border-radius: var(--r-md);
  padding: 28px 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.trial-band .tb-tag { font-family: var(--f-latin); font-weight: 800; font-size: 13px; color: var(--c-primary); background: #fff; border-radius: 999px; padding: 8px 16px; flex: none; }
.trial-band p { font-size: 14px; color: var(--c-text); line-height: 1.85; flex: 1; min-width: 260px; margin: 0; }
.trial-band p b { color: var(--c-dark); }

/* -------- 機能比較表 -------- */
.cmp-full-wrap { max-width: 980px; margin: 0 auto; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); background: #fff; }
.cmp-full { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-full th, .cmp-full td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--c-border); }
.cmp-full thead th { background: var(--c-cream); font-size: 13px; color: var(--c-dark); font-weight: 800; }
.cmp-full thead th.feat { background: var(--c-primary); color: #fff; }
.cmp-full th[scope="row"] { text-align: left; font-weight: 700; color: var(--c-dark); width: 34%; }
.cmp-full td.has { color: var(--c-primary); }
.cmp-full .ck { width: 20px; height: 20px; color: var(--c-primary); vertical-align: middle; }
.cmp-full span.has { display: inline-flex; align-items: center; justify-content: center; }
.cmp-full td.feat { background: var(--c-primary-050); }
.cmp-full .muted { color: var(--c-muted); font-size: 13px; }
.cmp-full tr:last-child th, .cmp-full tr:last-child td { border-bottom: none; }

/* -------- 全プラン共通で使える機能（チップ） -------- */
.common-feats { max-width: 980px; margin: 40px auto 0; }
.common-feats-h { text-align: center; font-size: 14px; font-weight: 700; color: var(--c-dark); margin: 0 0 18px; }
.common-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.common-chips span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c-dark);
  background: #fff; border: 1px solid var(--c-border); border-radius: 999px; padding: 9px 16px; box-shadow: var(--sh-sm);
}
.common-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); flex: none; }

/* -------- 追加：年払い / 上限注記 / 差別化コピー（料金改定 2026-07） -------- */
.pcard .price-sub { font-size: 12.5px; font-weight: 700; color: var(--c-primary); margin: -2px 0 2px; }
.cmp-full .cmp-note { display: block; font-size: 10.5px; font-weight: 600; color: var(--c-muted); margin-top: 4px; line-height: 1.4; }
.cmp-full td.feat .cmp-note { color: var(--c-primary); }
.pricing-diff { max-width: 980px; margin: 30px auto 0; background: var(--c-primary-050); border: 1px solid var(--c-primary-100); border-radius: var(--r-md); padding: 20px 26px; display: flex; flex-direction: column; gap: 10px; }
.pricing-diff p { margin: 0; font-size: 14px; color: var(--c-dark); line-height: 1.7; font-weight: 700; }
.pricing-diff p b { color: var(--c-primary); }
.pricing-diff p span { font-weight: 500; font-size: 12px; color: var(--c-muted); }

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  .pcard.feat { order: -1; }
}
@media (max-width: 640px) {
  .cmp-full th, .cmp-full td { padding: 12px 10px; font-size: 12.5px; }
  .trial-band { padding: 22px 22px; }
}