/* 外部サイト共有フォームメール スタイル（iframe内・中立的で軽量）。 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #333; background: #fff; line-height: 1.7; font-size: 15px;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 32px; }

h1 { font-size: 1.25rem; margin: 0 0 .4em; color: #222; }
.lead { margin: 0 0 1.2em; color: #555; font-size: .92rem; }
.notice { margin: 1.5em 0; padding: 1em; background: #f6f6f6; border-radius: 8px; }

/* フォーム */
.form label { display: block; margin: 0 0 1em; font-size: .9rem; font-weight: 700; color: #333; }
.form .req { display: inline-block; margin-left: .5em; padding: .1em .5em; border-radius: 1em;
  background: #d9482f; color: #fff; font-size: .68rem; font-weight: 700; vertical-align: middle; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
  display: block; width: 100%; margin-top: .4em; padding: .6em .7em;
  border: 1px solid #c7c7c7; border-radius: 6px; font: inherit; color: #222; background: #fff;
}
.form input:focus, .form textarea:focus { outline: none; border-color: #7a7a7a; }
.form textarea { resize: vertical; min-height: 8em; }

/* honeypot（人間には見せない・スクリーンリーダからも隠す） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ボタン */
.btns { margin-top: 1.2em; display: flex; gap: .8em; flex-wrap: wrap; }
button { cursor: pointer; padding: .6em 1.6em; border-radius: 2em; font: inherit; font-size: .92rem; border: 1px solid #888; }
button.primary { background: #333; color: #fff; border-color: #333; }
button.primary:hover { background: #111; }
button.ghost { background: #fff; color: #333; }
button.ghost:hover { background: #f0f0f0; }

/* 確認画面 */
.confirm { margin: 1.2em 0; border-top: 1px solid #e2e2e2; }
.confirm dt { font-weight: 700; font-size: .82rem; color: #666; padding: .8em 0 .1em; }
.confirm dd { margin: 0 0 .2em; padding: 0 0 .8em; border-bottom: 1px solid #e2e2e2; word-break: break-word; }

/* エラー */
.errors { margin: 0 0 1.2em; padding: .8em 1em .8em 2em; background: #fdecea; border: 1px solid #f3b6ae;
  border-radius: 6px; color: #b3271b; font-size: .88rem; }
.errors li { margin: .2em 0; }

@media (max-width: 480px) {
  body { font-size: 14px; }
  .btns { flex-direction: column; }
  button { width: 100%; }
}