:root {
  --m3-ink: #211a1d;
  --m3-surface: #fff8f8;
  --m3-primary: color-mix(in srgb, var(--color-primary) 78%, #663a54);
  --m3-primary-container: color-mix(in srgb, var(--color-primary) 18%, #ffe6ef);
  --m3-secondary-container: #f1dfe6;
  --m3-tertiary-container: #f6dfbd;
  --m3-outline: #857379;
}

body {
  background:
    radial-gradient(circle at 4% 2%, var(--m3-primary-container), transparent 31rem),
    radial-gradient(circle at 96% 12%, var(--m3-tertiary-container), transparent 28rem),
    #fff8f8;
  color: var(--m3-ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
a { color: var(--m3-primary); }
.site-header {
  background: color-mix(in srgb, var(--m3-primary-container) 88%, #fff);
  border: 0;
  border-radius: 0 0 44px 44px;
  box-shadow: none;
  color: var(--m3-ink);
  padding: 26px 20px;
}
.site-header__inner { align-items: center; display: flex; gap: 24px; justify-content: space-between; }
.site-title { color: var(--m3-ink); font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: -.04em; }
.site-lead { color: #5e5055; margin: 0; max-width: 420px; }
.container { max-width: 1200px; padding-top: 34px; }
.breadcrumb { background: rgba(255,255,255,.55); border-radius: 999px; display: table; padding: 5px 12px; }

.hero {
  background: var(--m3-primary-container);
  border: 0;
  border-radius: 52px 18px 52px 18px;
  box-shadow: none;
  min-height: 250px;
  overflow: hidden;
  padding: 50px 38% 42px 42px;
  position: relative;
}
.hero::before,
.hero::after { border-radius: 50%; content: ""; position: absolute; }
.hero::before { background: var(--m3-tertiary-container); height: 260px; right: -28px; top: -50px; width: 260px; }
.hero::after { background: var(--m3-primary); bottom: 35px; height: 82px; right: 190px; width: 82px; }
.hero h1,
.page-title { color: var(--m3-ink); font-weight: 800; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.05; }
.page-title { font-size: clamp(31px, 5vw, 52px); }

.area-description,
.search-box,
.link-panel,
.content-section,
.post-form,
.area-stats,
.pr-ranking {
  border: 0;
  box-shadow: none;
  color: var(--m3-ink);
  padding: 26px;
}
.area-description { background: var(--m3-tertiary-container); border-radius: 16px 36px 16px 36px; }
.search-box { background: var(--m3-secondary-container); border-radius: 36px; }
.link-panel { background: #f4edf0; border-radius: 18px 48px 18px 48px; }
.content-section { background: rgba(255,255,255,.6); border-radius: 38px; }
.post-form { background: var(--m3-primary-container); border-radius: 48px 20px; }
.search-box h2,
.link-panel h2,
.content-section h2,
.post-form h2,
.area-stats h2,
.pr-ranking h2 { font-size: clamp(22px, 3vw, 31px); letter-spacing: -.03em; }

.search-grid,
.form-grid { gap: 16px; }
input, select, textarea {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--m3-outline);
  border-radius: 16px 16px 5px 5px;
  min-height: 52px;
}
.submit-button,
button,
.post-card__cta,
.pr-card__button {
  background: #735365 !important;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 7px rgba(69,48,58,.22);
  color: #fff !important;
  min-height: 48px;
  padding-inline: 22px;
}

.area-link-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.area-link-grid a {
  background: var(--m3-primary-container);
  border: 0;
  border-radius: 28px 8px 28px 8px;
  color: var(--m3-ink);
  min-height: 64px;
  padding: 18px;
}
.area-link-grid a:nth-child(3n+2) { background: var(--m3-tertiary-container); border-radius: 8px 28px; }
.area-link-grid a:nth-child(3n) { background: #dce8dc; }
.pagination a,
.pagination span { background: var(--m3-secondary-container); border: 0; color: var(--m3-ink); }

.post-list { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card {
  background: var(--m3-primary-container);
  border: 0;
  border-radius: 34px 12px 34px 12px;
  box-shadow: none;
  min-height: 250px;
  padding: 24px;
}
.post-card:nth-child(4n+2) { background: var(--m3-tertiary-container); border-radius: 12px 34px; }
.post-card:nth-child(4n+3) { background: #dce8dc; }
.post-card:nth-child(4n) { background: var(--m3-secondary-container); }
.post-card__name { color: var(--m3-primary); font-size: 22px; }
.post-card__age,
.post-card__area,
.post-card__date { color: #695b60; }
.post-card__meta span,
.post-card__tag--job,
.post-card__tag--body_type,
.post-card__tag--purpose,
.pr-card__badges span {
  background: rgba(255,255,255,.55) !important;
  border: 0;
  border-radius: 10px !important;
  color: #463b3f !important;
}
.post-card__foot { border-top-color: rgba(73,59,64,.2); }

.area-stats { background: #dce8dc; border-radius: 52px 18px; }
.area-stats__eyebrow { background: #2f563b; border-radius: 999px; color: #fff; display: inline-block; padding: 4px 10px; }
.area-stats__head p { color: #4f5e50; }
.area-stats__head strong { color: #24482f; }
.area-stats__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.area-stats__block { background: rgba(255,255,255,.58); border: 0; border-radius: 30px 10px; color: var(--m3-ink); padding: 18px; }
.area-stats__block:nth-child(even) { border-radius: 10px 30px; }
.area-stats__block li { border-top-color: rgba(47,86,59,.18); }
.area-stats__block b { background: #fff; color: #31533a; }
.area-stats__note { background: rgba(255,255,255,.58); color: #435348; }

.pr-ranking { background: var(--m3-tertiary-container); border-radius: 18px 52px; }
.pr-ranking__label,
.pr-card__rank { background: #724d17; border-radius: 999px; color: #fff; }
.pr-ranking__head p { color: #65563d; }
.pr-card { background: rgba(255,255,255,.64); border: 0; border-radius: 28px; }
.pr-card__image { background: #fff; border-radius: 24px; }
.pr-card__catch { color: #704d19; }
.site-footer { background: #2b2225; border-radius: 52px 52px 0 0; color: #eadde1; margin-top: 42px; }

@media (max-width: 760px) {
  .site-header__inner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hero { min-height: 230px; padding: 34px 24px 110px; }
  .hero::before { bottom: -100px; height: 220px; right: -30px; top: auto; width: 220px; }
  .hero::after { bottom: 34px; right: 150px; }
  .post-list { grid-template-columns: 1fr; }
}