@charset "utf-8";

/* ボヨンボヨンアニメーション */
.fuwafuwa img {
  display: inline-block;
  animation: floatBounce 3s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes floatBounce {
  0% {
    transform: scale(0.9) translateY(0);
  }
  10% {
    transform: scale(1) translateY(-8px);
  }
  20% {
    transform: scale(0.92) translateY(4px);
  }
  30% {
    transform: scale(1) translateY(-6px);
  }
  40% {
    transform: scale(0.92) translateY(3px);
  }
  100% {
    transform: scale(0.9) translateY(0);
  }
}

/* ビヨンビヨンアニメーション */
.bouncy-figure {
  display: inline-block;
  animation: bouncyStretch 2.5s infinite ease-in-out;
  transform-origin: center;
}
@keyframes bouncyStretch {
  0% {
    transform: scaleX(0.6);
  }
  20% {
    transform: scaleX(1);
  }
  35% {
    transform: scaleX(0.9);
  }
  70% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(0.6);
  }
}
.bouncy-figure img {
  transform: translateY(min(7vw, 50px));
}

/* ピクピクアニメーション */
/*
.pikupiku {
display: inline-block;
animation: shakeX 2s ease-in-out infinite;
}
@keyframes shakeX {
0% { transform: translateX(0); }
2% { transform: translateX(-10px); }
4% { transform: translateX(10px); }
6% { transform: translateX(-8px); }
8% { transform: translateX(8px); }
10% { transform: translateX(-6px); }
12% { transform: translateX(6px); }
14% { transform: translateX(-4px); }
16% { transform: translateX(4px); }
18% { transform: translateX(0); }
100% { transform: translateX(0); }
}
*/

/*光のエフェクト*/
.glow-effect {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.glow-effect img {
  display: block;
  width: 100%;
  height: auto;
}
/* 強調された光のスイープ */
.glow-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 350%;
  height: 350%;
  background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translate(-250%, -250%) rotate(25deg);
  animation: lightSweep 2.5s linear infinite;
  pointer-events: none;
}
@keyframes lightSweep {
  0% {
    transform: translate(-250%, -250%) rotate(25deg);
  }
  100% {
    transform: translate(250%, 250%) rotate(25deg);
  }
}

/* 円グラフ */
.circle-graph {
  /*
width: 284px;
height: 284px;
*/
  width: 100%;
  height: 100%;
  position: relative;
}
.circle-graph img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
}

@media (max-width: 660px) {
  .circle-graph img {
    width: 24rem;
  }
}

.circle-graph .circle-txt {
  position: absolute;
  left: 50%;
  bottom: -30px;
}

@media (max-width: 660px) {
  .circle-graph .circle-txt {
    bottom: -3.5rem;
  }
}

.circle-graph .circle-txt img {
  width: 280px;
  max-width: initial;
}

@media (max-width: 660px) {
  .circle-graph .circle-txt img {
    width: 31rem;
  }
}

.circle-graph.circle2 {
  margin-top: 75px;
}

@media (max-width: 660px) {
  .circle-graph.circle2 {
    margin-top: 8.6rem;
  }
}

.circle-graph.circle2 .circle-txt {
  position: absolute;
  right: 50%;
  top: -130%;
}

.circle-graph.circle2 .circle-txt img {
  width: 280px;
}

@media (max-width: 660px) {
  .circle-graph.circle2 .circle-txt img {
    width: 31rem;
  }
}

.circle-graph img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-graph.circle2 img {
  top: 50%;
  width: 210px;
}

@media (max-width: 660px) {
  .circle-graph.circle2 img {
    top: 50%;
    width: 24rem;
  }
}

svg {
  display: block;
  transform: rotate(-90deg);
}
.bg-circle {
  fill: none;
  stroke: #fff;
  stroke-width: 140;
}
.fg-circle {
  fill: none;
  stroke: #5a82aa;
  stroke-width: 140;
  stroke-linecap: butt;
  stroke-dasharray: 452.39;
  stroke-dashoffset: 452.39;
  transition: stroke-dashoffset 2s ease-out;
}

.circle2 .fg-circle {
  stroke-dasharray: 439.39;
  stroke-dashoffset: 439.39;
}

.circle2 .bg-circle {
  fill: none;
  stroke: #fff;
  stroke-width: 140;
}

.animate .fg-circle {
  stroke-dashoffset: 36.19;
}

.circle2.animate .fg-circle {
  stroke-dashoffset: 65.19;
}

#feeling .circle circle {
  fill: none;
  stroke-width: 14px;
}

/* 12時スタート */
#feeling .circle {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* ====== Ring layout (6等分の開始角) ====== */
.circle {
  --n: 6; /* 分割数 */
  --gap: 1.3; /* 仕切り幅(%) ※使わないがメモとして残し */
  --step: calc(100 / var(--n));
}
.circle circle {
  fill: none;
  stroke-linecap: butt; /* 端を丸くしない＝仕切りは広がらない */
  shape-rendering: geometricPrecision;
  /* 初期：0%表示（アニメ待機） */
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
}
/* 等間隔オフセット（-stepずつ）＋色 */
.circle circle:nth-child(1) {
  stroke: #aad2fb;
  stroke-dashoffset: 0;
}
.circle circle:nth-child(2) {
  stroke: #94bce5;
  stroke-dashoffset: calc(-1 * var(--step));
}
.circle circle:nth-child(3) {
  stroke: #8aa5cc;
  stroke-dashoffset: calc(-2 * var(--step));
}
.circle circle:nth-child(4) {
  stroke: #6990b9;
  stroke-dashoffset: calc(-3 * var(--step));
}
.circle circle:nth-child(5) {
  stroke: #527aa2;
  stroke-dashoffset: calc(-4 * var(--step));
}
.circle circle:nth-child(6) {
  stroke: #3c648c;
  stroke-dashoffset: calc(-5 * var(--step));
}

