/* ClipMail input-page redesign; also preserves styles used by CGI templates */
* { box-sizing: border-box; }
body { margin:0; color:#203149; background:#f4f7fb; font: 16px/1.7 'Hiragino Kaku Gothic ProN',Meiryo,'メイリオ',sans-serif; }
#head { background:linear-gradient(125deg,#073d82,#1160aa); color:#fff; }
#head-in { max-width:900px; margin:auto; padding:32px 22px; }
.eyebrow { font-size:12px; letter-spacing:.15em; color:#bedbfa; font-weight:bold; }
h1 { font-size:clamp(23px,4vw,30px); margin:3px 0; }
#head p { margin:4px 0 0; color:#e1eeff; font-size:14px; }
#body { max-width:900px; margin:30px auto 55px; padding:0 18px; }
.form-card,.privacy { background:white; border:1px solid #e2eaf3; border-radius:12px; padding:30px; box-shadow:0 8px 30px rgba(13,58,110,.06); }
.privacy { margin-top:20px; padding:24px 30px; }
h2 { font-size:20px; color:#083f84; border-left:5px solid #1973bf; padding-left:12px; margin:0 0 16px; }
.intro { margin:0 0 20px; color:#4c5d70; font-size:14px; }
#form { width:100%; border-collapse:collapse; }
#form th,#form td { border-top:1px solid #e2eaf3; padding:18px 12px; vertical-align:top; }
#form th { width:31%; text-align:left; font-weight:600; color:#24456c; background:#f7faff; }
#form td { background:#fff; }
#form input:not([type=file]),#form textarea { display:block; width:100%; min-width:0; padding:11px 12px; border:1px solid #c6d3e3; border-radius:7px; font:inherit; font-size:16px; background:#fff; color:#24384e; }
#form textarea { resize:vertical; }
#form input:focus,#form textarea:focus { outline:2px solid #77b5ed; outline-offset:1px; border-color:#176ab1; }
#form #email2 { margin-top:9px; }
.field-note { font-size:12px; color:#64758a; margin:7px 0; }
.required,.optional { display:inline-block; font-size:11px; line-height:1.5; border-radius:4px; padding:2px 6px; margin-left:8px; vertical-align:middle; }
.required { color:#fff; background:#d94a54; }
.optional { color:#52677d; background:#e6edf4; }
.files { display:grid; gap:12px; }
.files label { display:grid; gap:4px; color:#435a72; font-size:13px; }
.files input { width:100%; max-width:100%; font-size:13px; }
.actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:25px; }
.actions button { border-radius:8px; padding:13px 22px; min-height:48px; font:inherit; font-weight:bold; cursor:pointer; }
.primary { background:#084a94; border:1px solid #084a94; color:white; }
.primary:hover { background:#063b78; }
.secondary { background:white; border:1px solid #b6c7d9; color:#33516f; }
.privacy p { margin:8px 0; font-size:14px; color:#4c5d70; }
/* Existing CGI confirmation/error/thanks template compatibility */
#form-tbl { max-width:100%; }
p.btn input { min-width:110px; min-height:36px; }
p.msg,span.msg { color:#c82836; }
form.back { margin-top:20px; }
@media (max-width:640px) {
 #head-in { padding:24px 18px; }
 #body { margin:18px auto 35px; padding:0 12px; }
 .form-card,.privacy { padding:20px 15px; border-radius:9px; }
 #form,#form tbody,#form tr,#form th,#form td { display:block; width:100%; }
 #form tr { border-top:1px solid #e2eaf3; }
 #form th,#form td { border:0; padding:10px 10px; }
 #form th { padding-top:13px; }
 #form td { padding-bottom:15px; }
 .actions { flex-direction:column; }
 .actions button { width:100%; }
 h2 { font-size:18px; }
}