* { box-sizing: border-box; }

/* 数値入力の上下スピンボタンを非表示 */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
      padding-right: 72px;
    }

body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
        "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
      background:
        radial-gradient(circle at top left, #e0ecff 0, transparent 34%),
        var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

.page {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 44px 0 60px;
    }

header {
      margin-bottom: 24px;
    }

h1 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.2;
      letter-spacing: -0.03em;
    }

.lead {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }

input {
      width: 100%;
      min-height: 46px;
      padding: 11px 48px 11px 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--text);
      font-size: 16px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

footer {
      margin-top: 22px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }