:root {
  --ink: #1a1a1a;
  --sub: #585858;
  --mute: #a1a1a1;
  --line: #eaeaea;
  --line2: #c3c3c3;
  --bg: #ffffff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif; font-weight: 300;
}
a { color: inherit; }
.mincho { font-family: 'Shippori Mincho', serif; }
.lbl { font-family: 'Jost', system-ui, sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.36em; color: var(--mute); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 56px; }

header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.mark { font-family: 'Jost', system-ui, sans-serif; font-weight: 300; letter-spacing: 0.42em; font-size: 19px; text-decoration: none; }

.head { display: flex; align-items: center; gap: 26px; }
.head .line { flex: 1; height: 1px; background: #e3e3e3; }

.intro { padding: 110px 0 80px; display: flex; flex-direction: column; gap: 40px; }
.intro h1 { margin: 0; font-weight: 400; font-size: 28px; line-height: 2.1; letter-spacing: 0.14em; }
.intro p { margin: 0; font-size: 13px; line-height: 2.6; letter-spacing: 0.1em; color: var(--sub); max-width: 640px; }

.errors { border: 1px solid var(--ink); padding: 18px 22px; font-size: 13px; line-height: 2; margin-bottom: 28px; display: none; }
.errors.show { display: block; }

.f { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.f > .k { font-family: 'Shippori Mincho', serif; font-size: 13px; letter-spacing: 0.12em; padding-top: 8px; }
.tag { font-family: 'Jost', system-ui, sans-serif; font-size: 9px; letter-spacing: 0.24em; margin-left: 10px; color: #878787; white-space: nowrap; }
.tag.opt { color: var(--line2); }
.hint { font-size: 11px; color: var(--mute); margin-top: 8px; line-height: 1.8; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.half { max-width: 50%; }

input[type=text], input[type=tel], input[type=email], input[type=date] {
  width: 100%; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); padding: 8px 0 6px; outline: none;
}
input:focus { border-bottom-color: var(--ink); }
textarea {
  width: 100%; min-height: 160px; border: 1px solid #dbdbdb; border-radius: 0; background: transparent;
  font: inherit; font-size: 15px; line-height: 1.9; color: var(--ink); padding: 12px 14px; outline: none; resize: vertical;
}
textarea:focus { border-color: var(--ink); }
::placeholder { color: #c3c3c3; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; border: 1px solid #dbdbdb; padding: 9px 18px; font-size: 13px; letter-spacing: 0.06em; color: var(--sub); }
.chips input:checked + span { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.send { border-top: 1px solid var(--line); padding: 40px 0 0; display: flex; flex-direction: column; gap: 22px; }
.agree { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sub); }
.agree input { width: 18px; height: 18px; accent-color: #1a1a1a; margin: 0; }
.note { font-size: 11px; line-height: 2; color: var(--mute); max-width: 700px; }
button.btn {
  align-self: flex-start; border: 0; background: var(--ink); color: #fff; cursor: pointer;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.4em; padding: 22px 72px;
}
button.btn:disabled { background: #878787; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer.bottom { margin-top: 140px; border-top: 1px solid var(--line); }
footer.bottom .wrap { padding-top: 40px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 12px; font-size: 11px; color: var(--mute); line-height: 2; }

.doc { padding: 100px 0 0; max-width: 760px; }
.doc h1 { font-weight: 400; font-size: 24px; letter-spacing: 0.14em; margin: 30px 0 40px; }
.doc h2 { font-weight: 400; font-size: 15px; letter-spacing: 0.12em; margin: 40px 0 12px; }
.doc p, .doc li { font-size: 13px; line-height: 2.2; color: var(--sub); }

.thanks { padding: 140px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.thanks h1 { margin: 0; font-weight: 400; font-size: 22px; line-height: 2.2; letter-spacing: 0.14em; }
.thanks p { margin: 0; font-size: 13px; line-height: 2.4; letter-spacing: 0.1em; color: var(--sub); }

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  header.top .wrap { height: 64px; }
  .intro { padding: 64px 0 48px; gap: 28px; }
  .intro h1 { font-size: 21px; }
  .f { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .f > .k { padding-top: 0; }
  .row2 { grid-template-columns: 1fr; gap: 14px; }
  .half { max-width: none; }
  button.btn { align-self: stretch; padding: 20px; }
  footer.bottom { margin-top: 90px; }
  .doc { padding-top: 56px; }
  .thanks { padding-top: 90px; }
}