@charset "UTF-8";
/* REBRU KIT ページ固有スタイル（共通 site.css の後に読む） */
.rk-hero { background: #1b1613; color: #fff; }
.rk-hero__inner { max-width: 1000px; margin: 0 auto; padding: 48px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; align-items: center; }
.rk-hero img { width: 100%; height: auto; }
.rk-hero .t1 { display: block; font-family: var(--sl-font-latin); font-size: 15px; letter-spacing: .14em; color: #d9d2cc; }
.rk-hero h1 { margin: 6px 0 12px; font-family: var(--sl-font-latin); font-size: 32px; font-weight: 800; line-height: 1.15; color: #4cd6e0; }
.rk-hero p { margin: 0; font-size: 15px; color: #e8e2dc; }
.rk-lead { text-align: center; font-size: 17px; line-height: 2; font-weight: 500; text-wrap: balance; }
.rk-contents { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; }
.rk-contents li { padding: 6px 14px; border: 1px solid var(--sl-line); border-radius: 999px; font-size: 13px; }
.rk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: st; }
.rk-steps li { counter-increment: st; display: grid; grid-template-columns: 300px 1fr; gap: 20px 32px; align-items: center; }
.rk-steps img { width: 100%; height: auto; border: 1px solid var(--sl-line); border-radius: 6px; }
.rk-steps h3 { margin: 0 0 8px; font-family: var(--sl-font-latin); font-size: 18px; font-weight: 700; letter-spacing: .12em; }
.rk-steps h3::before { content: "STEP " counter(st) "."; }
.rk-steps p { margin: 0; font-size: 15px; }
@media screen and (max-width: 672px) {
  .rk-hero__inner { grid-template-columns: 1fr; padding: 32px 20px; }
  .rk-hero h1 { font-size: 26px; }
  .rk-steps li { grid-template-columns: 1fr; }
  .rk-lead { font-size: 15px; }
}