/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 04 2026 | 17:26:25 */
:root{
  --card:#fff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line2:#edf0f3;

  --green:#22c55e;
  --green2:#16a34a;

  --btn:#ffffff;
  --btnLine:#d1d5db;

  --shadow: 0 10px 30px rgba(17,24,39,.06);
  --radius: 14px;
}

/* =========================
   全体
   ========================= */
.wio-report{
  max-width: 1100px;
  margin: 28px auto 60px;
  padding: 0 18px;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
  line-height: 1.6;
}

.wio-report__title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 14px;
}

/* =========================
   カード
   ========================= */
.wio-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 14px;
}

.wio-card__header{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line2);
  background: #fff;
}

.wio-card__header-title{
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 900;
}

.wio-card__header-note{
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}

.wio-card__body{
  padding: 0;
}

/* =========================
   見出し（PC用）
   ========================= */
.wio-head{
  display: grid;
  grid-template-columns: 24% 12% 12% 10% 30% 12%;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line2);
  background: #fafafa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.wio-head__cell{
  display:flex;
  align-items:center;
}

/* =========================
   行（details）
   ========================= */
.wio-row{
  display:block;
  border-bottom: 1px solid var(--line2);
  background:#fff;
}

.wio-row:last-child{
  border-bottom: 0;
}

/* summary のマーカーを消す */
.wio-row > summary{
  list-style: none;
  cursor: pointer;
}
.wio-row > summary::-webkit-details-marker{
  display: none;
}

/* 行のグリッド */
.wio-row__grid{
  display:grid;
  grid-template-columns: 24% 12% 12% 10% 30% 12%;
  align-items:center;
  padding: 14px 18px;
}

.wio-cell{
  min-width: 0;
}

.wio-col-place{ }
.wio-col-num{ text-align:right; }
.wio-col-diff{ text-align:right; }
.wio-col-rate{ }
.wio-col-action{ text-align:right; }

/* 場所表示 */
.wio-place{
  font-weight: 900;
  display:inline-block;
}

.wio-sub{
  display:block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 800;
}

/* SPでだけ出すラベル */
.wio-label{
  display:none;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
  margin-right: 8px;
}

.wio-num{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* =========================
   保持率バー
   ========================= */
.wio-rate{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

.wio-rate__bar{
  width: 180px;
  height: 8px;
  background: #e9f7ee;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #d7f0e0;
  flex: 0 0 auto;
}

.wio-rate__bar > i{
  display:block;
  height:100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--green), var(--green2));
  border-radius: 999px;
}

.wio-rate__val{
  min-width: 72px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

/* =========================
   「詳細」ボタン（見た目）
   ========================= */
.wio-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--btnLine);
  background: var(--btn);
  color: var(--text);
  font-weight: 900;
  font-size: 12.5px;
  user-select:none;
}

.wio-btn__chev{
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(-45deg);
  margin-top: 1px;
}

.wio-row[open] .wio-btn__chev{
  transform: rotate(45deg);
  margin-top: -1px;
}

/* =========================
   詳細（下に100%で表示）
   ========================= */
.wio-row__detail{
  padding: 0 18px 18px;
  background:#fff;
}

.wio-detail-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfbfb;
  padding: 12px;
}

.wio-detail-card__title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
}

/* =========================
   明細テーブル
   ========================= */
.wio-mini-wrap{
  overflow:auto;
}

.wio-mini{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow:hidden;
  min-width: 640px;
}

.wio-mini th,
.wio-mini td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--line2);
  font-size: 12.5px;
}

.wio-mini th{
  background:#fafafa;
  color: var(--muted);
  text-align:center;
  font-weight:900;
  white-space:nowrap;
}

.wio-mini tr:last-child td{
  border-bottom:0;
}

.wio-mini td.num{
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* =========================
   注釈カード
   ========================= */
.wio-note-card{
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
}

.wio-note-card__title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
}

.wio-notes{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.wio-notes__item{
  display:flex;
  gap:10px;
  align-items:anchor-center;
  padding: 10px 12px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: #fbfbfb;
}

.wio-notes__num{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background:#fff;
  border: 1px solid var(--btnLine);
}

.wio-notes__text{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* =========================
   レスポンシブ（SP）
   ========================= */
@media (max-width: 860px){

  .wio-head{
    display:none;
  }

  .wio-row__grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px 14px;
  }

  .wio-col-place{
    grid-column: 1 / -1;
  }

  .wio-col-rate{
    grid-column: 1 / -1;
  }

  .wio-col-action{
    grid-column: 1 / -1;
    text-align:left;
  }

  .wio-label{
    display:inline-block;
  }

  .wio-rate{
    justify-content:flex-start;
  }

  .wio-rate__bar{
    width: 60%;
    min-width: 170px;
  }

  .wio-row__detail{
    padding: 0 14px 14px;
  }

  .wio-mini{
    min-width: 620px;
  }
}