/*
 * フォームのスタイル。公開側と編集画面の両方で読み込む（見た目の定義はここだけ）。
 *
 * 配色と文字組みは、以前のお問い合わせフォーム（マツリカ）に合わせている。
 * 緑の背景の上に明るいカードを敷き、その中に項目を並べる。
 *
 * テーマ側の指定（.supGroup p など）に負けないよう、段落などの要素は
 * .spForm を前に付けて特異度を上げている。
 */

.spForm {
  --sp-form-text: #444;
  --sp-form-muted: #666;
  --sp-form-surface: #f9f9f9;
  --sp-form-input: #fff;
  --sp-form-border: #ddd;
  --sp-form-accent: #00c8a7;
  --sp-form-focus: rgb(0 174 72 / 75%);
  --sp-form-required: #ba0404;
  --sp-form-radius: 4px;

  display: flex;
  flex-direction: column;
  gap: 2em;
  color: var(--sp-form-text);
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

/*
 * 公開側だけ、項目全体をカードに載せる。編集画面ではブロックごとに .spForm が付くので除外し、
 * 代わりに editor.css が本文全体を同じ寸法のカードにする。寸法を変えるときは両方を直すこと。
 */
.spForm:not(.spForm--preview) {
  padding: 48px 100px 40px;
  border-radius: 6px;
  background: var(--sp-form-surface);
}

@media (width <= 767px) {
  .spForm:not(.spForm--preview) {
    padding: 32px 24px 28px;
  }
}

/*------------------------------------------------------------
	項目
------------------------------------------------------------*/

/* 選択系は fieldset、それ以外は div。どちらでも同じ見た目になるよう既定の枠と余白を消す。 */
.spForm .spForm__field {
  --sp-form-field-gap: 6px;

  display: flex;
  flex-direction: column;
  gap: var(--sp-form-field-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* fieldset の legend は flex の gap の対象にならないので、同じ間隔を余白で与える。 */
.spForm fieldset.spForm__field > .spForm__label {
  margin-block-end: var(--sp-form-field-gap);
}

.spForm .spForm__label {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0;
  color: var(--sp-form-text);
  font-size: 1em;
  font-weight: bold;
}

.spForm .spForm__required {
  padding: 0 0.5em;
  background: var(--sp-form-required);
  color: #fff;
  font-size: 0.8em;
  font-weight: normal;
  line-height: 1.8;
}

/*------------------------------------------------------------
	入力欄
------------------------------------------------------------*/

.spForm .spForm__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.6em 0.75em;
  border: 1px solid var(--sp-form-border);
  border-radius: var(--sp-form-radius);
  background: var(--sp-form-input);
  color: var(--sp-form-text);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.spForm .spForm__input::placeholder {
  color: #aaa;
}

.spForm .spForm__input:focus-visible {
  border-color: var(--sp-form-accent);
  outline: 2px solid var(--sp-form-focus);
  outline-offset: 1px;
  box-shadow: 0 0 20px -10px var(--sp-form-focus);
}

.spForm .spForm__input--textarea {
  min-height: 12em;
  resize: vertical;
}

/*------------------------------------------------------------
	選択肢・同意
------------------------------------------------------------*/

.spForm .spForm__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.75em;
}

.spForm .spForm__choice,
.spForm .spForm__consent {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

/* 押しやすいよう少し大きくする。transform で拡大すると周りと重なるので寸法で指定する。 */
.spForm .spForm__choice input,
.spForm .spForm__consent input {
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  accent-color: var(--sp-form-accent);
}

/*
 * 同意文の中のリンク（利用規約など）。
 * 公開側ではテーマの .supGroup a が同じ色を !important で当てている。
 * 編集画面にはテーマが無いので、ここで同じ色を与えて揃える。
 */
.spForm .spForm__consent a {
  color: #337ab7;
  text-decoration: none;
}

.spForm .spForm__consent a:hover {
  text-decoration: underline;
}

/*------------------------------------------------------------
	補足・エラー
------------------------------------------------------------*/

.spForm .spForm__help {
  margin: 0;
  color: var(--sp-form-muted);
  font-size: 0.85em;
}

.spForm .spForm__error {
  margin: 0;
  color: var(--sp-form-required);
  font-size: 0.85em;
}

.spForm .spForm__field.is-error .spForm__input {
  border-color: var(--sp-form-required);
}

.spForm .spForm__summary {
  margin: 0;
  padding: 0.8em 1em;
  border: 1px solid var(--sp-form-required);
  border-radius: var(--sp-form-radius);
  background: #fff;
  color: var(--sp-form-required);
}

.spForm .spForm__status {
  margin: 0;
}

/* 遷移先を決めていないフォームで、送信を受け付けたあとに入力欄の代わりに出す。 */
.spForm .spForm__sent {
  margin: 0;
  font-size: 1.15em;
  text-align: center;
}

/*------------------------------------------------------------
	送信
------------------------------------------------------------*/

.spForm .spForm__submit {
  margin-top: 0.5em;
  text-align: center;
}

.spForm .spForm__button {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75em 0;
  border: 2px solid var(--sp-form-accent);
  border-radius: 999px;
  background: var(--sp-form-accent);
  color: #fff;
  font: inherit;
  font-size: 1.25em;
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
}

.spForm .spForm__button:hover {
  background: transparent;
  color: var(--sp-form-accent);
}

.spForm .spForm__button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}

/*------------------------------------------------------------
	そのほか
------------------------------------------------------------*/

/* ハニーポット。人にも読み上げにも出さないが、自動入力からは見える。 */
.spForm .spForm__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.spForm__notice {
  padding: 1em;
  border: 1px dashed #ccc;
  color: #666;
}