/* Sanseido-like theme (approx) - updated to match provided mock */
:root{
  --brand:#B02848;     /* base */
  --brand2:#9b2440;    /* header */
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#f3f4f6;
  --card:#ffffff;
  --line:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--brand2);
  color:#fff;
  padding:28px 22px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.topbar .left{
  display:flex; align-items:center; gap:12px; min-width:220px;
}
.topbar .logo{
  height:56px; /* logo display area x2 */
  background:#fff;
  padding:8px 10px;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.topbar .center{
  flex:1;
  display:flex;
  justify-content:center;
}
.pill-title{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.02em;
  background:rgba(0,0,0,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.badge{
  display:inline-flex; align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.container{max-width:860px;margin:34px auto 0;padding:0 14px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){
  .grid.cols-2{grid-template-columns:1fr}
  .topbar .left{min-width:auto}
  .topbar .center{justify-content:flex-start}
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .hd{padding:22px 22px 0}
.card .bd{padding:22px}
.h1{font-size:18px;margin:0 0 10px}
.p{margin:0;color:var(--muted);line-height:1.7}
.form{display:grid;gap:14px}
.label{font-weight:800;font-size:13px}
.input, .textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  outline:none;
}
.input:focus,.textarea:focus{
  border-color:rgba(176,40,72,.60);
  box-shadow:0 0 0 5px rgba(176,40,72,.12)
}
.textarea{min-height:110px;resize:vertical}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  appearance:none;border:0;cursor:pointer;
  padding:12px 18px;border-radius:16px;
  font-weight:900;
  letter-spacing:.02em;
  font-size:15px;
  min-width:140px;
}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#8E1F3C}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);min-width:auto}
.btn.ghost:hover{border-color:rgba(176,40,72,.35);color:#8E1F3C}
.table{width:100%;border-collapse:collapse}
.table td,.table th{border-top:1px solid var(--line);padding:12px 10px;text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:800}
.notice{
  border-left:4px solid var(--brand);
  background:rgba(176,40,72,.06);
  padding:12px 14px;
  border-radius:12px;
  color:var(--ink);
}
.footer{
  max-width:860px;
  margin:0 auto;
  padding:18px 14px 28px;
  display:flex;
  justify-content:flex-end;
  gap:16px;
  color:var(--muted);
  font-size:12px;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--brand)}

.topbar .right{min-width:220px;display:flex;justify-content:flex-end}

.form-narrow{max-width:560px;margin:0 auto}

/* Responsive adjustments for big logo */
@media (max-width: 1024px){
  .topbar{padding:22px 16px;}
  .topbar .left{min-width:180px;}
  .topbar .right{min-width:180px;}
  .topbar .logo{height:84px;padding:10px 14px;border-radius:14px;}
  .pill-title{padding:9px 14px;border-radius:12px;font-size:14px}
}
@media (max-width: 760px){
  .topbar{padding:14px 12px;}
  .topbar .row{gap:10px}
  .topbar .left{min-width:auto}
  .topbar .right{min-width:auto}
  .topbar .logo{height:56px;padding:6px 10px;border-radius:12px;}
  .badge{padding:6px 10px;font-size:11px}
  .pill-title{padding:8px 10px;border-radius:10px;font-size:13px}
}

.subtitle{
  margin-top:10px;
  opacity:.92;
  font-size:13px;
  text-align:center;
}
.row-2{margin-top:10px}
@media (max-width:760px){
  .row-2{margin-top:8px}
  .subtitle{margin-top:8px;font-size:12px}
}