/* ==========================================================================
   お問い合わせのページだけの CSS（キャンバス案E v51 の ContactE。/contact/）
   --------------------------------------------------------------------------
   このページでだけ読む（inc/assets.php の planart_page_styles() の 'contact'。style.css・assets/css/forms.css のあと）。
   色・余白・角丸・影はトークンだけを使う（verify_site.py が見張る）。

   ■ ここにある物
     1. フォームと右の3枚の2つの列（キャンバスの section[aria-label="お問い合わせフォーム"] > div）
     2. 右の3枚（parts/contact-aside.php。お電話・返信の目安・所在地）
     ほかの段は共通の部品のまま：ヒーロー（型5）＝style.css 22章／送ったあとの流れ＝7章・24章（cards）。
     フォームそのものの見た目は assets/css/forms.css（費用の目安のページでも同じ物を使う）。

   ■ トークンは style.css の 0章（2026-11-03 まとめで、このファイルの :root から移した。名前はそのまま）。
   ========================================================================== */

/* ==========================================================================
   1. フォームと右の3枚の2つの列（フォームは 560px から・右は 300px から。入らなければ右がフォームの下へ）
   ========================================================================== */
.p-contact-layout {
  max-width: var(--w-container);
  margin: 0 auto;
  padding-inline: var(--sp-inline);
  padding-block: var(--sp-section-md);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-40) var(--sp-contact-cols);
}

.p-contact-layout__main {
  flex: 3 1 560px;
  min-width: 0;
}

/* ==========================================================================
   2. 右の3枚（PC ではスクロールしてもついてくる。キャンバスの .pe-sticky。幅 760px 以下はついてこない）
   ========================================================================== */
.p-contact-aside {
  position: sticky;
  top: calc(var(--admin-bar-h) + var(--sticky-top));
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

@container (max-width: 760px) {
  .p-contact-aside {
    position: static;
  }
}

.p-contact-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--sp-contact-card);
  border-radius: var(--r-card-md);
  background: var(--c-surface);
}

.p-contact-card--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.p-contact-card__label {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
}

.p-contact-card--dark .p-contact-card__label,
.p-contact-card__note {
  color: var(--c-on-dark-sub);
}

.p-contact-card__note {
  font-size: 14px;
  line-height: 1.7;
}

.p-contact-card__big {
  color: var(--c-ink);
  font-size: var(--fs-contact-big);
  line-height: 1.3;
  font-weight: 700;
  font-feature-settings: 'palt';
}

.p-contact-card__big--tel {
  color: var(--c-on-dark);
  letter-spacing: 0.02em;
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
}

/* 電話の数字は押せるので、行の高さを変えずに、押せる所を上下に 6px ずつ広げる（幅の狭い画面でも 44px 以上） */
.p-contact-card__tel {
  display: inline-block;
  padding-block: var(--s-6);
  margin-block: calc(-1 * var(--s-6));
  color: var(--c-on-dark);
}

.p-contact-card__title {
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
}

.p-contact-card__text {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.8;
}