:root{
  --ink:#111827;
  --ink-soft:#4b5563;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;

  --accent:#dc2626;       /* 濃い赤 */
  --accent-deep:#991b1b;
  --accent-soft:#fff1f2;

  --ok:#16a34a;
  --warn:#b45309;

  --radius:14px;
  --radius-lg:22px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --font:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(220,38,38,.08), transparent 60%),
    radial-gradient(900px 400px at 90% -10%, rgba(220,38,38,.06), transparent 60%),
    var(--bg);
}

.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 14px 40px;
}

.page-header{
  margin-bottom: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-mark{
  width:46px; height:46px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow: 0 8px 18px rgba(153,27,27,.25);
}

.brand-tag{
  margin:0 0 2px;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing:.04em;
}

.brand-name{
  margin:0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing:.04em;
}

.page-lead{
  margin:10px 0 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 22px 26px;
  margin-bottom: 18px;
}

.card-head{
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eef2f7;
}

.card-title{
  margin:0 0 4px;
  font-size: 20px;
  font-weight: 900;
}

.card-sub{
  margin:0;
  font-size: 13px;
  color: var(--ink-soft);
}

.form{
  display:grid;
  gap: 16px;
}

.field{
  display:grid;
  gap: 6px;
}

.label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 14.5px;
}

.label-small{
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* 必須マークを目立たせる */
.req{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px 1px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.06em;
  color:#fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(153,27,27,.28);
}

input, textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
  outline: none;
}

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

input:focus, textarea:focus{
  border-color: rgba(220,38,38,.45);
  box-shadow: 0 0 0 4px rgba(220,38,38,.10);
}

.help{
  margin:0;
  font-size: 11.5px;
  color: #6b7280;
}

/* エラー表示（同じページで赤文字） */
.err{
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #b91c1c;
  min-height: 1.2em;
}

.is-invalid{
  border-color: #ef4444 !important;
  background: #fff5f5;
}

/* ラジオ */
.radio-row{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.radio{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #f3f4f6;
  background: #fafafa;
}
.radio input{ width:auto; }

/* 住所 */
.field-address{
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(220,38,38,.05), transparent 40%),
    #fff;
  border: 1px solid #f3f4f6;
}

.zip-row{
  display:flex;
  gap: 8px;
  align-items:center;
}
.zip-row input{
  max-width: 220px;
}

.address-grid{
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}

/* アップロード */
.upload-box{
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fcfcfd;
  display:grid;
  gap: 10px;
}


.upload-meta{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pill{
  display:inline-flex;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
}

.upload-msg{
  margin: 0;
  font-size: 11.5px;
  color: #6b7280;
}

.upload-errors{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 6px;
}
.upload-errors li{
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #7f1d1d;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
}

/* サムネ */
.thumbs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.thumb{
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid #eee;
  overflow: hidden;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* 同意 */
.field-consent{
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid #ffe4e6;
}
.checkbox{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 13.5px;
}
.checkbox input{ width:auto; }

/* ボタン */
.actions{
  margin-top: 6px;
  display:grid;
  gap: 8px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing:.04em;
  cursor:pointer;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  padding: 12px 22px;
  font-size: 15px;
}

.btn-primary{
  color:#fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 28px rgba(153,27,27,.35);
}
.btn-primary:hover{
  opacity:.95;
  transform: translateY(1px);
}

.btn-outline{
  background: #fff;
  border-color: #e5e7eb;
  color: #111827;
}

.btn-ghost{
  background: #fff;
  border-color: #e5e7eb;
  color: #374151;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
}

/* 確認画面 */
.confirm{
  display:grid;
  gap: 16px;
}
.confirm-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
.confirm-list dt{
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-soft);
}
.confirm-list dd{
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #eef2f7;
}

.confirm-subtitle{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
}

.confirm-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.submit-state{
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-soft);
}

/* 表示切替 */
.is-hidden{ display:none !important; }

/* honeypot */
.hp{ display:none !important; }

/* responsive */
@media (min-width: 768px){
  .address-grid{
    grid-template-columns: 1fr 2fr;
  }
  .confirm-list{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px){
  .page{
    padding-top: 20px;
  }
  .brand-name{
    font-size: 22px;
  }
  .card{
    padding: 18px 14px 22px;
  }
  .zip-row{
    flex-direction: column;
    align-items: stretch;
  }
  .zip-row input{
    max-width: 100%;
  }
  .btn{
    width: 100%;
  }
  .confirm-actions .btn{
    width: 100%;
  }
}

.page-footer{
  text-align:center;
  color:#9ca3af;
  margin-top: 10px;
}

/* ドラッグ＆ドロップ時のハイライト */
.upload-box.dragover{
  border-color: rgba(220,38,38,.7);
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}