:root {
  --hina-ink: #382e30;
  --hina-pink: #b85c75;
  --hina-cream: #fff8f1;
  --hina-line: #eaded7;
}

body {
  color: var(--hina-ink);
  background: #fffdfb;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

.site-header {
  background: rgba(255, 253, 251, .96);
}

.site-name {
  color: var(--hina-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(184, 92, 117, .14), transparent 25rem),
    linear-gradient(135deg, var(--hina-cream), #fffdfb);
  border-bottom: 1px solid var(--hina-line);
}

.hero h1,
.hero .lead {
  max-width: 50rem;
}

.eyebrow {
  color: var(--hina-pink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.product-card {
  background: transparent;
}

.image-frame,
.detail-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f7f1ed;
  border-radius: 1rem;
}

.image-frame {
  min-height: 176px;
}

.detail-image {
  min-height: 240px;
}

.image-frame img,
.detail-image img {
  width: 128px;
  height: 128px;
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
}

.shop-name {
  color: #887579;
  font-size: .78rem;
}

.price {
  color: #9e334f;
}

.review {
  color: #795d28;
  font-size: .78rem;
}

.purchase-box,
.empty-state {
  padding: 1.5rem;
  background: var(--hina-cream);
  border: 1px solid var(--hina-line);
  border-radius: 1rem;
}

.editorial-body {
  line-height: 1.9;
  white-space: pre-line;
}

.btn-rakuten {
  color: #fff;
  background: var(--hina-pink);
  border-color: var(--hina-pink);
}

.btn-rakuten:hover,
.btn-rakuten:focus {
  color: #fff;
  background: #9e455e;
  border-color: #9e455e;
}

footer {
  background: #faf6f3;
}