.wrap {
      display: grid;
      width: 100%;
      min-height: 100vh;
      place-items: center;
      padding: min(2em, 5vw);
      line-height: 1.6;
    }

    .inner {
      width: 100%;
      max-width: 600px;
    }

    h1 {
      text-align: center;
      font-size: clamp(1.2em, 7vw, 2em);
      font-weight: bold;
      line-height: 1.3;
      margin-bottom: .5em;
    }

    form {
      margin-top: 1.5em;
    }

    .required,
    .option {
      font-size: .8em;
      display: inline-block;
      padding: .2em .4em;
      border-radius: 4px;
      color: #fff;
      background: #c0b7a2;
    }

    .required {
      background: #dd0000;
    }

    .form-group {
      display: flex;
      gap: .5em;
      margin-block: .5em;
    }

    .form-group label {
      display: flex;
      align-items: center;
      gap: .4em;
      width: 6em;
    }

    .form-group input {
      flex: 1;
      padding: .4em .6em;
      border: #ccc 1px solid;
      border-radius: 4px;
    }

    a {
      color: #c0b7a2;
      text-decoration: underline;
    }

    .optin-button-submit {
      display: block;
      color: #fff;
      background: #efa600;
      width: 100%;
      text-align: center;
      border-radius: 4px;
      padding-block: .4em;
      font-weight: bold;
      font-size: 1.1em;
      letter-spacing: .1em;
      margin: 1em auto 0;
      max-width: 16em;
      border: 2px solid #efa600;
    }

    @media (any-hover: hover) {
      button {
        transition: color .3s ease-in-out, background .3s ease-in-out;
      }

      button:hover {
        color: #efa600;
        background: #fff;
      }
    }

    /* PC */
    @media screen and (min-width: 810.1px) {
      form {
        font-size: 1.1em;
      }

      .form-group {
        align-items: center;
      }
    }

    /* SP */
    @media screen and (max-width: 810px) {
      .form-group {
        flex-direction: column;
      }

      .form-group label {
        font-size: .9em;
      }
    }