*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f7f0e3; color: #1d2a4a; font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; line-height: 1.7; }
main { max-width: 560px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 32px; }
h1 { margin: 0; font-size: 24px; }
.patterns { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.patterns a {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 16px;
  align-items: center;
  min-height: 88px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(29, 42, 74, .08);
}
.patterns a:hover { box-shadow: 0 4px 18px rgba(29, 42, 74, .16); }
.patterns a:focus-visible { outline: 3px solid #1d2a4a; outline-offset: 3px; }
.key { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1d2a4a; color: #f2c230; font-weight: 700; font-size: 20px; }
.name { font-weight: 700; font-size: 17px; }
.desc { font-size: 14px; color: #4a5470; }