/* ==========================================================================
   MarlSystem — お問い合わせフォーム（BSD Form）
   お問い合わせページ（page-contact.php）でのみ読み込む。
   すべて .ms-contact-form 配下に限定し、BSD Form 付属CSS（public.css）の後に読み込む。
   配色・フォントは既存の変数（--ink / --paper / --brass / --line / --sans / --serif）を使用し、
   元の静的フォーム（.form-row）の見た目を基準にしている。
   ========================================================================== */

.ms-contact-form{
  --ms-error: #a53e2c;
  --ms-error-bg: #f6e9e1;

  max-width: 640px;
  margin: 40px auto 0;
  text-align: left;
}

/* ---------- 機能に必要な非表示（付属CSSをOFFにしても維持するための保険） ---------- */
.ms-contact-form .bsd-form__honeypot,
.ms-contact-form .bsd-form__hidden{ display: none !important; }
.ms-contact-form .bsd-form__back-form{ display: none; }
.ms-contact-form .bsd-form__sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ボタン内の矢印用の空要素は使わない */
.ms-contact-form .c-button__arrow{ display: none; }

/* ---------- 入力画面：全体 ---------- */
.ms-contact-form .bsd-form__form{
  display: grid;
  row-gap: 32px;
}
.ms-contact-form .bsd-form__field{ margin: 0; min-width: 0; }

/* ---------- ラベル・必須／任意 ---------- */
.ms-contact-form .bsd-form__label{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--paper-dim);
}
.ms-contact-form .bsd-form__required,
.ms-contact-form .bsd-form__optional{
  display: inline-block;
  margin: 0;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.7;
  vertical-align: middle;
}
.ms-contact-form .bsd-form__required{
  color: var(--ink);
  background: var(--brass);
  border: 1px solid var(--brass);
}
.ms-contact-form .bsd-form__optional{
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--line);
}

/* ---------- 説明文 ---------- */
.ms-contact-form .bsd-form__description{
  margin: -2px 0 10px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .03em;
  color: var(--paper-dim);
}
.ms-contact-form .bsd-form__description-link{
  color: var(--brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .3s var(--ease);
}
.ms-contact-form .bsd-form__description-link:hover{ color: var(--brass-bright); }

/* ---------- 入力欄・セレクト・テキストエリア ---------- */
.ms-contact-form .bsd-form__control{
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--paper);
  background-color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ms-contact-form .bsd-form__control::placeholder{
  color: var(--paper-dim);
  opacity: .6;
}
.ms-contact-form .bsd-form__control:hover{ border-color: #d6cab3; }
.ms-contact-form .bsd-form__control:focus{
  outline: none;
  border-color: var(--brass);
  background-color: var(--ink);
}

.ms-contact-form .bsd-form__select{
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236f6754' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

.ms-contact-form .bsd-form__textarea{
  min-height: 180px;
  resize: vertical;
}
/* 文字数カウンター（BSD Form の JavaScript が追加） */
.ms-contact-form .bsd-form__char-count{
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .05em;
  text-align: right;
  color: var(--paper-dim);
}
.ms-contact-form .bsd-form__char-count--over{ color: var(--ms-error); }

/* ---------- 同意チェックボックス ---------- */
.ms-contact-form .bsd-form__checkbox-wrap{
  padding: 18px 20px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.ms-contact-form .bsd-form__checkbox{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper);
  cursor: pointer;
}
.ms-contact-form .bsd-form__checkbox input[type="checkbox"]{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brass);
  cursor: pointer;
}
.ms-contact-form .bsd-form__checkbox-label{ line-height: 1.7; }

/* ---------- エラー・警告 ---------- */
.ms-contact-form .bsd-form__error{
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--ms-error);
}
.ms-contact-form .bsd-form__field--error .bsd-form__control,
.ms-contact-form .bsd-form__field--error .bsd-form__checkbox-wrap{
  border-color: var(--ms-error);
}
.ms-contact-form .bsd-form__field--error .bsd-form__control:focus{
  border-color: var(--ms-error);
  outline: none;
}
.ms-contact-form .bsd-form__field--warning .bsd-form__control{ border-color: var(--brass-bright); }

.ms-contact-form .bsd-form__error-summary,
.ms-contact-form .bsd-form__mail-error{
  margin: 0 0 36px;
  padding: 20px 24px;
  color: var(--ms-error);
  background: var(--ms-error-bg);
  border: 1px solid var(--ms-error);
}
.ms-contact-form .bsd-form__error-summary-heading{
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .05em;
}
.ms-contact-form .bsd-form__error-list{
  margin: 0;
  padding-left: 1.3em;
  font-size: 13px;
  line-height: 1.9;
}
.ms-contact-form .bsd-form__error-list li{ margin: 0; }
.ms-contact-form .bsd-form__error-list a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.ms-contact-form .bsd-form__mail-error-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

.ms-contact-form .bsd-form__warning-summary{
  margin: 0 0 36px;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--brass-bright);
}

