.contact-form {
  background-color: rgb(var(--color-background));
}

.contact-form__inner {
  margin-inline: auto;
}

.contact-form__group {
  gap: 20px;
}

@media (max-width: 959px) {
  .contact-form__group {
    display: block;
  }
}

.contact-form__title {
  margin-block-end: 30px;
  text-align: center;
}

@media (max-width: 959px) {
  .contact-form__title {
    margin-block-end: 20px;
  }
}

.contact-form .field,
.contact-form .field__label,
.contact-form .field__input {
  font-size: inherit;
}

.contact-form .field__input {
  padding: 1.71em 1.14em 0.71em;
}

.contact-form .field__label {
  inset-inline: 1.14em 0;
}

.contact-form .textarea {
  height: 150px;
  padding-inline: 1.14em;
  margin-block: 1.43em 0.43em;
}

@media (max-width: 959px) {
  .contact-form .textarea {
    height: 100px;
  }
}

.contact-form .textarea + .field__label {
  inset-block-start: 1.79em;
}

.contact-form__button {
  margin-block-start: 40px;
  text-align: center;
}

@media (min-width: 960px) {
  .contact-form__button .button {
    padding-inline: 69px;
  }
}

@media (max-width: 959px) {
  .contact-form__button {
    margin-block-start: 20px;
  }
}

/* --- お問い合わせ種別（select）--- */
.contact-form__type {
  margin-block-end: 20px;
}

@media (max-width: 959px) {
  .contact-form__type {
    margin-block-end: 16px;
  }
}

.contact-form__type-label {
  display: block;
  margin-block-end: 8px;
  font-size: inherit;
  line-height: var(--sort-body-line-height);
  color: rgb(var(--color-text));
}

.contact-form__type-required {
  margin-inline-start: 4px;
  color: rgb(var(--color-text));
  opacity: 0.6;
}

.contact-form__type-field {
  margin-block-end: 0;
}

/* .field__input は浮動ラベル前提の padding のため、select 用に上書き */
.contact-form .contact-form__type-select {
  padding: 1.14em 2.6em 1.14em 1.14em;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--color-text)) 50%),
    linear-gradient(135deg, rgb(var(--color-text)) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 1.3em center, right 0.95em center;
  background-size: 6px 6px, 6px 6px;
}

.contact-form .contact-form__type-select:invalid {
  color: rgb(var(--color-light-text));
}

/* --- 2カラムレイアウト（左：案内文 / 右：フォーム）--- */
/* 案内文が無いテンプレートに置かれた場合は 1カラムのまま（--split が付かない） */
.contact-form__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .contact-form__layout--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
  }
}

.contact-form__intro,
.contact-form__main {
  min-width: 0;
}

.contact-form__intro > *:first-child {
  margin-block-start: 0;
}

/* SHOPLINEのエディタは <link> を <p> で包んでしまい、空段落として高さを持つ。
   左右カラムの先頭位置がズレる原因になるため畳む。 */
.contact-form__intro > p:has(> link) {
  display: none;
}

/* 上記を畳んだあとに残る先頭の空要素も詰める */
.contact-form__intro > p:empty {
  display: none;
}

/* <p>&nbsp;</p> は :empty に該当せず、高さ0でも margin だけ残る。
   本文はすべて .contact-intro-root の中にあるため、その手前の段落は
   エディタが生成した残骸とみなして余白を消す。 */
.contact-form__intro > p:has(~ .contact-intro-root) {
  margin-block: 0;
}

/* 2カラム時はフォーム側の見出しを左寄せ（中央寄せだと不揃いに見えるため） */
@media (min-width: 960px) {
  .contact-form__layout--split .contact-form__title {
    text-align: start;
  }

  /* 左の案内文が長いため、右のフォームをスクロールに追従させる。
     grid + align-items:start が前提（グリッド行の高さ分だけ追従する）。 */
  .contact-form__layout--split .contact-form__main {
    position: sticky;
    inset-block-start: 32px;
  }
}

/* 画面高が足りない環境では追従を解除（フォーム下部が見切れるのを防ぐ） */
@media (min-width: 960px) and (max-height: 700px) {
  .contact-form__layout--split .contact-form__main {
    position: static;
  }
}