/* ============================================================
   ページ見出し
   ============================================================ */
.ct-head {
  padding: 44px 0 36px;
  border-bottom: 1px solid var(--paper-line);
  background:
    linear-gradient(0deg, rgba(13,56,104,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,56,104,.05) 1px, transparent 1px),
    var(--paper);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.ct-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--steel);
}
.ct-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--correction); display: block; }
.ct-title {
  margin: 0 0 14px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(27px, 7vw, 40px); line-height: 1.5; letter-spacing: .03em;
  color: var(--ink);
}
.ct-lead { margin: 0; max-width: 40em; font-size: 15px; color: var(--steel); }

/* ============================================================
   本体
   ============================================================ */
.ct-main { padding: 32px 0 56px; background: var(--paper); }
.ct-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.ct-aside { order: 2; }
.ct-formwrap { order: 1; }

.ct-form {
  background: #fff;
  border: 1px solid var(--paper-line);
  padding: 24px 18px 28px;
}

.form-row { margin-bottom: 22px; }
.form-label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.req {
  padding: 1px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.7;
  color: #fff; background: var(--correction);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  display: block; width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink);
  background: #fff;
  border: 1px solid #b9c6d3; border-radius: 2px;
  -webkit-appearance: none; appearance: none;
}
.form-row select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steel) 50%),
    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-row textarea { min-height: 200px; resize: vertical; }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(13,56,104,.16);
}

.form-help { margin: 6px 0 0; font-size: 13px; color: var(--steel); }

/* エラー表示（Djangoのerrorlistにも対応） */
.form-row.has-error input[type], .form-row.has-error select, .form-row.has-error textarea { border-color: var(--correction); }
.form-error,
.errorlist { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--correction); }
.errorlist.nonfield { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--correction); background: #fbefeb; }
.form-messages { margin: 0 0 18px; padding: 12px 16px; list-style: none; border: 1px solid #b9c6d3; background: #fff; font-size: 14px; }

.ct-privacy { margin: 4px 0 20px; font-size: 13px; color: var(--steel); }
.ct-privacy a { color: var(--blueprint); }

.ct-submit { display: flex; flex-direction: column; gap: 12px; }
.ct-submit .button { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.ct-submit__note { margin: 0; font-size: 13px; color: var(--steel); }

/* 左（PCでは左）の補足 */
.ct-aside h2 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(19px, 4.6vw, 22px); letter-spacing: .03em; }
.ct-topics { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid #c7d2dd; }
.ct-topics li { padding: 13px 0; border-bottom: 1px solid var(--paper-line); font-size: 15px; }
.ct-aside__note { margin: 0; max-width: 28em; font-size: 14px; color: var(--steel); }

/* ============================================================
   モバイル（〜460px）
   ============================================================ */
@media screen and (max-width: 460px) {
  .ct-form { margin-inline: -4px; padding: 22px 16px 26px; }
}

/* ============================================================
   タブレット（461px〜1023px）
   ============================================================ */
@media screen and (min-width: 461px) and (max-width: 1023px) {
  .ct-head { padding: 52px 0 40px; }
  .ct-grid { max-width: 720px; }
  .ct-form { padding: 32px 32px 36px; }
  .ct-submit { flex-direction: row; align-items: center; gap: 20px; }
  .ct-submit .button { width: auto; min-width: 220px; }
}

/* ============================================================
   PC（1024px〜）：左に補足、右にフォーム
   ============================================================ */
@media screen and (min-width: 1024px) {
  .ct-head { padding: 64px 0 52px; }
  .ct-main { padding: 56px 0 88px; }
  .ct-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .ct-aside { order: 1; position: sticky; top: 96px; }
  .ct-formwrap { order: 2; }
  .ct-form { padding: 40px 44px 44px; }
  .ct-submit { flex-direction: row; align-items: center; gap: 22px; }
  .ct-submit .button { width: auto; min-width: 240px; }
}