進捗ゲージ（円形プログレス）

/* ===== CSS変数（色の調整はここで）===== */
:root {
  --cg-color-start: #6EA8F7;  /* グラデーション開始色（薄め） */
  --cg-color-end:   #1554A0;  /* グラデーション終了色（濃いめ） */
  --cg-track-bg:    #E5E7EB;
  --cg-text:        #1A2332;
  --cg-text-muted:  #5A6A7A;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; padding: 32px 24px; background: #F4F6F9; }

/* ===== カード ===== */
.cg-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #E8EDF2;
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}

/* ===== ゲージ（SVG＋中央テキストの基準コンテナ）===== */
.cg-gauge {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

/* 12時の位置から時計回りに弧が伸びるよう90度回転させる */
.cg-svg {
  transform: rotate(-90deg);
}

.cg-track {
  fill: none;
  stroke: var(--cg-track-bg);
  stroke-width: 14;
}

.cg-bar {
  fill: none;
  stroke: url(#cgGradient);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

/* SVGの中央にパーセント表示を重ねる */
.cg-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cg-percent {
  font-size: 32px;
  font-weight: 700;
  color: var(--cg-text);
}

.cg-sublabel {
  font-size: 12px;
  color: var(--cg-text-muted);
  margin-top: 4px;
}

.cg-title {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--cg-text-muted);
}

/* ===== デモ用スライダー ===== */
.cg-slider-wrap {
  margin-top: 20px;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.cg-slider-label {
  display: block;
  font-size: 13px;
  color: var(--cg-text-muted);
  margin-bottom: 8px;
}

.cg-slider {
  width: 100%;
  cursor: pointer;
}

var TOTAL_ITEMS = 10;  // プロフィール入力項目の総数
var INIT_ITEMS  = 8;   // 初期の入力済み項目数（80%）
var RADIUS       = 78; // SVG circle の半径（r属性と合わせる）
var CIRCUMFERENCE = 2 * Math.PI * RADIUS; // 円周

var barEl       = document.getElementById('cgBar');
var centerEl    = document.getElementById('cgCenter');
var percentEl   = document.getElementById('cgPercent');
var sublabelEl  = document.getElementById('cgSublabel');
var sliderEl    = document.getElementById('cgSlider');
var sliderValEl = document.getElementById('cgSliderVal');

var animationFrameId = null; // 実行中のアニメーションを中断できるように保持

// 円弧の見える長さを割合に応じて設定する
function setProgress(percent) {
  var offset = CIRCUMFERENCE - (CIRCUMFERENCE * percent / 100);
  barEl.style.strokeDasharray  = CIRCUMFERENCE;
  barEl.style.strokeDashoffset = offset;
}

// 中央のパーセント・実数表示とアクセシビリティ属性を更新する
function updateLabels(items, percent) {
  percentEl.textContent  = percent + '%';
  sublabelEl.textContent = items + ' / ' + TOTAL_ITEMS + ' 項目 入力済み';
  centerEl.setAttribute('aria-valuenow', percent);
  centerEl.setAttribute('aria-label', 'プロフィール入力完了率 ' + percent + '%');
}

// 0 から targetItems まで弧と数値を同時にカウントアップさせる
function animateTo(targetItems) {
  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId);
  }

  var duration   = 800; // アニメーション時間（ミリ秒）
  var startTime  = null;

  function step(timestamp) {
    if (startTime === null) startTime = timestamp;
    var progress = Math.min((timestamp - startTime) / duration, 1);
    var currentItems  = Math.round(targetItems * progress);
    var currentPercent = Math.round(currentItems / TOTAL_ITEMS * 100);

    setProgress(currentPercent);
    updateLabels(currentItems, currentPercent);

    if (progress < 1) {
      animationFrameId = requestAnimationFrame(step);
    } else {
      animationFrameId = null;
    }
  }

  animationFrameId = requestAnimationFrame(step);
}

// スライダー操作はアニメーションさせず即座に反映する
sliderEl.addEventListener('input', function() {
  var items   = parseInt(this.value, 10);
  var percent = Math.round(items / TOTAL_ITEMS * 100);

  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }

  sliderValEl.textContent = items;
  setProgress(percent);
  updateLabels(items, percent);
});

// 初期状態に戻す（リセットボタンからも呼ばれる）
function resetDemo() {
  sliderEl.value          = INIT_ITEMS;
  sliderValEl.textContent = INIT_ITEMS;
  setProgress(0);
  updateLabels(0, 0);
  animateTo(INIT_ITEMS);
}

// 初期化（ページ読み込み時に0%→目標値までアニメーション）
resetDemo();