@charset "utf-8";
/* ------------------------------------------------------------
   検査実績チャートウィジェット専用スタイル (rc-style.css)
   すべて #rc-widget 配下に限定し、既存サイトと干渉しません。
   ------------------------------------------------------------ */

/* ============================================================
   1. 基本レイアウト
   ============================================================ */
#rc-widget {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans JP", sans-serif;
}

/* ── 累計件数 ───────────────────────────────────────── */
#rc-widget .rc-cumulative {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
#rc-widget .rc-cumulative span {
  font-size: 1.8rem;
  font-weight: bold;
  color: #b08b4f;
}

/* ── 年度タブ ────────────────────────────────────── */
#rc-widget .rc-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  border-bottom: 2px solid #0c997c;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
#rc-widget .rc-tabs::-webkit-scrollbar {
  height: 4px;
}
#rc-widget .rc-tabs::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2px;
}
#rc-widget .rc-tab {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}
#rc-widget .rc-tab.active {
  color: #0c997c;
}
#rc-widget .rc-tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0c997c;
  border-radius: 2px 2px 0 0;
}

/* ── 年度合計 （見出し） ─────────────────────────── */
#rc-widget .rc-year-total {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1rem;
}
#rc-widget .rc-year-total span:last-child {
  font-weight: bold;
  color: #b08b4f;
}

/* ============================================================
   2. グラフカードレイアウト（flex で 1–4 列切替）
   ============================================================ */
#rc-widget .rc-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* ── グラフカード ───────────────────────────────── */
#rc-widget .rc-card {
  /* PC・タブレット: 最大4列 (25%)、ただし幅が200〜280pxの範囲で自動調整 */
  flex: 1 1 clamp(200px, 25%, 280px);
  max-width: clamp(200px, 25%, 280px);
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}
#rc-widget .rc-card:hover {
  transform: translateY(-4px);
}
#rc-widget .rc-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
#rc-widget .rc-card .rc-count {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
#rc-widget .rc-card canvas {
  width: 100%;
  height: auto;
}

/* ── レスポンシブ切替 ───────────────────────────── */
/* スマホ（〜768px）：2列 */
@media (max-width: 768px) {
  #rc-widget .rc-card {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
/* スマホ最小幅（〜480px）：も2列を維持 */
@media (max-width: 480px) {
  #rc-widget .rc-card {
    flex: 1 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

/* ============================================================
   3. 注意書きエリア
   ============================================================ */
#rc-widget .rc-guideline {
  font-size: 0.7rem;
  color: #666;
  text-align: center;
  line-height: 1.4;
}
#rc-widget .rc-guideline .rc-period {
  font-weight: bold;
  color: #b08b4f;
}