/* 線の太さはここで統一 */
#feeling .circle circle {
  stroke-width: 14px;
}

/* ====== Animate only when .graph-wrap gets .animate ====== */
.graph-wrap.animate .circle circle:nth-child(1) {
  animation: anime01 0.6s 0s forwards ease-in-out;
}
.graph-wrap.animate .circle circle:nth-child(2) {
  animation: anime02 0.6s 0.25s forwards ease-in-out;
}
.graph-wrap.animate .circle circle:nth-child(3) {
  animation: anime03 0.6s 0.5s forwards ease-in-out; /* 例: 19% */
}
.graph-wrap.animate .circle circle:nth-child(4) {
  animation: anime04 0.6s 0.75s forwards ease-in-out; /* 例: 9% */
}
.graph-wrap.animate .circle circle:nth-child(5) {
  animation: anime05 0.6s 1s forwards ease-in-out;
}
.graph-wrap.animate .circle circle:nth-child(6) {
  animation: anime06 0.6s 1.25s forwards ease-in-out;
}

/* ====== Keyframes (pathLength=100 前提で % を数値指定) ======
     1つ目/2つ目/5つ目/6つ目は16%表示の例。
     3つ目=19%、4つ目=9% はご提示の例に合わせています。 */
@keyframes anime01 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.5 84;
  }
}
@keyframes anime02 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.5 84;
  }
}
@keyframes anime03 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.7 81;
  } /* 例 */
}
@keyframes anime04 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.7 91;
  } /* 例 */
}
@keyframes anime05 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.7 101;
  }
}
@keyframes anime06 {
  0% {
    stroke-dasharray: 0 100;
  }
  60%,
  100% {
    stroke-dasharray: 16.7 111;
  }
}

/* 省エネモード（アニメ無効時は最終値を即適用） */
@media (prefers-reduced-motion: reduce) {
  .graph-wrap.animate .circle circle:nth-child(1) {
    animation: none;
    stroke-dasharray: 16 84;
  }
  .graph-wrap.animate .circle circle:nth-child(2) {
    animation: none;
    stroke-dasharray: 16 84;
  }
  .graph-wrap.animate .circle circle:nth-child(3) {
    animation: none;
    stroke-dasharray: 19 81;
  }
  .graph-wrap.animate .circle circle:nth-child(4) {
    animation: none;
    stroke-dasharray: 9 91;
  }
  .graph-wrap.animate .circle circle:nth-child(5) {
    animation: none;
    stroke-dasharray: 16 84;
  }
  .graph-wrap.animate .circle circle:nth-child(6) {
    animation: none;
    stroke-dasharray: 16 84;
  }
}

/* コンテナを500pxに */
.graph-wrap {
  position: relative;
  width: 52%;
  background: #fff; /* 仕切り色と同じに（重要） */
}

.graph-wrap span {
  top: 49%;
  left: 42%;
  transform: translateX(-50%);
  transform: translateY(-50%);
  z-index: 10;
  width: 50px !important;
}

.graph-wrap .circle {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gap-area {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* SVGの上に載せる */
  --gap-w: 6px; /* 仕切り幅（少し太めに） */
  --bleed: 6px; /* 円の外内に“はみ出す”量 */
  --gap-color: #fff;
}

.gap-area .gap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--gap-w);
  height: calc(100% + var(--bleed) * 2); /* ← 上下に余分を足す（はみ出し） */
  background: var(--gap-color);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(var(--deg, 0deg));
  /* にじみ消しの微オーバーラップ */
  box-shadow: 0 0 0 1px var(--gap-color); /* 1pxだけ外側を塗り足す */
}

/* 6本＝60°刻み */
.gap-area .gap:nth-child(1) {
  --deg: 0deg;
}
.gap-area .gap:nth-child(2) {
  --deg: 60deg;
}
.gap-area .gap:nth-child(3) {
  --deg: 120deg;
}
.gap-area .gap:nth-child(4) {
  --deg: 180deg;
}
.gap-area .gap:nth-child(5) {
  --deg: 240deg;
}
.gap-area .gap:nth-child(6) {
  --deg: 300deg;
}
/* 仕切りの太さをリング幅に合わせたいなら（任意）
   ドーナツの太さに近づけたい場合は下を使う：
   height: calc(100% - var(--rim, 80px));
   併せて translate を少し微調整するとより厳密に合います。*/

@media (max-width: 660px) {
  .gap-area {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2; /* SVGの上に載せる */
    --gap-w: 0.6rem; /* 仕切り幅（少し太めに） */
    --bleed: 0.6rem; /* 円の外内に“はみ出す”量 */
    --gap-color: #fff;
  }

  .graph-wrap span {
    width: 5rem !important;
  }
}

.move_img {
  position: absolute;
  overflow: hidden;
  width: 110px;
  top: 31%;
  left: 15%;
  z-index: 10;
}

@media (max-width: 660px) {
  .move_img {
    width: 12.5rem;
  }
}

.move_img.t_to_b {
  clip-path: inset(0 0 100% 0); /* top right bottom left */
  -webkit-clip-path: inset(0 0 100% 0);
}

/* 画面に入ったら、下方向へ徐々に開く */
.move_img.t_to_b.is-in {
  animation: wipeDown 0.5s ease-out forwards;
}

@keyframes wipeDown {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes wipeDown {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
  }
}