:root{
  --ink:#1c1e22;
  --sumi:#4a4f57;
  --ai:#2f4f6f;
  --ai-l:#8fa6bd;
  --usu:#f5f4f1;
  --line:#dedbd5;
  --paper:#fff;
  --alert:#8c3a3a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  background:var(--usu); color:var(--ink);
  font-size:17px; line-height:1.9;
  letter-spacing:.02em;
}
.wrap{max-width:640px;margin:0 auto;background:var(--paper);min-height:100vh}

/* header */
header{
  padding:34px 22px 26px; border-bottom:1px solid var(--line);
  text-align:center;
}
.mark{
  font-size:12px; letter-spacing:.5em; color:var(--ai-l);
  margin-bottom:14px; text-indent:.5em;
}
h1{font-size:27px; font-weight:400; letter-spacing:.22em; text-indent:.22em}
.sub{margin-top:12px; font-size:14px; color:var(--sumi); line-height:1.8}

/* steps */
.steps{
  display:flex; border-bottom:1px solid var(--line);
  background:var(--usu);
}
.step{
  flex:1; text-align:center; padding:11px 4px;
  font-size:12px; letter-spacing:.08em; color:#a9a49c;
  border-bottom:2px solid transparent;
}
.step.on{color:var(--ai); border-bottom-color:var(--ai); background:var(--paper)}
.step b{display:block;font-size:15px;font-weight:400;margin-bottom:1px}

section{padding:26px 22px 40px}
.hide{display:none}

/* deadline */
.deadline{
  margin:0 22px 24px; padding:13px 16px;
  background:#fbf7ef; border-left:3px solid #c9a961;
  font-size:14px; line-height:1.8; color:var(--sumi);
}
.deadline b{color:var(--ink); font-weight:600}

