:root {
  --line:#e5e7eb;
  --ink:#111827;
  --brand:#111827;
  --label-width: 200px; /* ラベル領域の固定幅（必須バッジ含む） */
}

body {
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.7;
  color:var(--ink);
  background:#fafafa;
}

.container {
  width:min(100% - 32px, 720px);
  margin-inline:auto;
  padding:32px 16px;
}

h1 {
  font-size:22px;
  margin-bottom:8px;
}

p { margin:0 0 20px; }

.form {
  margin-top:16px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.field {
  display:flex;
  align-items:center;
  margin-bottom:18px;
}

.label-box {
  width:var(--label-width);
  flex-shrink:0;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
}

.req {
  margin-left:6px;
  background:#fee2e2;
  color:#991b1b;
  padding:2px 6px;
  border-radius:6px;
  font-size:11px;
}

.input-box {
  flex:1;
}

input, select, textarea {
  width:95%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font:inherit;
  background:#fff;
}

textarea {
  resize:vertical;
  min-height:120px;
}

.btn {
  padding:10px 24px;
  border-radius:999px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}

.actions {
  text-align:center;
  margin-top:24px;
}

.checkbox {
  display:flex;
  align-items:center;
  gap:8px;
}

@media (max-width: 600px) {
  .field { flex-direction:column; align-items:flex-start; }
  .label-box { width:100%; margin-bottom:6px; }
  
  input, select, textarea {
  width:130%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font:inherit;
  background:#fff;
}
}