@font-face {
    font-family: 'Interstate';
    src: url('fonts/interstate-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Interstate';
    src: url('fonts/interstate-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }
  
  body {
    font-family: 'Interstate', 'Helvetica Neue', Arial, sans-serif;
    color: #262626;
  }
  
  .page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: #ffffff url('../image/background.jpg') center center / cover no-repeat;
  }
  
  .card {
    background: #ffffff;
    border-radius: 12px;
    padding: 56px;
    max-width: 627px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  
  .card__title {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #262626;
  }
  
  .card__text {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: #262626;
  }
  
  .card__text p {
    margin: 0 0 16px 0;
  }
  
  .card__text p:last-child {
    margin-bottom: 0;
  }
  
  .card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    background-color: #df5952;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 74px;
    transition: background-color 0.2s ease;
  }
  
  .card__button:hover,
  .card__button:focus-visible {
    background-color: #c94842;
  }
  
  .card__footnote {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    color: #262626;
  }
  
  .card__logo {
    width: 150px;
    height: 64px;
    object-fit: contain;
    display: block;
  }
  
  @media (max-width: 720px) {
    .page {
      padding: 24px 16px;
    }
  
    .card {
      padding: 32px 24px;
      gap: 24px;
    }
  
    .card__button {
      width: 100%;
      white-space: normal;
      border-radius: 32px;
    }
  }