@charset "utf-8";
/* CSS Document */

<style>
/* =========================
   Base
========================= */
.badge_wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 14px;
}
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#f2f6fb;
  font-size:13px;
}

/* =========================
   KPI (旧)
========================= */
.kpi_wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:12px 0 6px;
}
.kpi_item{
  background:#fff;
  border:1px solid #e6eef7;
  border-radius:10px;
  padding:10px;
  text-align:center;
}
.kpi_num{
  font-size:18px;
  font-weight:700;
  margin:0;
}
.kpi_label{
  font-size:12px;
  margin:4px 0 0;
  color:#555;
}

/* =========================
   Hub cards
========================= */
.hub_cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:10px;
}
.hub_card{
  display:block;
  border:1px solid #e6eef7;
  border-radius:14px;
  padding:14px;
  background:#fff;
  text-decoration:none;
}
.hub_title{
  font-size:16px;
  font-weight:700;
  margin:0 0 6px;
  color:#111;
}
.hub_desc{
  margin:0 0 8px;
  color:#333;
  line-height:1.7;
}
.hub_cta{
  margin:0;
  color:#0b63ce;
  font-weight:700;
}

/* =========================
   Category grid
========================= */
.category_grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:10px;
}
.cat_item{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e6eef7;
  border-radius:12px;
  padding:12px;
  background:#fff;
  text-decoration:none;
}
.cat_icon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#f2f6fb;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat_text{
  flex:1;
  color:#111;
  font-weight:700;
}
.cat_arrow{ color:#777; }

/* =========================
   CTA
========================= */
.cta_box{
  border:1px solid #d8e8ff;
  background:#f6fbff;
  border-radius:14px;
}
.cta_btns{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:10px;
}
.cta_btns .small{
  font-size:12px;
  opacity:.9;
}

/* SP */
@media (max-width: 740px){
  .kpi_wrap{ grid-template-columns:repeat(2,1fr); }
  .hub_cards{ grid-template-columns:1fr; }
  .category_grid{ grid-template-columns:1fr; }
  .cta_btns{ grid-template-columns:1fr; }
}

/* =========================
   掲載数KPI（PC横並び / SP縦並び）
========================= */
.kpiBar{
  margin:18px 0 8px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.kpiCard{
  background:#fff;
  border:1px solid #dfe6ee;
  border-radius:14px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.kpiCard--alert{
  border-color:#d7e6fb;
  background:linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}
.kpiIcon{
  width:46px;
  height:46px;
  border-radius:12px;
  background:#eef6ff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.kpiCard--alert .kpiIcon{ background:#eaf3ff; }
.kpiIcon i{
  font-size:20px;
  color:#1f6fbf;
}
.kpiBody{ min-width:0; }

.kpiLabel{
  font-size:13px;
  color:#2b3a4a;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.kpiNum{
  font-size:34px;
  font-weight:800;
  line-height:1;
  color:#0f2742;
}
.kpiUnit{
  font-size:14px;
  font-weight:700;
  margin-left:6px;
  color:#0f2742;
}
.kpiNote{
  margin-top:8px;
  font-size:12px;
  color:#5b6b7c;
  line-height:1.4;
}

/* PC：横並び */
@media (min-width: 900px){
  .kpiBar{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .kpiCard{ padding:18px 20px; }
  .kpiNum{ font-size:38px; }
}

.kpiCard{ position:relative; }
.kpiTag{
  position:absolute;
  top:12px;
  right:12px;
  font-size:11px;
  font-weight:700;
  color:#1f6fbf;
  background:#eef6ff;
  border:1px solid #d7e6fb;
  padding:4px 10px;
  border-radius:999px;
}

/* =========================
   KPI badges (3 cards)
========================= */
.kpi_wrap.kpi_wrap--source{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:16px 0 8px;
  align-items:stretch;
}

/* カード共通 */
.kpi_item{
  position:relative;
  border-radius:16px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid rgba(15, 23, 42, 0.10);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255,255,255,0.7) inset;
  overflow:hidden;
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 左上の「バッジ（小見出し）」 */
.kpi_item .kpi_label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  line-height:1;
  color:#0f172a;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(37, 99, 235, 0.08);
  border:1px solid rgba(37, 99, 235, 0.16);
  margin:0 0 10px;
}

/* 数字を強く */
.kpi_item .kpi_num{
  margin:0 0 6px;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.05;
  font-size:clamp(34px, 3.4vw, 46px);
  color:#0b1220;
}
.kpi_item .kpi_unit{
  font-weight:800;
  font-size:0.42em;
  opacity:.9;
  margin-left:4px;
}

/* 補足 */
.kpi_item .kpi_note{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:rgba(15, 23, 42, 0.70);
}

/* 視線を集める「左のアクセントバー」 */
.kpi_item::before{
  content:"";
  position:absolute;
  inset:10px auto 10px 10px;
  width:6px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(37, 99, 235, .85),
    rgba(34, 211, 238, .70)
  );
  opacity:.9;
}

/* うっすら光の装飾（邪魔しない） */
.kpi_item::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  top:-110px;
  background:radial-gradient(
    circle at 30% 30%,
    rgba(37,99,235,.18),
    transparent 60%
  );
  pointer-events:none;
}

/* hoverで“カード感” */
@media (hover:hover){
  .kpi_item:hover{
    transform:translateY(-3px);
    border-color:rgba(37, 99, 235, 0.22);
    box-shadow:
      0 16px 34px rgba(15, 23, 42, 0.12),
      0 1px 0 rgba(255,255,255,0.7) inset;
  }
}

/* ===== 合計（母数）だけ強調 ===== */
.kpi_item--total{
  background:linear-gradient(180deg, rgba(37, 99, 235, 0.10) 0%, #ffffff 55%);
  border-color:rgba(37, 99, 235, 0.22);
}
.kpi_item--total .kpi_label{
  background:rgba(37, 99, 235, 0.14);
  border-color:rgba(37, 99, 235, 0.26);
}
.kpi_item--total::before{
  background:linear-gradient(180deg, rgba(245, 158, 11, .95), rgba(37, 99, 235, .85));
}

/* ===== Googleレビューだけ “リンクであること” を視覚化 ===== */
.kpi_item--google{
  text-decoration:none; /* aタグでも下線を消す */
  color:inherit;
  cursor:pointer;
}
.kpi_item--google .kpi_label{
  background:rgba(16, 185, 129, 0.10);
  border-color:rgba(16, 185, 129, 0.18);
}

/* Googleっぽいアクセント（色は控えめに） */
.kpi_item--google::before{
  background:linear-gradient(180deg, rgba(16,185,129,.95), rgba(37,99,235,.85));
}

/* 右下の「CTA」 */
.kpi_item--google .kpi_cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  color:rgba(15, 23, 42, 0.85);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15, 23, 42, 0.12);
  background:rgba(255,255,255,0.75);
}

/* 矢印アイコン風（CSSだけ） */
.kpi_item--google .kpi_cta::after{
  content:"↗";
  font-weight:900;
  opacity:.85;
}

@media (hover:hover){
  .kpi_item--google:hover .kpi_cta{
    border-color:rgba(37, 99, 235, 0.25);
    box-shadow:0 10px 18px rgba(15, 23, 42, 0.10);
  }
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .kpi_wrap.kpi_wrap--source{
    grid-template-columns:1fr;
    gap:12px;
  }
  .kpi_item{ border-radius:14px; }
}

.kpi_item--google .google_rating .stars,
.kpi_item--google .google_rating .star_half{
  color:#f5b301 !important;
}


/* 数字＋「件」：中央揃え＆距離を詰める（最終採用版） */
.kpi_wrap.kpi_wrap--source .kpi_item .kpi_num{
  display:block;
  text-align:center;
  white-space:nowrap;
}
.kpi_wrap.kpi_wrap--source .kpi_item .kpi_unit{
  display:inline;
  margin-left:-4px;   /* 距離調整：-4〜-10で微調整 */
  padding:0;
  vertical-align:baseline;
}

/* 自社サイト（お客様の声）だけ「件」の詰めを弱める */
.kpi_wrap.kpi_wrap--source .kpi_item:not(.kpi_item--google):not(.kpi_item--total) .kpi_unit{
  margin-left:0px;  /* -6pxが強すぎるので緩める（0〜-3で調整） */
}

.kpi_item--total .kpi_note--total{
  margin-top:8px;
  font-weight:700;
  color:rgba(15, 23, 42, 0.72);
}