/* 金額は最初の画面に入れる。板のすぐ下に置き、区画の間隔を詰める */
.sec-price { margin-top: 88px; }
/* 初期費用と月額は同じ大きさで並べる。どちらかを小さく見せない */
.price > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; padding: 18px 0; border-top: 1px solid #E2DDD3; }
.price > div:last-child { border-bottom: 1px solid #E2DDD3; }
.price dt { color: #6E5A4E; }
.amount { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.amount .num { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 48px; letter-spacing: 0.01em; line-height: 1.3; margin-right: 4px; }
.amount .tax { font-size: 15px; font-weight: 500; color: #6E5A4E; letter-spacing: 0; }
.price-note { margin-top: 20px; }

/* 含まれるもの：名前を太く、補足を地の色で。記号は付けない */
.inc { margin-top: 32px; border-top: 1px solid #E2DDD3; }
.inc li { padding: 22px 0; border-bottom: 1px solid #E2DDD3; }
.inc .name { display: block; font-size: 17px; font-weight: 700; }
.inc .note { display: block; margin-top: 4px; color: #6E5A4E; }

/* 別途お見積り：含まれるものと混ざらないよう、色面（page.css の .panel）に小さく並べる */
.extra ul { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.extra li { padding-left: 1.2em; text-indent: -1.2em; }
.extra li::before { content: "・"; display: inline-block; width: 1.2em; text-indent: 0; }

.reason p + p { margin-top: 20px; }
.market { padding-bottom: 20px; border-bottom: 1px solid #E2DDD3; }


@media (max-width: 880px) {
  .sec-price { margin-top: 40px; }
  .sec-price h2 { margin-bottom: 16px; }
  .price > div { grid-template-columns: 5.5em minmax(0, 1fr); padding: 14px 0; }
  .amount { font-size: 18px; }
  .amount .num { font-size: 36px; }
  .amount .tax { font-size: 13px; }
  .price-note { margin-top: 14px; }
  .inc { margin-top: 24px; }
  .inc li { padding: 18px 0; }
  .extra ul { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
}
@media (max-width: 360px) {
  .price > div { grid-template-columns: minmax(0, 1fr); }
}