/* 余白：セクション・カード・行の余白と行間を広めにとり、文字が詰まって見えないようにする（参考：NewsPicks 法人プラン）。
   見出しは左寄せ */
body{line-height:2}
p,li,dd{letter-spacing:.03em}

/* セクション：上下の余白を大きく、見出しは中央 */
section{padding-block:168px}
main>section{--pt:196px;padding-top:var(--pt)}
main>section#flow{padding-top:calc(var(--pt) - 168px)}
main>section#samples{padding-top:20px}
.hero{padding-block:120px 176px}

/* 02 実装サンプル */
.samples{gap:40px}
.s-body{padding:32px 36px 28px;gap:20px}
.spec div{padding:14px 22px 12px}
.fine{margin-top:40px}

/* 03 お悩み */
.pains{gap:36px 72px}

/* 04 特徴 */
.features{gap:40px}
.feature .ed{padding:92px 36px 44px;gap:16px}
.feature h3{padding-bottom:20px;margin-bottom:8px}
.feature p{line-height:2}
.sub-head{margin-top:128px;margin-bottom:40px}
.sub-features{gap:24px}
.subf{padding:32px 32px 36px;row-gap:18px}

/* 05 対応範囲 */
.scope{gap:40px}
.scope-col{padding:48px 48px 40px}
.scope-col.opt{padding:50px 50px 42px}
.scope-col h3{margin-bottom:32px}
.scope-col li{padding:20px 0}

/* 06 料金 */
.price-grid{gap:40px}
.price-table .cap{padding:28px 36px}
.price-table td{padding:26px 36px}
.price-table .incl{padding:22px 36px}
.price-side{gap:20px}
.price-card{padding:32px 36px;gap:10px}
.notes{margin-top:4px;gap:6px}
.center-cta{margin-top:80px}

/* 07 流れ */
.flow li{padding-bottom:64px;row-gap:12px}

/* 08 FAQ */
.faq summary{padding:36px 56px 36px 0}
.faq .a{padding:0 56px 40px 40px;line-height:2.1}

/* 09 お問い合わせ */
.contact .wrap{gap:96px}
.contact .intro{gap:28px}
.topics li{padding:18px 0}
.form-area{padding:56px}
form{gap:30px}


@media (max-width:720px){
  section{padding-block:104px}
  .sec-head{margin-bottom:56px}
  :is(.s-body,.scope-col,.form-area){padding:28px 24px}
  .scope-col.opt{padding:30px 26px}
  .feature .ed{padding:80px 24px 28px}
}
.sec-head{margin-bottom:88px}
.solve{margin-top:88px}
.flow-note{margin-top:56px}
/* SP：上下の余白と見出し上の余白を詰める（このファイルが最後に読み込まれるので、ここで上書きする） */
@media (max-width:720px){
  section{padding-block:64px}
  .hero{padding-block:36px 72px}
  main>section{--pt:64px}
  main>section#samples{padding-top:8px}
  main>section#flow{padding-top:16px}
  .sec-head{margin-bottom:36px}
  #contact{padding-bottom:40px}
  .contact .wrap{gap:36px}
  form{gap:22px}
  .center-cta{margin-top:40px}
  .solve{margin-top:48px}
  .flow-note{margin-top:36px}
  .price-card{padding:24px 20px;gap:8px}
  /* 料金：注記の上下の余白 */
  .price-grid{gap:12px}
  .price-side{margin-top:20px}
  .notes{margin-top:0}
  .faq summary{padding:20px 40px 20px 0}
  .faq .a{padding:0 0 22px 28px;line-height:1.9}
}
/* ページ内リンクの着地位置をそろえる：上の余白を詰めているサンプル・流れは、詰めた分だけ手前で止める */
main>section#samples{scroll-margin-top:calc(var(--pt) - 20px)}
main>section#flow{scroll-margin-top:168px}
@media (max-width:720px){
  main>section#samples{scroll-margin-top:calc(var(--pt) - 8px)}
  main>section#flow{scroll-margin-top:calc(var(--pt) - 16px)}
}