/* buttonタグのリセットCSS（不要な場合、セレクタごと削除してください） */
button {
  padding: 0;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  border: none;
  text-decoration: none;
}

/*
 * 角度の値を保持するCSS変数を定義
 * 対応ブラウザ: https://caniuse.com/?search=%40property
 */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.buttonOutlineGlow {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 80px;
  padding: 2px;
  font-size: 30px;
  color: #666;
  text-align: center;
  overflow-wrap: anywhere;
  background-color: rgba(255,255,255,0.3);
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
  text-decoration: none;
}

.buttonOutlineGlow_bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(from var(--angle), #888, #939393, #888, #939393, #888);
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
  opacity: 0;
  animation: gradient-spin 3s linear 0s infinite;
}

@keyframes gradient-spin {
  0% {
    --angle: 0deg;
  }

  100% {
    --angle: 360deg;
  }
}

.buttonOutlineGlow_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color:rgba(255,255,255,0.3);
  border-radius: 32px; /* (buttonの高さ / 2) の値 */
}

@media (any-hover: hover) {
  .buttonOutlineGlow .buttonOutlineGlow_bg {
    transition: opacity 0.3s;
  }

  .buttonOutlineGlow:hover {
    background-color: rgba(255,255,255,0.3);
  }

  .buttonOutlineGlow:hover .buttonOutlineGlow_bg {
    opacity: 1;
  }
}