/* 共通UI：グリッド・カード・ボタン・表・汎用パーツ */



/* grid */
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media (min-width:760px){
  .grid-2{ grid-template-columns:repeat(2, 1fr); }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .grid-4{ grid-template-columns:repeat(4, 1fr); }
}

/* card */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.wf-box{ padding:16px; }

/* band title */
.band-title{
  /* background:var(--brand); */
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.02em;
  display:inline-block;
}
/* .band-title--scene{ background:#f0d66b; color:#111827; } */
.band-title--scene{ color:#f59e0b; }
.band-title--cta{ background:#f59e0b; }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn--primary{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
}

/* wireframe image placeholder */
.wf-img{
  aspect-ratio:16/9;
  background:#e9eef4;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-weight:800;
  overflow:hidden;
  width: 90%;
  margin: auto;
}

.wf-img-2 {
  background:#fff;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  overflow:hidden;
  height: 100%;
}

.wf-img img{ width:100%; height:100%; object-fit:cover; }
.wf-img--sq{ aspect-ratio:1/1; }
.wf-img--43{ aspect-ratio:420 / 430; }

/* feature card */
.featureCard{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.featureCard .cap{
  font-size:12px;
  color:var(--muted);
  margin:6px 0 0;
}

/* compare table */
.tableWrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
}
table{ width:100%; border-collapse:collapse; min-width:200px; }
th, td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  vertical-align:top;
}
th{
  background:#f1f5f9;
  text-align:left;
  font-weight:900;
}
tr:last-child td{ border-bottom:none; }