@charset "UTF-8";
/*
 * メールフォーム用スタイル（mailform / confirm）
 *
 * メールフォーム関連の CSS はこのファイルに一元化している。
 * （旧 style.css 内に散在していた div.mailform 系ルールを集約。見た目は従来どおり。）
 * functions.php から style.css の後に読み込まれる。
 */

/* 入力欄の状態別スタイル。
   ※ボタン（submit/reset/button）はボタン本来の配色（緑枠＋ホバー時 緑地に白文字）を保つため、
     文字色・背景色の対象から除外する。除外しないと、入力欄用の白/緑がボタンにも当たり、
     ホバー時に「白文字＋淡色背景」で読みづらくなる。 */

/* --- 入力文字を濃くして見やすくする（プレースホルダのグレーは据え置き） --- */
.mailform input:not([type="submit"]):not([type="reset"]):not([type="button"]),
.mailform textarea,
.mailform select,
.confirm input:not([type="submit"]):not([type="reset"]):not([type="button"]),
.confirm textarea,
.confirm select {
  color: #000;
}
.mailform input::placeholder,
.mailform textarea::placeholder,
.confirm input::placeholder,
.confirm textarea::placeholder {
  color: #999;
  opacity: 1; /* Firefox は既定でプレースホルダを半透明にするため明示 */
}

/* 手動入力済み（値あり）の欄 → 淡い緑。未入力（空欄）はグレーのまま。 */
.mailform input:not([type="submit"]):not([type="reset"]):not([type="button"]):not(:placeholder-shown),
.mailform textarea:not(:placeholder-shown),
.confirm input:not([type="submit"]):not([type="reset"]):not([type="button"]):not(:placeholder-shown),
.confirm textarea:not(:placeholder-shown) {
  background-color: #eaf7e6;
}
/* ブラウザの自動入力済みの欄 → 淡い黄（手動入力と区別）。
   ※自動入力の背景はブラウザ依存。Chrome/WebKit は box-shadow で上書き、標準は :autofill で指定。
   手動入力ルールより後に置き、自動入力欄では黄色を優先させる。 */
.mailform input:-webkit-autofill,
.confirm input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #faffbd inset;
          box-shadow: 0 0 0 1000px #faffbd inset;
  -webkit-text-fill-color: #000;
}
.mailform input:autofill,
.confirm input:autofill {
  background-color: #faffbd;
}
/* 入力中（フォーカス）の欄は白でクリーンに。最後に置いて優先させる（ボタンは除外）。 */
.mailform input:not([type="submit"]):not([type="reset"]):not([type="button"]):focus,
.mailform textarea:focus,
.confirm input:not([type="submit"]):not([type="reset"]):not([type="button"]):focus,
.confirm textarea:focus {
  background-color: #fff;
}

/* 送信・リセット・編集ボタン（確認/送信/編集/リセット）。
   入力欄用の白/緑ルールに負けないよう、ボタン専用に高優先度で明示する。
   通常＝緑文字＋白地＋緑枠、ホバー/フォーカス＝緑地＋白文字（くっきり）。 */
.mailform input[type="submit"],
.mailform input[type="reset"],
.mailform input[type="button"],
.confirm input[type="submit"],
.confirm input[type="reset"],
.confirm input[type="button"] {
  color: #68BC07;
  background-color: #fff;
  border: 2px solid #68BC07;
}
.mailform input[type="submit"]:hover,
.mailform input[type="reset"]:hover,
.mailform input[type="button"]:hover,
.mailform input[type="submit"]:focus,
.mailform input[type="reset"]:focus,
.mailform input[type="button"]:focus,
.confirm input[type="submit"]:hover,
.confirm input[type="reset"]:hover,
.confirm input[type="button"]:hover,
.confirm input[type="submit"]:focus,
.confirm input[type="reset"]:focus,
.confirm input[type="button"]:focus {
  color: #fff;
  background-color: #68BC07;
}

/* --- レイアウト・装飾 --- */
div.mailform dt { margin: 0 0 0.5em; }
div.mailform dd { margin: 0 0 2em; }

/* 必須バッジ（オレンジの「必須」ラベル） */
div.mailform .required:after {
  position: relative;
  vertical-align: baseline;
  bottom: 2px;
  content: '必須';
  margin: 0 0 0 0.5rem;
  padding: 3px;
  font-size: 1.1rem;
  font-weight: normal;
  color: #fff;
  background-color: #F37008;
  border-radius: 3px;
}

div.mailform .date { width: 5em; }
div.mailform .zip  { width: 8em; }

/* エラーメッセージ（オレンジ） */
div.mailform .alert { font-size: 1.2rem; color: #F37008; line-height: 1.2; }

div.mailform p         { font-size: 1.2rem; }
div.mailform .disabled { color: #ccc; }
div.mailform-inner     { margin: 0 auto; max-width: 720px; }

div.acception { margin: 4rem 0; text-align: center; }
div.submit    { margin: 4rem 0; text-align: center; }

.form_label      { font-weight: bold; }