.grv-page {
  margin: 0; background: #F6F3F0; color: #2e392d;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.grv-wrapper, .grv-wrapper * { box-sizing: border-box; }
.grv-wrapper {
  --grv-row-height: 144px; --grv-transition-duration: 700ms;
  display: grid; grid-template-rows: 72px 432px 40px;
  width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 24px 12px;
  border-top: 2px solid #536a45; background: #F6F3F0;
}
.grv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.grv-heading-group { min-width: 0; }
.grv-heading { margin: 0 0 6px; font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 27px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; }
.grv-subtitle { margin: 0; color: #626b59; font-size: 14px; line-height: 1.6; }
.grv-controls { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; padding-top: 6px; }
.grv-position { min-width: 45px; color: #6b7366; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.grv-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #d6ddcd; border-radius: 50%; background: #fff; color: #435e35; font: inherit; font-size: 17px; cursor: pointer; }
.grv-controls button:disabled { cursor: default; color: #82897b; }
.grv-display { min-height: 0; }
.grv-viewport { height: 100%; overflow: hidden; background: #F6F3F0; touch-action: auto; }
.grv-track { display: flex; flex-direction: column; transition: transform var(--grv-transition-duration) ease; will-change: transform; }
.grv-track.grv-instant { transition: none; }
.grv-card {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: 42px 72px;
  column-gap: 16px; row-gap: 4px; align-content: center;
  flex: 0 0 var(--grv-row-height); height: var(--grv-row-height);
  min-width: 0; margin: 0; padding: 10px 12px; border-bottom: 1px solid #e3e5dc; overflow: hidden;
}
.grv-image-link { grid-column: 1; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 80px; height: 80px; color: #72796a; text-decoration: none; }
.grv-image { display: block; width: 80px; height: 80px; object-fit: contain; }
.grv-image-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: #f4f5ef; border-radius: 3px; font-size: 12px; }
.grv-summary { grid-column: 2; grid-row: 1; min-width: 0; }
.grv-product { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; }
.grv-product-link { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #355332; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.grv-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; height: 18px; font-size: 12px; line-height: 18px; color: #697260; overflow: hidden; white-space: nowrap; }
.grv-rating { flex: 0 0 auto; color: #86702d; letter-spacing: .12em; font-size: 14px; }
.grv-date { flex: 0 0 auto; }
.grv-author { overflow: hidden; text-overflow: ellipsis; }
.grv-body { grid-column: 2; grid-row: 2; height: 72px; margin: 0; font-size: 16px; line-height: 24px; color: #394033; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.grv-footer { display: flex; align-items: flex-end; justify-content: center; }
.grv-all { display: inline-block; padding: 7px 2px; color: #355332; font-size: 14px; line-height: 20px; text-underline-offset: 4px; }
.grv-message { margin: 0; padding: 30px 12px; font-size: 14px; line-height: 1.8; text-align: center; }
.grv-wrapper [hidden] { display: none !important; }
.grv-wrapper :focus-visible { outline: 2px solid #456b35; outline-offset: -2px; }
.grv-wrapper a:hover { color: #183c18; text-decoration-thickness: 2px; }
@media (hover: hover) { .grv-controls button:not(:disabled):hover { background: #edf0e6; } }
.grv-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 601px) and (max-width: 760px) { .grv-subtitle { max-width: 29em; font-size: 12px; } }
@media (max-width: 600px) {
  .grv-wrapper { --grv-row-height: 100px; height: 400px; grid-template-rows: 44px 300px 38px; padding: 8px 10px; }
  .grv-header { align-items: center; gap: 6px; }
  .grv-heading { margin: 0; font-size: 22px; line-height: 30px; letter-spacing: .06em; }
  .grv-subtitle { display: none; }
  .grv-controls { padding: 0; gap: 4px; }
  .grv-position { min-width: 40px; font-size: 11px; }
  .grv-controls button { width: 30px; height: 30px; font-size: 16px; }
  .grv-card { grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: 50px 35px; column-gap: 8px; row-gap: 0; padding: 7px 0; align-content: start; }
  .grv-image-link { grid-row: 1; width: 50px; height: 50px; align-self: start; }
  .grv-image { width: 50px; height: 50px; }
  .grv-image-fallback { font-size: 10px; }
  .grv-product { height: 32px; font-size: 13px; line-height: 16px; }
  .grv-product-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; max-height: 32px; }
  .grv-meta { margin-top: 2px; gap: 10px; height: 16px; line-height: 16px; font-size: 12px; }
  .grv-rating { font-size: 13px; }
  .grv-author { display: none; }
  .grv-body { grid-column: 1 / -1; height: 35px; font-size: 14px; line-height: 17.5px; -webkit-line-clamp: 2; }
  .grv-footer { align-items: center; }
  .grv-all { padding: 8px 0; font-size: 13px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .grv-track { transition: none; } }