body {
  background:
    linear-gradient(rgba(34, 31, 25, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 31, 25, .05) 1px, transparent 1px),
    #f7e7bc;
  background-size: 22px 22px;
  color: #2f2618;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.site-header {
  background: #d52b1e;
  border-bottom: 10px solid #2f2618;
  color: #fff8df;
  transform: rotate(-1deg);
}

.site-title {
  color: #fff8df;
  font-size: clamp(26px, 5vw, 54px);
  letter-spacing: .06em;
  text-shadow: 3px 3px 0 #2f2618;
}

.container { max-width: 1180px; }
.hero,
.area-description,
.search-box,
.link-panel,
.content-section,
.post-form,
.pr-ranking,
.area-stats {
  background: #fff8df;
  border: 3px solid #2f2618;
  border-radius: 2px;
  box-shadow: 7px 7px 0 rgba(47,38,24,.25);
}

.hero {
  transform: rotate(.6deg);
}

.page-title,
.hero h1,
.content-section h2,
.link-panel h2 {
  background: #2f2618;
  color: #fff8df;
  display: inline;
  line-height: 1.45;
  padding: 0 10px;
}

.search-grid,
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.area-link-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.area-link-grid a,
.pagination a,
.pagination span {
  background: #fff;
  border: 2px dashed #2f2618;
  border-radius: 0;
  color: #2f2618;
  text-align: center;
}

.post-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.post-card {
  background: #fff8df;
  border: 3px solid #2f2618;
  border-radius: 2px;
  box-shadow: 6px 6px 0 rgba(47,38,24,.22);
  min-height: 260px;
  position: relative;
}

.post-card:nth-child(3n) { transform: rotate(.7deg); }
.post-card:nth-child(3n+1) { transform: rotate(-.5deg); }
.post-card::before {
  background: #d52b1e;
  color: #fff8df;
  content: "募集";
  font-weight: 900;
  padding: 3px 10px;
  position: absolute;
  right: 12px;
  top: -14px;
}

.post-card__meta span,
.pr-card__badges span {
  background: #ffe08a;
  border: 1px solid #2f2618;
  border-radius: 0;
}

.post-card__cta,
.submit-button,
button,
.pr-card__button {
  background: #d52b1e;
  border: 2px solid #2f2618;
  border-radius: 0;
  color: #fff8df;
}

.pr-card {
  border: 2px solid #2f2618;
  border-radius: 0;
}

.site-footer { background: #2f2618; }

@media (max-width: 720px) {
  .search-grid,
  .form-grid,
  .post-list { grid-template-columns: 1fr; }
  .site-header,
  .hero,
  .post-card { transform: none !important; }
}