@charset "UTF-8";

.lp_wrap .float {
  position: fixed;
  bottom: 0%;
  z-index: 50;
  width: 10%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 50%;
  overflow: visible;
}
.lp_wrap .float a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-bottom: 5%;
  box-sizing: border-box;
}
.lp_wrap .float a::before {
  content: "";
  display: block;
  position: absolute;
  top: 5.7%;
  left: 5.7%;
  width: 88.6%;
  aspect-ratio: 1 / 1;
  background: url("../image/pc/float-circle.png") center center/contain no-repeat;
  animation: 20s float_circle linear infinite;
  pointer-events: none;
}
@keyframes float_circle {
  to {
    transform: rotateZ(-360deg);
  }
}
.lp_wrap .float a::after {
  content: "";
  display: block;
  position: absolute;
  top: -8%;
  left: -8%;
  width: 50%;
  aspect-ratio: 1 / 1;
  background: url("../image/pc/float-here.png") center center/contain no-repeat;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .lp_wrap .float a:hover {
    opacity: 0.6;
  }
}
.lp_wrap .float svg {
  fill: #fa5037;
  transform: rotateZ(-30deg);
  width: 66%;
}
@media all and (max-width: 750px) {
  .lp_wrap .float {
    width: 22%;
  }
  .lp_wrap .float a::after {
    top: -14%;
    left: -14%;
    width: 56%;
    background: url("../image/sp/float-here.png") center center/contain no-repeat;
  }
}