/* pages/contact.css
   お問い合わせページ固有（p-contact-）
   骨組みと部品は parts.css（c-page-head / c-split--form / c-choice-list / c-form / c-embed-placeholder / c-note-box）と
   components.css（c-photo-frame）にあり、
   ここには、このページだけの予約カレンダーの仮枠と相談窓口の写真の余白・比率を書く。
   本体（c-split--form を包む l-section）の余白は、l-section--compact（layout.css）で決まる */

/* 予約カレンダーの仮枠（オンライン相談を選んだときだけ出る）。用件の一覧との間をあける */
.p-contact-calendar {
  margin-top: 24px;
}

/* 相談窓口の写真（オフィスのイメージ。人は写っていない）。「直接のご連絡」の箱の下（PC は左の列の下、タブレット・SP はフォームの後の最後）。
   箱に担当者の名前があるので、写真には人を写さない（人が写っていると、担当者の写真に見える）。
   比率は PC（左の列の幅 540px）と SP が 16:9。タブレットは横いっぱいに広がって背が高くなりすぎる（1024px で 540px）ので 5:2 にする。
   写真（3:2）の 5:2 は上下が切れるが、机・柱・観葉植物・ソファのある中央が残る（切り抜く位置は既定の中央のまま） */
.p-contact-photo {
  --photo-ratio: 16 / 9;
  margin-top: 40px;
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .p-contact-photo {
    --photo-ratio: 5 / 2;
  }
}