/* =====================================================================
   ハイライト式の部品 ― レンタルの予約のページ（試作の枠）（予約担当）【lisas atelier・★レンタル1】
   sections/booking/rental-page/style.css
   - 見出しは base.css の .sec-head・.sec-title、外側の囲みは .card .card--soft（design.md 23. 案内担当と同じ：
     プラグインの画面は外側の囲みだけ .card--soft にして、プラグインの中の色は変えない）。
   - ここには base.css にない並べ方だけを書く。部品の中だけのクラスは頭に rental-page- を付ける。
   - 値は tokens.css の変数だけ（design.md「共通ルール」）。
   ===================================================================== */

/* プラグインの画面が入る所。幅は --w-main まで（プラグインの中の並べ方はプラグインのまま） */
.rental-page-plugin {
  max-width: var(--w-main);
  margin-inline: auto;
}

/* 〔試作だけ〕の枠の文（本番ではプラグインの画面に置きかわる）。写真がない枠と同じく、点線の無地の枠 */
.rental-page-frame {
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: center;
}

/* トップへ戻る */
.rental-page-back {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}