@charset "utf-8";
/*
 * 8軸評価レーダーチャート・平均比較
 * 名前空間 .hoiku-rc* (口コミリクエスト .hoiku-rr* / 気になる園 .hoiku-fav* と分離)
 * サイトカラー: teal #3f7375 / 濃teal #2f4f50 / 法人=オレンジ #e08a3c
 */

.hoiku-rc {
  border: 1px solid #dbe8e7;
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  /* 直上のSNSボタン群(.c-share-button)との間隔を確保。margin-top - 約10px が実ギャップ。
     PCは margin-top:32px(実ギャップ約22px)。 */
  margin: 32px 0 16px;
}
.hoiku-rc[hidden] { display: none; }

.hoiku-rc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.hoiku-rc__title {
  font-size: 15px;
  font-weight: 700;
  color: #2f4f50;
  margin: 0;
}
.hoiku-rc__total {
  font-size: 13px;
  color: #5c7a7a;
}
.hoiku-rc__total b { font-size: 18px; color: #3f7375; }

/* タブ (比較対象切替) */
.hoiku-rc__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.hoiku-rc__tab {
  appearance: none;
  border: 1px solid #cddedd;
  background: #f6faf9;
  color: #3f7375;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  line-height: 1;
}
.hoiku-rc__tab:hover { background: #eef4f3; }
.hoiku-rc__tab.is-active {
  background: #3f7375;
  border-color: #3f7375;
  color: #fff;
}

/* PC: 左=チャート / 右=数値 */
.hoiku-rc__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.hoiku-rc__chart {
  flex: 0 0 300px;
  max-width: 300px;
}
.hoiku-rc__side {
  flex: 1 1 auto;
  min-width: 0;
}

.hoiku-rc__svg { width: 100%; height: auto; display: block; }

/* グリッド */
.hoiku-rc__ring { fill: none; stroke: #e6eeed; stroke-width: 1; }
.hoiku-rc__spoke { stroke: #e6eeed; stroke-width: 1; }
.hoiku-rc__axis-label { font-size: 11px; fill: #5c7a7a; }

/* データ面: この園=teal / 地域=紫 / 法人=オレンジ。塗りは薄め・線は視認できる程度。
   2つの八角形が同一チャート上で明確に区別できる配色にする。 */
.hoiku-rc__area--self {
  fill: rgba(79, 143, 145, 0.18);
  stroke: #4f8f91;
  stroke-width: 2;
}
.hoiku-rc__area--comp {
  stroke-width: 2;
}
/* 都道府県=青紫 / 市区町村=ピンク赤 / 法人=オレンジ。互いに見分けやすい別色。 */
.hoiku-rc__area--comp.is-prefecture {
  fill: rgba(127, 143, 179, 0.14);
  stroke: #7f8fb3;
}
.hoiku-rc__area--comp.is-city {
  fill: rgba(215, 121, 143, 0.14);
  stroke: #d7798f;
}
.hoiku-rc__area--comp.is-company {
  fill: rgba(210, 138, 69, 0.14);
  stroke: #d28a45;
}

/* 凡例 */
.hoiku-rc__legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  font-size: 12px;
  color: #2f4f50;
}
.hoiku-rc__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hoiku-rc__legend-n { color: #90a3a3; margin-left: 4px; }
/* 凡例スウォッチはチャートの塗り/線色と一致させる */
.hoiku-rc__swatch {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block; box-sizing: border-box;
}
.hoiku-rc__swatch--self { background: rgba(79, 143, 145, 0.18); border: 2px solid #4f8f91; }
.hoiku-rc__swatch--comp.is-prefecture { background: rgba(127, 143, 179, 0.14); border: 2px solid #7f8fb3; }
.hoiku-rc__swatch--comp.is-city { background: rgba(215, 121, 143, 0.14); border: 2px solid #d7798f; }
.hoiku-rc__swatch--comp.is-company { background: rgba(210, 138, 69, 0.14); border: 2px solid #d28a45; }

/* 数値表 */
.hoiku-rc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.hoiku-rc__table th, .hoiku-rc__table td {
  border-bottom: 1px solid #eef4f3;
  padding: 6px 8px;
  text-align: right;
}
.hoiku-rc__table thead th {
  color: #5c7a7a;
  font-weight: 700;
  border-bottom: 1px solid #dbe8e7;
}
/* 数値表の見出し色をチャート/凡例と一致させる */
.hoiku-rc__th-self { color: #4f8f91; }
.hoiku-rc__th-comp.is-prefecture { color: #6376a6; }
.hoiku-rc__th-comp.is-city { color: #c85f78; }
.hoiku-rc__th-comp.is-company { color: #c47a35; }
.hoiku-rc__table tbody th {
  text-align: left;
  font-weight: 500;
  color: #2f4f50;
  white-space: nowrap;
}
.hoiku-rc__num { font-variant-numeric: tabular-nums; color: #5c7a7a; }
.hoiku-rc__num.is-self { color: #2f4f50; font-weight: 700; }

.hoiku-rc__note {
  margin: 10px 0 0;
  font-size: 11px;
  color: #90a3a3;
}

/* 既存バーの折りたたみ */
.hoiku-rc-details__toggle {
  appearance: none;
  border: 1px solid #dbe8e7;
  background: #f6faf9;
  color: #3f7375;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  margin: 4px 0 8px;
}
.hoiku-rc-details__toggle:hover { background: #eef4f3; }

/* JS無効時フォールバック: サーバ描画の数値一覧のみ表示 */
.hoiku-rc__chart:empty { display: none; }

/* スマホ: チャート上 / 数値下 */
@media (max-width: 600px) {
  .hoiku-rc { padding: 14px; }
  .hoiku-rc__body { flex-direction: column; gap: 12px; }
  .hoiku-rc__chart { flex-basis: auto; max-width: 320px; width: 100%; margin: 0 auto; }
  .hoiku-rc__side { width: 100%; }
  .hoiku-rc__axis-label { font-size: 10px; }
  /* SNSボタン群との間隔をSPで少し広げる(margin-top:38px≒実ギャップ28px)。
     下部は固定CTA(黒バー)と重ならない余白。 */
  .hoiku-rc { margin-top: 38px; margin-bottom: 24px; }
}