.donut-section {
  padding: 15px 0 2rem;
  text-align: center;
}

.donut-title {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.donut-chart {
  max-width: 515px;
  margin: 0 auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.donut-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 円の共通設定 */
.donut-bg,
.donut-progress {
  fill: none;
  stroke-width: 35;
  cx: 100;
  cy: 100;
  r: 80;
}

/* 背景のドーナツ */
.donut-bg {
  stroke: #e5e5e5;
}

/* 進捗のドーナツ（色や太さを変えたい場合はここを調整） */
.donut-progress {
  stroke: url(#donutGradient);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  /* 初期状態では0%（ぐるっと1周分を非表示） */
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

/* 中央テキスト */
.donut-text-percent {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
}
.donut-text-symbol {
  font-size: 60%;
}
.donut-text-label {
  font-family: 'ヒラギノ角ゴ ProN W7', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  fill: #a43f51;
}

.donut-text-percent {
  font-size: 28px;
  font-weight: 700;
  fill: #a74457;
}

@media (max-width: 768px) {
  .donut-section {
    padding: 15px 1rem 2rem;
  }
}


/* =========================================
   arrow.png 用アニメーション
   上下にふわふわと微細に動く矢印
========================================= */
.arrow-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
}

.floating-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
animation: arrowFloat 1.2s ease-in-out infinite alternate;
}

@keyframes arrowFloat {
0% {
  margin-top: -2px;
}
50% {
  margin-top: 2px;
}
100% {
  margin-top: -2px;
}
}