@charset "utf-8";
/* ==========================================================================
   Project (contact) — 問い合わせページ専用
   ========================================================================== */
@layer project {

  .p-contact { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-16); align-items: start; }
  .p-contact__main { min-width: 0; max-width: var(--width-prose); }

  /* ⛔ この案内を最初に置くのが、このページで最も大事な設計。
     クラウドソーシング経由の方を、必ずそちらの窓口へ戻すため。 */
  .p-contact__notice {
    margin-bottom: var(--space-12);
    padding: var(--space-6);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-accent-surface);
  }
  .p-contact__notice-title { margin-bottom: var(--space-2); font-size: var(--fs-md); font-weight: 700; }
  .p-contact__notice-body { font-size: var(--fs-sm); line-height: var(--lh-compact); }

  .p-contact__aside {
    position: sticky; top: var(--space-16);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    font-size: var(--fs-sm);
  }
  .p-contact__aside-title { margin-bottom: var(--space-4); font-size: var(--fs-md); }
  .p-contact__list { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
  .p-contact__list li { padding-left: 1.2em; text-indent: -1.2em; color: var(--color-text-secondary); line-height: var(--lh-compact); }
  .p-contact__list li::before { content: "・"; color: var(--color-accent); }

  .p-contact__result {
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
  }
  .p-contact__result-title { margin-bottom: var(--space-3); }

  @media (max-width: 899px) {
    .p-contact { grid-template-columns: 1fr; gap: var(--space-12); }
    .p-contact__aside { position: static; }
  }
}