/* ===== Stage / Container ===== */
.circle-section {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
}

/* PC（641px〜）ではヘッダー高さぶん余白を追加 */
@media (min-width: 641px) {
  .circle-section {
    padding-top: 230px;
  }
}

@media (max-width: 640px) {
  .circle-section {
    min-height: 300px;
    padding-bottom: 0;
  }

  .circle-container {
    height: 340px;
  }
}

@media (max-width: 640px) {
  .circle-container .hc-stage {
    top: 45%;
  }
}



.circle-container {
  position: relative;
  width: min(80vw, 800px);
  height: min(80vw, 800px);
  overflow: visible;
}

/* .circle-container .hc-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 800px);
  height: min(80vw, 800px);
  pointer-events: none;
} */

.circle-container .hc-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.hc-fill,
.hc-fill-global {
  display: none !important;
}

/* すべて中心アンカー（テキストは除外） */
.circle,
.dot {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* ===== Circles (base & colors) ===== */
.circle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  opacity: .95;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

.circle1 {
  background: #144C65;
}

/* Design */
.circle2 {
  background: #437084;
}

/* Digital */
.circle3 {
  background: #7294a3;
}

/* Strategy */
.circle4 {
  background: #a1b7c1;
}

/* Marketing */
.circle5 {
  background: #d0dbe0;
}

/* Branding */

/* ===== Final Circle (成果) ===== */
.circle6 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
      #144C65 0%,
      /* メイン色（中心） */
      #0F3A4C 50%,
      /* 少し暗くした中間 */
      #0A2733 100%
      /* ダークトーンで引き締め */
    );
  box-shadow: 0 0 40px rgba(20, 76, 101, .28), 0 0 90px rgba(20, 76, 101, .16);
  isolation: isolate;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* ソフトハイライト */
.circle6::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side at 34% 30%,
      rgba(255, 255, 255, .35) 0%,
      rgba(255, 255, 255, .12) 22%,
      rgba(255, 255, 255, 0) 58%);
  filter: blur(6px);
  opacity: .78;
}

/* 魚の鱗の“いろめき”（控えめ回転） */
.circle6::after {
  --irid-opacity: .26;
  --rot-dur: 28s;
  --shift-dur: 24s;
  --scale-w: 40px;
  --scale-h: 26px;
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--irid-opacity);
  transform-origin: 50% 50%;
  background:
    linear-gradient(120deg,
      rgba(255, 245, 225, .14) 0%,
      rgba(170, 220, 255, .16) 38%,
      rgba(255, 190, 230, .13) 60%,
      rgba(255, 240, 220, .15) 100%),
    linear-gradient(300deg,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, .16) 24%,
      rgba(255, 255, 255, .06) 48%,
      rgba(255, 255, 255, .12) 72%,
      rgba(255, 255, 255, .06) 100%);
  background-size: 240% 240%, 200% 200%;
  background-position: 0% 0%, 100% 0%;
  animation: irid-rotate var(--rot-dur) linear infinite,
    irid-shift var(--shift-dur) linear infinite;
  filter: saturate(1) contrast(1) blur(.15px);
}

/* 鱗マスク（対応ブラウザ） */
@supports (mask: radial-gradient(#000, transparent)) or (-webkit-mask: radial-gradient(#000, transparent)) {
  .circle6::after {
    mask:
      radial-gradient(circle at 50% 42%, #000 36%, transparent 37%) 0 0 / var(--scale-w) var(--scale-h) repeat,
      radial-gradient(circle at 50% 42%, #000 36%, transparent 37%) calc(var(--scale-w)/2) calc(var(--scale-h)/2) / var(--scale-w) var(--scale-h) repeat;
    -webkit-mask:
      radial-gradient(circle at 50% 42%, #000 36%, transparent 37%) 0 0 / var(--scale-w) var(--scale-h) repeat,
      radial-gradient(circle at 50% 42%, #000 36%, transparent 37%) calc(var(--scale-w)/2) calc(var(--scale-h)/2) / var(--scale-w) var(--scale-h) repeat;
  }
}

@keyframes irid-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes irid-shift {
  0% {
    background-position: 0% 0%, 100% 0%;
  }

  50% {
    background-position: 120% 20%, 10% 5%;
  }

  100% {
    background-position: 240% 0%, -20% 0%;
  }
}

.irid-soft .circle4::after {
  --irid-opacity: .18;
  --rot-dur: 36s;
  --shift-dur: 32s;
}

@media (prefers-reduced-motion:reduce) {
  .circle6::after {
    animation: none;
  }
}

.result-text {
  /* circle6 の flex 中央揃えをそのまま使うので position は不要 */
  position: static;
  transform: none;
  text-align: center;
  color: #111;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}

.result-line1 {
  font-size: clamp(20px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ここがズレの原因だったので margin を削除 or 0 に */
.result-line2 {
  margin-top: .4rem;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 700;
  color: #ffffff;
}

/* ===== Labels / Text ===== */
/* .label {
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  pointer-events: none;
  z-index: 3;
  text-align: center;
} */

/* ===== Labels / Text ===== */
.label {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  pointer-events: none;
  z-index: 4;
  text-align: center;
}

.result-text {
  position: static;
  transform: none;
  text-align: center;
  color: #111;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}

.result-line1 {
  font-size: clamp(16px, 2.6vw, 24px);
  letter-spacing: .02em;
  opacity: .9;
}

.result-line2 {
  margin-top: .35rem;
  font-size: clamp(20px, 4.8vw, 40px);
  font-weight: 800;
  letter-spacing: .02em;
}

/* 交点ガイド（任意） */
.dot {
  width: 8px;
  height: 8px;
  background: #111;
  border-radius: 50%;
  opacity: .3;
  pointer-events: none;
  z-index: 2;
}

/* ===== 小円だけの控えめ“キラッ” ===== */
.circle:not(.circle4) {
  --tw-o: 0;
  --tw-rot: 0deg;
  --tw-scale: 1;
  --tw-intensity: .32;
}

.circle:not(.circle4).twinkle::before,
.circle:not(.circle4).twinkle::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--tw-o);
  transform: rotate(var(--tw-rot)) scale(var(--tw-scale));
}

.circle:not(.circle4).twinkle::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .18) 28%, rgba(255, 255, 255, 0) 60%);
  filter: blur(6px);
  opacity: calc(var(--tw-o)*.65);
}

.circle:not(.circle4).twinkle::after {
  background:
    radial-gradient(circle at 55% 45%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .40) 12%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(ellipse 60% 36% at 52% 46%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 70%);
  background-blend-mode: screen, screen;
  filter: blur(.25px);
  opacity: calc(var(--tw-o)*var(--tw-intensity));
}

.circle.twinkle--soft::before {
  filter: blur(5px);
  opacity: .5;
}

.circle.twinkle--soft::after {
  opacity: calc(var(--tw-o)*.22);
}

/* スマホ用追記 */

/* =========================
   Mobile 調整（〜640px）
   ========================= */
@media (max-width: 640px) {
  .circle-container {
    width: 320px;
    height: 390px;
    margin-top: 80px;
  }

  /* 小円を調整 */
  .circle {
    width: 110px;
    height: 110px;
  }

  /* 大円（大きな成果）→ container より少し大きい程度にする */
  .circle6 {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* ラベル文字 */
  .label {
    font-size: 14px;
  }

  .result-line1 {
    font-size: 14px;
  }

  .result-line2 {
    font-size: 22px;
  }

  .circle6::after {
    --irid-opacity: .16;
    filter: blur(.3px);
  }

}