@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0turn;
    inherits: false;
  }
  
  .card {
    animation: 2s gradient-angle infinite linear;
    border: 2px solid transparent;
    background-image: linear-gradient(#584827, #2d230f),
      conic-gradient(
        from var(--gradient-angle),
        #584827 0%,
        #c7a03c 37%,
        #f9de90 30%,
        #c7a03c 33%,
        #584827 40%,
        #584827 50%,
        #c7a03c 77%,
        #f9de90 80%,
        #c7a03c 83%,
        #584827 90%
      );
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
  }
  
  @keyframes gradient-angle {
    to {
      --gradient-angle: 1turn;
    }
  }
  
  /* その他 */
  html,
  body {
    background: #0a0a1f;
  }
  
  body {
    font-family: "游ゴシック Medium", YuGothic, YuGothicM,
      "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-height: 10;
    display: grid;
    align-content: center;
    min-height: 100svh;
    padding: 10px;
    color: #650606;
    gap: 10px;
  
    @media (width < 970px) {
      align-content: start;
    }
  }
  
  .container {
    display: grid;
    justify-content: center;
    margin-inline: center;
    grid-auto-flow: column;
    gap: 16px 20px;
    @media (width < 970px) {
      grid-auto-flow: row;
    }
  }
  
  .card {
    display: grid;
    max-width: 600px;
    padding: 5px;
    text-decoration: none;
    color: currentColor;
    border-radius: 5px;
    place-content: center;
    place-items: center;
    aspect-ratio: 1/1;
    row-gap: 8px;                                      //boxlength
  }
  
    .card h2 {
    font-family: "Comfortaa", sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    font-optical-sizing: auto;
    
  }
  .card p {
    font-size: 12px;
  }