body {
  margin: 0;
  font-family: "Noto Sans JP", "Avenir Next", sans-serif;
  color: #201310;
  background:
    radial-gradient(circle at top left, rgba(215, 97, 55, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(240, 178, 140, 0.24), transparent 24%),
    linear-gradient(180deg, #fbf2e8 0%, #f6eee8 46%, #efe4da 100%);
}

a,a:visited,a:hover,a:active { text-decoration: none !important; color: inherit; }
img { max-width: 100%; }
li { list-style: none; }

.header,.main,.footer { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.header {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:92px; padding-top:18px; padding-bottom:18px;
}
.header-logo { font-size:30px; font-weight:800; }
.header-logo a {
  display:inline-flex; align-items:center; min-height:52px; padding:0 20px;
  border-radius:999px; background:rgba(255,255,255,.62); box-shadow:0 12px 30px rgba(78,31,14,.08);
}
.header-list ul,.footer-list ul { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; padding:0; }
.header-list ul { justify-content:flex-end; }
.header-list li,.footer-list li { padding:0; }
.header-list li a {
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border-radius:999px; background:rgba(255,255,255,.56); color:#6f5951; font-size:14px; font-weight:700;
}

.main {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(360px, 1fr) minmax(240px, 280px);
  align-items: start;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 48px;
}
.image,.meru,.memu {
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 28px;
  background: rgba(255,251,247,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(78,31,14,.12);
}

.image { text-align:center; padding: 24px; }
.image img { width: min(560px, 100%); height:auto; border-radius:20px; }

.meru, .memu {
  padding: 20px;
}

.meru img, .memu img { width: 42%; }
.meru,
.memu,
.image {
  min-width: 0;
}
.links img { width: auto; height: 56px; }

.footer { display:flex; justify-content:center; padding-top:12px; padding-bottom:36px; }
.footer-list {
  width:100%; padding:22px 24px; border-radius:28px; background:rgba(32,19,16,.92); color:#fffaf6;
}
.footer-list ul { justify-content:center; }

@media (max-width: 960px) {
  .header { flex-direction:column; align-items:flex-start; }
  .header-list ul { justify-content:flex-start; }
  .main {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .header,.main,.footer { padding-left:16px; padding-right:16px; }
  .image,.meru,.memu,.footer-list { border-radius:22px; }
}