/* ============================================================
   機器レンタル専用（kikiRental.html）
   共通の色・ボタン・ページ見出し・目次・手順・申込みの章は drone-base.css
   ============================================================ */

/* ---------- 貸出機材 ---------- */
.machine-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; margin-top: 2.2rem; padding: 2rem; border: 1px solid var(--drone-line); border-radius: 6px; background: #fff; }
.machine-card__photo { margin: 0; }
.machine-card__photo img { display: block; width: 100%; height: auto; }
.machine-card__maker { margin: 0; color: var(--drone-amber); font-size: .8rem; font-weight: 700; letter-spacing: .12em; }
.machine-card h3 { margin: .2rem 0 .6rem; color: var(--drone-navy); font-size: 1.8rem; line-height: 1.35; }
.machine-card__body > p:not(.machine-card__maker) { margin: 0; }

/* ---------- レンタル料金 ---------- */
.rental-price { margin-top: 2.2rem; }
.rental-price__title { margin: 0 0 .8rem; color: var(--drone-navy); font-size: 1.2rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--drone-line); background: #fff; }
.rental-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.rental-table th, .rental-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--drone-line); text-align: right; white-space: nowrap; }
.rental-table thead th { color: #fff; background: var(--drone-navy); font-size: .88rem; }
.rental-table th:first-child { text-align: left; }
.rental-table tbody th { color: var(--drone-navy); font-weight: 700; white-space: normal; }
.rental-table td { color: var(--drone-navy); font-size: 1.15rem; font-weight: 700; }
.rental-table tbody tr:last-child > * { border-bottom: 0; }
.rental-price__note { margin: .6rem 0 0; font-size: .9rem; }

.battery-box { display: grid; grid-template-columns: auto auto 1fr; gap: .4rem 1.6rem; align-items: baseline; margin-top: 2.2rem; padding: 1.4rem 1.6rem; border-left: 4px solid var(--drone-teal); background: #fff; }
.battery-box h3 { margin: 0; color: var(--drone-navy); font-size: 1.05rem; }
.battery-box__price { margin: 0; color: var(--drone-navy); font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.battery-box p:last-child { margin: 0; font-size: .92rem; }

/* ---------- 申込みから利用まで ---------- */
.step-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beginner-note { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-left: 4px solid var(--drone-amber); background: #fffaf2; }

/* ---------- ご利用上の注意 ---------- */
.caution-list { max-width: var(--reading-width); margin: 1.8rem 0 0; padding-left: 1.2rem; }
.caution-list li + li { margin-top: .6rem; }

/* ---------- タブレット ---------- */
@media (max-width: 1000px) {
  .battery-box { grid-template-columns: auto 1fr; }
  .battery-box p:last-child { grid-column: 1 / -1; }
}

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  .machine-card { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.3rem; }
  .machine-card h3 { font-size: 1.5rem; }
  .step-list--three { grid-template-columns: 1fr; }
  /* 料金表は1機種ずつ縦に並べる。列の見出しは data-label から出す */
  .table-scroll { overflow: visible; }
  .rental-table { min-width: 0; }
  .rental-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rental-table tbody tr { display: block; }
  .rental-table tbody th { display: block; padding: .8rem 1rem; background: #f7faf9; }
  .rental-table td { display: flex; justify-content: space-between; padding: .6rem 1rem; font-size: 1.05rem; }
  .rental-table td::before { content: attr(data-label); color: #5d6d72; font-size: .86rem; font-weight: 700; }
  .rental-table tbody tr:last-child > * { border-bottom: 1px solid var(--drone-line); }
  .rental-table tbody tr:last-child > *:last-child { border-bottom: 0; }
  .battery-box { grid-template-columns: 1fr; padding: 1.2rem; }
}