/* ═══════════════════════════════════════════════════
   CUSTOM CURSOR — 小さなオレンジのドット + ホバーで広がるリング
   タッチデバイスでは無効化（JS側で判定しクラス付与）
═══════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor .gl-item,
  body.has-custom-cursor .fl-item {
    cursor: none;
  }
}

.cc-dot,
.cc-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.cc-dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  transition: opacity .2s ease, width .22s var(--ease), height .22s var(--ease), background .22s ease;
}

.cc-ring {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(244,112,0,0.55);
  transition: opacity .25s ease, width .28s var(--ease), height .28s var(--ease),
              border-color .28s ease, background .28s ease,
              left .12s linear, top .12s linear;
}

body.cc-active .cc-dot,
body.cc-active .cc-ring {
  opacity: 1;
}

/* ホバー時: リングが広がって薄く光る / ドットは少し縮む */
body.cc-hover .cc-dot {
  width: 4px;
  height: 4px;
}
body.cc-hover .cc-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(244,112,0,0.85);
  background: rgba(244,112,0,0.08);
}

/* クリック時: 軽く収縮するフィードバック */
body.cc-down .cc-ring {
  width: 26px;
  height: 26px;
}