:root {
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 14px 36px rgba(15, 23, 42, 0.09);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 34rem),
    linear-gradient(180deg, #fff 0, var(--color-bg) 24rem);
  color: var(--color-text);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.7;
}
a { color: var(--color-primary); text-decoration: none; }
.site-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  padding: 22px 16px;
}
.site-header__inner, .site-footer__inner, .container { max-width: 1080px; margin: 0 auto; }
.site-title { color: #fff; display: inline-block; font-size: 24px; font-weight: 900; letter-spacing: .02em; }
.site-lead { margin: 6px 0 0; opacity: .9; }
.container { padding: 24px 16px 56px; }
.hero {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.2; margin: 0 0 10px; }
.breadcrumb { color: var(--color-muted); font-size: 13px; margin-bottom: 16px; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb span { margin: 0 5px; }
.page-title { font-size: clamp(24px, 4vw, 36px); line-height: 1.35; margin: 0 0 12px; }
.area-description, .search-box, .link-panel, .content-section, .post-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  padding: 18px;
  margin: 0 0 20px;
}
.search-grid, .form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
label, .form-control { display: block; font-weight: 800; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  margin-top: 4px;
  padding: 10px 12px;
}
textarea { min-height: 140px; resize: vertical; }
.form-control--wide { grid-column: 1 / -1; }
.submit-button, button {
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  padding: 11px 18px;
}
.area-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.area-link-grid a {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 800;
  padding: 9px 12px;
}
.post-list { display: grid; gap: 14px; }
.seo-copy p { margin: 0 0 12px; }
.pr-ranking {
  background: linear-gradient(135deg, #fff7ed, #ffffff 46%, #eff6ff);
  border: 1px solid #fed7aa;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  margin: 0 0 22px;
  padding: 18px;
}
.pr-ranking__head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.pr-ranking__head h2 { margin: 0 0 4px; }
.pr-ranking__head p { color: var(--color-muted); margin: 0; }
.pr-ranking__label {
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
}
.pr-ranking__list { display: grid; gap: 12px; }
.pr-card {
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  grid-template-columns: auto 86px 1fr auto;
  padding: 14px;
}
.pr-card__rank {
  background: #111827;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  padding: 8px 10px;
  text-align: center;
}
.pr-card__image {
  align-items: center;
  background: #f8fafc;
  border-radius: 18px;
  display: flex;
  height: 86px;
  justify-content: center;
  overflow: hidden;
  width: 86px;
}
.pr-card__image img { height: 100%; object-fit: cover; width: 100%; }
.pr-card__body h3 { font-size: 19px; margin: 0 0 4px; }
.pr-card__body p { margin: 0 0 6px; }
.pr-card__catch { color: var(--color-primary-dark); font-weight: 900; }
.pr-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-card__badges span {
  background: #eef2ff;
  border-radius: 999px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
}
.pr-card__button {
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  padding: 10px 16px;
  text-align: center;
  white-space: nowrap;
}
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.post-card--user { border-color: rgba(249, 115, 22, .35); }
.post-card__head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.post-card__name { font-size: 18px; font-weight: 900; }
.post-card__age, .post-card__area, .post-card__date { color: var(--color-muted); font-size: 13px; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.post-card__meta span {
  background: #eef2ff;
  border-radius: 999px;
  color: #334155;
  font-size: 12px;
  padding: 3px 9px;
}
.post-card__tag--job { background: #ecfeff !important; color: #155e75 !important; }
.post-card__tag--body_type { background: #f0fdf4 !important; color: #166534 !important; }
.post-card__tag--purpose { background: #fff7ed !important; color: #9a3412 !important; }
.post-card__title { font-size: 16px; margin: 0 0 8px; }
.post-card__message { margin: 0 0 12px; white-space: pre-wrap; }
.post-card__foot {
  align-items: center;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 12px;
}
.post-card__cta {
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 14px;
}
.alert { background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-md); color: #9a3412; padding: 10px 12px; }
.form-note, .empty { color: var(--color-muted); }
.info-table { border-collapse: collapse; margin: 12px 0 18px; width: 100%; }
.info-table th, .info-table td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.info-table th { background: #f8fafc; width: 180px; }
.hp-field { display: none; }
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 28px 16px;
}
.site-footer a { color: #fff; margin-right: 14px; }
@media (max-width: 760px) {
  .search-grid, .form-grid { grid-template-columns: 1fr; }
  .pr-card { grid-template-columns: 64px 1fr; }
  .pr-card__rank { grid-column: 1 / -1; }
  .pr-card__image { height: 64px; width: 64px; }
  .pr-card__button { grid-column: 1 / -1; }
  .post-card__foot { align-items: stretch; flex-direction: column; }
  .post-card__cta { text-align: center; }
}