body {
 margin: 0;
 font-family: sans-serif;
}
header {
 display: flex;
 align-items: center;
 background-color: #fff;
 padding: 8px;
 padding-bottom: 12px;
 border-bottom: 1px solid #ddd;
}
header img {
 padding-left: 6px;
}
#menu {
 padding: 0;
 border-radius: 8px;
}
#menu:hover {
 background-color: #ddd;
}
header h2 {
 text-align: center;
 margin: 0;
 padding-left: 1rem;
 color: #000;
}
header nav {
 display: flex;
 margin: 0;
 margin-left: auto;
 font-size: 16px;
}
header nav ul {
 margin: 0;
 padding: 0 4px;
}
header nav a {
 color: #000;
 text-decoration: none;
 border-radius: 12px;
 padding: 4px 12px;
}
header nav a:hover {
 background-color: #ddd;
}
#main {
 text-align: center;
}
#card_content {
 background-color: #f9f9f9;
 display: grid;
 padding-top: 16px;
 margin-bottom: 8px;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 16px;
 justify-content: center;
}
.card {
 margin: 0 8px 12px;
 transition: transform 0.3s ease;
 /*ここからスタイル*/
 background-color: #fff;
 color: #000;
 border-radius: 8px;
 box-shadow: 0 4px 6px #000;
 overflow: hidden;
 max-width: 320px;
 text-align: center;
}
@media screen and (max-width: 480px) {
 #card_content {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
 }
 .card {
  max-width: 180px;
 }
 header nav {
  display: none;
 }
}
.card:hover {
 transform: translateY(-6px);
 box-shadow: 0 6px 8px #000;
}
.card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}
#aboutme {
 background-color: #000;
 color: #fff;
 padding: 8px 0;
}
footer {
 background-color: magenta;
 color: chartreuse;
 font-family: serif;
 text-align: center;
 font-size: 32px;
 padding: 8px 0;
 bottom: 0;
}
footer p {
 margin: 0;
}
footer a {
 color: chartreuse;
}