@charset "UTF-8";
/* ------------------------------------------------------------------
   法人様へページ — 読み進み表示（本文帯の外に出す固定要素）

   .wvc-lp のスコープが効かない位置に置くため、クラス名は wvcp- で始める。
   動きは「スクロールに追従して値が変わる」だけで、勝手に動く演出は入れない。
   ------------------------------------------------------------------ */

.wvcp {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.wvcp.is-ready { opacity: 1; }

/* 目次パネルを開いているあいだは引っ込める。
   同じ「どこへ行けるか」を2つ重ねて見せない（パネルは全幅・レールはその上に来るため）。 */
.wvcp-toc-open .wvcp { opacity: 0; pointer-events: none; }
.wvcp > * { pointer-events: auto; }

/* ===== セクションの目盛り ===== */
.wvcp-rail {
  position: relative;
  width: 22px;
  height: 46vh;
  max-height: 420px;
  min-height: 240px;
}
.wvcp-rail-line,
.wvcp-rail-fill {
  position: absolute;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  top: 0;
}
.wvcp-rail-line { bottom: 0; background: #D2D2D2; }
.wvcp-rail-fill { height: 0; background: #24282E; }

.wvcp-dot {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.wvcp-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #C8C8C8;
}
.wvcp-dot.is-done::before { background: #24282E; }
.wvcp-dot.is-current::before {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: #24282E;
}
.wvcp-dot span {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 9px;
  background: #24282E;
  color: #fff;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease;
}
.wvcp-dot:hover span,
.wvcp-dot:focus-visible span,
.wvcp-dot.is-current span { opacity: 1; }
.wvcp-dot:focus-visible { outline: 2px solid #24282E; outline-offset: 2px; }

/* ===== 何％まで読んだか ===== */
.wvcp-ring { position: relative; width: 46px; height: 46px; }
.wvcp-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.wvcp-ring circle { fill: none; stroke-width: 2.5; }
.wvcp-ring-bg { stroke: #D2D2D2; }
.wvcp-ring-fg { stroke: #24282E; stroke-linecap: round; }
.wvcp-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: #24282E;
}

/* 背景が写真の上に重なっても読めるように、白の薄い座布団を敷く */
.wvcp-ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
}
.wvcp-ring svg, .wvcp-pct { position: relative; }
.wvcp-pct { position: absolute; }

@media (max-width: 1180px) {
  .wvcp { right: 12px; }
  .wvcp-dot span { display: none; }
  .wvcp-dot.is-current span { display: block; }
}

/* 幅が狭いときは目盛りをたたみ、％のリングだけ右下に残す */
@media (max-width: 900px) {
  .wvcp {
    top: auto;
    bottom: 18px;
    right: 14px;
    transform: none;
  }
  .wvcp-rail { display: none; }
  .wvcp-ring { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .wvcp, .wvcp-dot span { transition: none; }
}