@charset "UTF-8";
/* ==========================================================================
   contact.css — お問い合わせ（contact.html）
   読み込み順：normalize.css → bootstrap.min.css → common.css → contact.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ページ枠・連絡先カード
   -------------------------------------------------------------------------- */
.contact{padding-block:22px 40px}

.contact-info{--bs-gutter-y:var(--gap)}
.contact-info__card{
  height:100%;
  padding:18px 18px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .2s var(--ease);
}
.contact-info__card:hover{border-color:var(--line-strong)}
.contact-info__icon{font-size:26px;margin-bottom:10px;color:var(--brand)}
.contact-info__label{font-size:11.5px;font-weight:700;color:var(--muted)}
.contact-info__value{margin-top:4px;font-size:16px;font-weight:700;line-height:1.4;color:var(--navy)}
.contact-info__value a{color:inherit;transition:color .16s var(--ease)}
.contact-info__value a:hover{color:var(--cta)}
.contact-info__note{margin-top:7px;font-size:11.5px;line-height:1.7;color:var(--muted)}

.contact-note{
  margin-top:14px;
  padding:12px 15px;
  border-radius:var(--radius);
  background:var(--bg);
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   2. お問い合わせフォーム
   -------------------------------------------------------------------------- */
.contact-form{
  max-width:760px;
  margin:24px auto 0;
  padding:24px 26px 26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.contact-form__title{font-size:17px;font-weight:700;color:var(--navy)}
.contact-form__lead{margin-top:6px;font-size:11.5px;color:var(--muted)}
.contact-form__required-note{color:var(--red);font-weight:700}
.contact-form__form{margin-top:18px}

.cf-field + .cf-field{margin-top:14px}
/* 氏名の2カラム（各カラム内は個別の .cf-field） */
.cf-row{margin-bottom:14px}
.cf-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  font-size:12.5px;
  font-weight:700;
  color:var(--navy);
}
.cf-required{
  padding:1px 6px;
  border-radius:3px;
  background:#fdeceb;
  color:var(--red);
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}
.cf-input{
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink);
  font-size:13px;
  font-family:inherit;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.cf-input--area{height:auto;min-height:150px;padding:11px 12px;line-height:1.8;resize:vertical}
.cf-input::placeholder{color:#b6c4d3}
.cf-input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.14)}
.cf-input[aria-invalid="true"]{border-color:var(--red);background:#fffafa}
.cf-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(224,93,87,.16)}

.cf-error{margin-top:5px;font-size:11.5px;line-height:1.6;color:var(--red)}

/* --------------------------------------------------------------------------
   3. 送信ボタン・ステータス
   -------------------------------------------------------------------------- */
.contact-form__actions{display:flex;justify-content:center;margin-top:22px}
.contact-form__submit{min-width:230px;padding-block:11px}

.contact-form__status{
  --bs-alert-padding-y:12px;
  --bs-alert-padding-x:15px;
  --bs-alert-margin-bottom:0;
  --bs-alert-bg:#eafaf1;
  --bs-alert-border-color:#c6ead6;
  --bs-alert-color:#1b7a4b;
  --bs-alert-border-radius:var(--radius);
  margin-top:14px;
  font-size:12.5px;
  font-weight:600;
  text-align:center;
}

/* --------------------------------------------------------------------------
   4. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:767.98px){
  .contact-form{padding:18px 16px 20px}
  .contact-form__submit{width:100%;min-width:0}
}