/* Googleフォーム風（寄せ） */
:root{
  --bg:#f1f3f4;
  --card:#ffffff;
  --ink:#202124;
  --muted:#5f6368;
  --line:#dadce0;
  --focus:#673ab7; /* Googleフォームっぽい紫 */
  --danger:#d93025;
  --radius:10px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

.page{
  width:min(720px, calc(100% - 24px));
  margin: 26px auto 60px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}

.card-head{
  margin-bottom: 14px;
}
.topbar{
  height: 10px;
  background: var(--focus);
}
.head-inner{
  padding: 18px 18px 14px;
}
h1{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .01em;
}
.meta{
  display:flex;
  gap: 12px;
  align-items:center;
  color:var(--muted);
  font-size: 13px;
  margin-bottom: 10px;
}
.meta-row{display:flex;gap:8px;align-items:center;}
.req-note{
  margin:0;
  color:var(--danger);
  font-size: 12px;
}
.req-aster{color:var(--danger); font-weight:700;}

.form{display:flex; flex-direction:column; gap: 12px;}

.field-card{
  padding: 16px 18px 14px;
}
.label{
  display:block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.input,.select,.textarea{
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  color: var(--ink);
  padding: 4px 0 8px;
}
.textarea{resize:vertical; min-height: 120px; line-height: 1.6;}

.underline{
  height: 1px;
  background: var(--line);
  transition: transform .12s ease, background .12s ease, height .12s ease;
  transform-origin: left center;
}
.input:focus + .underline,
.select:focus + .underline,
.textarea:focus + .underline{
  height: 2px;
  background: var(--focus);
}

.hint{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.err{
  margin: 8px 0 0;
  color: var(--danger);
  font-size: 12px;
  min-height: 1em;
}

.check{
  display:flex;
  gap: 10px;
  align-items:center;
  color: var(--ink);
  font-size: 14px;
}
.check input{transform: translateY(1px);}

.actions{
  margin-top: 8px;
  display:flex;
  justify-content:flex-start;
}
.btn{
  appearance:none;
  border:none;
  background: var(--focus);
  color:#fff;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.03);}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}