/* ---------- ボタン（既存の .btn.primary に合わせる） ---------- */
.ms-contact-form .bsd-form__actions{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 8px 0 0;
}
.ms-contact-form .bsd-form__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 54px;
  margin: 0;
  padding: 15px 32px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--ink);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 0;
  opacity: 1;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ms-contact-form .bsd-form__button:hover{
  opacity: 1;
  color: var(--ink);
  background: var(--brass-bright);
  border-color: var(--brass-bright);
}
.ms-contact-form .bsd-form__button:focus{ outline: none; }
.ms-contact-form .bsd-form__button:focus-visible{
  outline: 1px solid var(--brass-bright);
  outline-offset: 3px;
}
/* 確認画面「入力内容を修正する」：控えめな枠線ボタン（既存の .btn と同じ） */
.ms-contact-form .bsd-form__button--back{
  color: var(--paper);
  background: transparent;
  border-color: var(--line);
}
.ms-contact-form .bsd-form__button--back:hover{
  color: var(--brass-bright);
  background: transparent;
  border-color: var(--brass);
}
/* 送信中（BSD Form の JavaScript が付与） */
.ms-contact-form .bsd-form__button--submitting,
.ms-contact-form .bsd-form__button:disabled{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- 確認画面 ---------- */
.ms-contact-form .bsd-form--confirm .bsd-form__summary{ margin: 0 0 40px; }
.ms-contact-form .bsd-form__summary:focus{ outline: none; }
.ms-contact-form .bsd-form__confirm-notice{
  margin: 0 0 32px;
  text-align: center;
}
.ms-contact-form .bsd-form__confirm-notice-heading{
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.6;
  letter-spacing: .05em;
}
.ms-contact-form .bsd-form__confirm-notice-body{
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--paper-dim);
}
.ms-contact-form .bsd-form__summary-list{
  margin: 0;
  border-top: 1px solid var(--line);
}
.ms-contact-form .bsd-form__summary-row{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 28px;
  margin: 0;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.ms-contact-form .bsd-form__summary-term{
  width: auto;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.8;
  color: var(--paper-dim);
}
.ms-contact-form .bsd-form__summary-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--paper);
  /* テンプレートの字下げを表示しない（改行は <br> で表示される） */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- 完了画面 ---------- */
.ms-contact-form .bsd-form--complete .bsd-form__complete{
  padding: clamp(44px, 7vw, 64px) clamp(20px, 5vw, 48px);
  text-align: center;
  line-height: 2;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.ms-contact-form .bsd-form__complete:focus{ outline: none; }
.ms-contact-form .bsd-form__complete-icon{
  display: inline-block;
  color: var(--brass);
}
.ms-contact-form .bsd-form__complete-icon svg{
  display: block;
  width: 48px;
  height: 48px;
}
.ms-contact-form .bsd-form__complete-title{
  margin: 18px 0 16px;
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.6;
}
.ms-contact-form .bsd-form__complete-body{
  font-size: 15px;
  line-height: 2;
}
.ms-contact-form .bsd-form__complete-mail-note,
.ms-contact-form .bsd-form__reply-note{
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--paper-dim);
}

/* ---------- フォームを表示できない場合 ---------- */
.ms-contact-form .bsd-form__not-found,
.ms-contact-form__unavailable{
  margin: 0;
  padding: 28px 24px;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
  color: var(--paper-dim);
  background: var(--ink-2);
  border: 1px solid var(--line);
}

/* ---------- スマートフォン ---------- */
@media (max-width: 640px){
  .ms-contact-form .bsd-form__form{ row-gap: 28px; }
  /* iOS で入力時に画面が拡大されないよう 16px にする */
  .ms-contact-form .bsd-form__control{ font-size: 16px; }
  .ms-contact-form .bsd-form__checkbox-wrap{ padding: 16px; }
  .ms-contact-form .bsd-form__actions{
    flex-direction: column-reverse; /* 確認画面では「送信する」を上に表示 */
    align-items: stretch;
    gap: 12px;
  }
  .ms-contact-form .bsd-form__button{
    width: 100%;
    min-width: 0;
  }
  .ms-contact-form .bsd-form__summary-row{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 16px 2px;
  }
  .ms-contact-form .bsd-form__error-summary,
  .ms-contact-form .bsd-form__mail-error{ padding: 18px; }
}