@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,900&family=Noto+Sans+JP:wght@400;700;900&display=swap");

:root {
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --sub: #F0EFEA;
  --btn: #ECEBE6;
  --line: #E2E1DC;
  --ink: #141414;
  --ink2: rgba(20, 20, 20, .64);
  --accent: #FF5A1F;
  --accent-ink: #C43E0C;
  --navy: #1E2A47;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 480px; margin: 0 auto; padding: 24px 16px 48px; }

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.brand img { border-radius: 10px; }
.wordmark {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: .09em;
  color: var(--navy);
  font-size: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 20px;
}

h1 { font-size: 24px; font-weight: 900; line-height: 1.4; margin: 0 0 12px; }
.lead { font-size: 15px; color: var(--ink2); margin: 0 0 20px; }
.note { font-size: 13px; color: var(--ink2); margin: 12px 0 0; text-align: center; }

.code {
  display: flex; align-items: center; gap: 10px;
  background: var(--sub);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.code[hidden] { display: none; }
.code-label { font-size: 12px; font-weight: 700; color: var(--ink2); }
.code-value { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .12em; flex: 1; }
.copy {
  border: 0; background: var(--btn); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer;
}

.btn {
  display: flex; align-items: center; justify-content: center;
  height: 60px; border-radius: 18px;
  font-size: 17px; font-weight: 900; text-decoration: none;
  margin-top: 10px;
}
.btn[hidden] { display: none; }
.btn.main { background: var(--accent); color: var(--ink); }
.btn.sub { background: var(--btn); color: var(--ink); }

.steps { margin: 24px 4px 0; padding-left: 22px; font-size: 14px; color: var(--ink2); }
.steps li { margin-bottom: 6px; }
.steps li::marker { color: var(--accent-ink); font-weight: 900; }