/* ===== Base ===== */
:root{
  --container: 1000px;
  --gap-pc: 20px;
  --gap-sp: 15px;
  --line: #A9A9A9;
}
body{
  margin:0;
  font-family: 'Helvetica Neue', sans-serif;
  color:#333;
  line-height:1.6;
}
.limited-menu{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 20px 80px;
}
.title{
  font-size:28px;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  margin:200px 0 40px;
  color: #4e402e;
}

/* ===== Year block ===== */
.year-block{ margin:0 0 60px; }
.year-title{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:22px;
  font-weight:700;
  margin:0 0 20px;
  color: #7a6a55;
}
.year-title .line{
  flex:1 1 auto;
  height:2px;
  background:var(--line);
  transform: translateY(1px);
  background-color: #7a6a55;
}

/* ===== Grid ===== */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr); /* PC: 4列 */
  gap:var(--gap-pc);
}
.menu-grid a,
.menu-grid img{
  display:block;
  width:100%;
}
.menu-grid img{
  height:auto;
  vertical-align:middle;
  object-fit:cover;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .title{ font-size:22px; margin-bottom:28px; }
  .year-title{ font-size:18px; margin-bottom:16px; }
  .menu-grid{
    grid-template-columns:repeat(2,1fr); /* SP: 2列 */
    gap:var(--gap-sp);
  }

.title{
  font-size:28px;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  margin:100px 0 40px;
  color: #4e402e;
}

}