/* category */
.cat{margin-bottom:34px}
.cat-h{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:9px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.cat-h h2{font-size:20px;font-weight:400;letter-spacing:.16em}
.cat-h span{font-size:12px;color:var(--ai-l);letter-spacing:.1em}

/* card */
.card{
  display:flex; gap:15px; padding:15px 0;
  border-bottom:1px dotted var(--line);
}
.card:last-child{border-bottom:none}
.thumb{
  width:96px;height:96px;flex:none;border-radius:2px;
  background:var(--usu);object-fit:contain;
}
.info{flex:1;min-width:0}
.nm{font-size:17px;letter-spacing:.04em}
.sp{font-size:12.5px;color:var(--sumi);margin-top:2px;line-height:1.6}
.pr{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:19px;margin-top:5px;letter-spacing:.02em;
}
.pr small{font-size:11.5px;color:var(--sumi);margin-left:4px;letter-spacing:.05em}
.vd{
  display:inline-block;margin-top:6px;font-size:12.5px;
  color:var(--ai);text-decoration:none;border-bottom:1px solid var(--ai-l);
  padding-bottom:1px;
}

/* unit toggle */
.unit{display:flex;gap:0;margin-top:9px;width:172px}
.unit button{
  flex:1;font:inherit;font-size:12.5px;padding:5px 0;
  border:1px solid var(--line);background:var(--paper);
  color:var(--sumi);cursor:pointer;letter-spacing:.04em;
}
.unit button:first-child{border-radius:2px 0 0 2px}
.unit button:last-child{border-radius:0 2px 2px 0;border-left:none}
.unit button.on{background:var(--ai);border-color:var(--ai);color:#fff}

/* qty */
.qty{display:flex;align-items:center;gap:0;margin-top:10px}
.qty button{
  width:38px;height:38px;font:inherit;font-size:19px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--sumi);cursor:pointer;line-height:1;
}
.qty button:first-child{border-radius:2px 0 0 2px}
.qty button:last-child{border-radius:0 2px 2px 0;border-left:none}
.qty span{
  width:48px;height:38px;display:grid;place-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:16px;
}
.qty.act span{color:var(--ai);font-weight:600}

/* bar */
.bar{
  position:sticky;bottom:0;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:13px 22px 16px;
  display:flex;align-items:center;gap:14px;
}
.bar .tot{flex:1;font-size:13px;color:var(--sumi);letter-spacing:.06em}
.bar .tot b{
  display:block;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:23px;color:var(--ink);font-weight:500;margin-top:1px;
}
.btn{
  font:inherit;font-size:16px;letter-spacing:.14em;text-indent:.14em;
  background:var(--ai);color:#fff;border:none;border-radius:2px;
  padding:14px 30px;cursor:pointer;
}
.btn:disabled{background:#c9ccd0;cursor:default}
.btn.gh{background:none;color:var(--ai);border:1px solid var(--line);padding:13px 22px}

/* form */
.fs{margin-bottom:30px}
.fs h3{
  font-size:15px;font-weight:400;letter-spacing:.14em;color:var(--ai);
  padding-bottom:8px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
label{display:block;margin-bottom:15px}
.lb{font-size:13.5px;color:var(--sumi);margin-bottom:5px;letter-spacing:.06em}
.req{color:var(--alert);font-size:11px;margin-left:5px}
input,textarea,select{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid var(--line);border-radius:2px;background:#fdfdfc;
  color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--ai-l);outline-offset:-1px}
textarea{resize:vertical;min-height:88px;line-height:1.8}
.hint{font-size:12px;color:#8d8a84;margin-top:4px;line-height:1.7}
.row{display:flex;gap:11px}
.row label{flex:1}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sumi)}
.chk input{width:18px;height:18px;flex:none}

/* fuda — signature */
.fuda-wrap{margin:6px 0 26px}
.fuda-cap{
  text-align:center;font-size:12.5px;color:var(--sumi);
  letter-spacing:.14em;margin-bottom:12px;
}
.fuda{
  background:linear-gradient(175deg,#fbf6e9,#f2e9d4);
  border:1px solid #d9cba8;border-radius:3px;
  padding:30px 18px;min-height:250px;
  display:flex;flex-direction:row-reverse;
  align-items:flex-start;justify-content:center;gap:14px;
  box-shadow:0 1px 0 #fff inset, 0 2px 10px rgba(80,60,20,.08);
}
.fuda .col{
  writing-mode:vertical-rl;text-orientation:upright;
  color:#241d10;letter-spacing:.14em;white-space:nowrap;
  line-height:1;
}
.fuda .c-org{font-size:19px;padding-top:8px}
/* 肩書きとお名前は同じ縦一列に表示する */
.fuda .c-name{padding-top:8px}
.fuda .c-name .c-tit{font-size:16px;color:#453a26}
.fuda .c-name .c-nam{font-size:27px;letter-spacing:.22em}
.fuda .c-name .tgap{display:inline-block;height:.55em}

/* お名前の追加ボタン */
.addname{
  font:inherit;font-size:14px;color:var(--ai);
  background:none;border:1px dashed var(--ai-l);border-radius:2px;
  padding:9px 16px;cursor:pointer;letter-spacing:.04em;
  margin-bottom:6px;
}
.addname:hover{background:#eef1f5}
#nameList input + input{margin-top:8px}
.fuda.empty{align-items:center;justify-content:center}
.fuda.empty .ph{color:#b6a882;font-size:15px}
.fuda-note{
  margin-top:11px;font-size:12.5px;color:var(--alert);
  text-align:center;line-height:1.8;
}
.fuda-sub{color:var(--sumi);font-size:12px}

/* review */
.rv{border:1px solid var(--line);border-radius:2px;margin-bottom:24px}
.rv-r{display:flex;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px;gap:12px}
.rv-r:last-child{border-bottom:none}
.rv-r dt{width:88px;flex:none;color:var(--sumi);font-size:13px;letter-spacing:.05em}
.rv-r dd{flex:1;line-height:1.8;word-break:break-word}
.rv-tot{background:var(--usu);font-weight:600}
.rv-tot dd{font-family:"Helvetica Neue",Arial,sans-serif;font-size:18px}

.warn{
  background:#fdf4f4;border:1px solid #e8cfcf;border-radius:2px;
  padding:15px 16px;margin-bottom:22px;font-size:13.5px;
  line-height:1.9;color:#6d3030;
}
.warn b{display:block;margin-bottom:4px;color:var(--alert)}
.tel{
  display:block;margin-top:9px;text-align:center;
  background:var(--alert);color:#fff;text-decoration:none;
  padding:12px;border-radius:2px;letter-spacing:.1em;font-size:15px;
}

/* done */
.done{text-align:center;padding:58px 22px 70px}
.done .no{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:31px;letter-spacing:.1em;margin:18px 0 8px;color:var(--ai);
}
.done h2{font-size:21px;font-weight:400;letter-spacing:.16em;margin-bottom:16px}
.done p{font-size:14.5px;color:var(--sumi);line-height:2}

footer{
  padding:26px 22px 40px;border-top:1px solid var(--line);
  text-align:center;font-size:12.5px;color:var(--sumi);line-height:2;
  background:var(--usu);
}
@media(prefers-reduced-motion:no-preference){
  section{animation:f .3s ease}
  @keyframes f{from{opacity:0;transform:translateY(5px)}to{opacity:1}}
}