/* ぱんだのメルマガ 登録ページ専用スタイル */
:root {
  --sea: #e9f1f0;        /* 背景: 日本と東南アジアの間の海の色をうすく */
  --paper: #ffffff;
  --ink: #1c2b36;
  --muted: #5f6f78;
  --line: #d6e3e0;
  --accent: #ff5722;     /* Shopee のオレンジ（サイト共通 --main） */
  --accent-dark: #e64a19;
  --airmail-red: #d94b3d;
  --airmail-blue: #2f5aa8;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--sea);
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px; line-height: 1.8;
  display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; min-width: 0; }
.card {
  width: 100%; max-width: 460px; min-width: 0; overflow-wrap: anywhere; background: var(--paper); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(28, 43, 54, .08); overflow: hidden;
  animation: rise .5s ease-out both;
}
/* 署名要素: エアメール封筒の縁。国際配送とメールの両方を表す */
.airmail {
  height: 8px;
  background: repeating-linear-gradient(135deg, var(--airmail-red) 0 14px, #fff 14px 26px, var(--airmail-blue) 26px 40px, #fff 40px 52px);
}
.inner { padding: 36px 32px 28px; }
.eyebrow { margin: 0 0 22px; font-size: .78rem; letter-spacing: .14em; color: var(--muted); }
h1 {
  margin: 0 0 14px; font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 700; font-size: 1.7rem; line-height: 1.45; letter-spacing: .01em; word-break: keep-all;
}
.lead { margin: 0 0 24px; color: var(--muted); font-size: .95rem; }
.lead strong { color: var(--ink); font-weight: 600; }
.section { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: .95rem; font-weight: 700; }
.field { margin-bottom: 14px; }
.field label .req { margin-left: 8px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--airmail-red); padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--muted); margin-left: 6px; }
.field input[type=email], .field input[type=text] {
  width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fbfdfd; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,43,54,.08); }
.field.invalid input { border-color: var(--airmail-red); }
.error { display: none; margin: 6px 0 0; font-size: .82rem; color: var(--airmail-red); }
.field.invalid .error { display: block; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); cursor: pointer; }
.agree input { margin-top: 5px; accent-color: var(--ink); }
.agree a { color: var(--ink); }
.btn {
  display: block; width: 100%; margin-top: 20px; padding: 15px 16px; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: background .15s, transform .1s;
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.after { margin: 14px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.steps { margin: 18px 0 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 12px; margin-bottom: 12px; font-size: .95rem; }
.steps .n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--sea); color: var(--ink); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.sub { margin: 18px 0 0; font-size: .85rem; color: var(--muted); }
.sub a { color: var(--ink); }
.btn-secondary { text-align: center; text-decoration: none; margin-top: 24px; background: transparent; color: var(--ink); border: 1.5px solid var(--line); font-weight: 600; }
.btn-secondary:hover { background: var(--sea); }
footer { text-align: center; padding: 16px; font-size: .74rem; color: var(--muted); }
footer a { color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
@media (max-width: 480px) { .inner { padding: 28px 22px 22px; } h1 { font-size: 1.45rem; } }