.photoBlock {
  position: relative;
  overflow-x: hidden;
}

.floating-button--live {
  position: absolute;
  top: calc(380 * (100vw / 375));
  right: 3%;
  width: 20rem;
  height: 20rem;
  background-color: transparent;
  color: #fff;
  font-size: 2rem;
  z-index: 10;
}
.floating-button--live .live-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.floating-button__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.floating-button--live .floating-button--mov-icon,
.floating-button--live .floating-button--sonar-effect {
  position: absolute;
}

/* ムービーアイコンのアニメーション */
.floating-button--live .floating-button--mov-icon {
  z-index: 2;
  width: 60%;
}
.floating-button--live .floating-button--mov-icon path {
  fill: transparent;
  stroke: transparent;
}
.floating-button--live.isActive .floating-button--mov-icon path {
  stroke-dasharray: 180;
  stroke-width: 1px;
  animation: line-effect 3s .3s linear forwards;
}
@-webkit-keyframes line-effect {
  0% {
    stroke: #fff;
    stroke-dashoffset: 180;
  }
  99.9%, to {
    stroke: #fff;
    stroke-dashoffset: 0;
  }
}
@keyframes line-effect {
  0% {
    stroke: #fff;
    stroke-dashoffset: 180;
  }
  99.9%, to {
    stroke: #fff;
    stroke-dashoffset: 0;
  }
}

/* 円形のアニメーション */
.floating-button--live .floating-button--circle {
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.floating-button--live .floating-button--circle circle {
  fill: transparent;
}
.floating-button--live.isActive .floating-button--circle circle {
  fill: transparent;
  stroke: var(--marchhareorange);
  stroke-dasharray: 360;
  stroke-width: 110px;
  animation: circle-effect 1s ease-in-out forwards;
}
@-webkit-keyframes circle-effect {
  0% {
    stroke-dashoffset: 450;
  }
  99.9%, to {
    stroke-dashoffset: 0;
  }
}
@keyframes circle-effect {
  0% {
    stroke-dashoffset: 450;
  }
  99.9%, to {
    stroke-dashoffset: 0;
  }
}

/* 波紋 */
.floating-button--live .floating-button--sonar-effect {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 10px;
  overflow: hidden;
}
.floating-button--live.isActive .floating-button--sonar-effect {
  animation: sonar-effect 2s 2s linear infinite;
}
@-webkit-keyframes sonar-effect {
  from {
    background-color: rgba(255, 122, 11, 0.5);
    opacity: .5;
  }
  to {
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes sonar-effect {
  from {
    background-color: rgba(255, 122, 11, 0.5);
    opacity: .5;
  }
  to {
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
    opacity: 0;
  }
}


@media only screen and (min-width: 768px) {
  .photoBlock {
    overflow-x: visible;
  }

  .floating-button--live {
    top: 1rem;
    right: 1rem;
    max-width: 45px;
    max-height: 45px;
  }

  .floating-button--live .live-link,
  .floating-button--live .floating-button--sonar-effect {
    border-radius: 8px;
  }
}

@media only screen and (min-width: 980px) {
  .floating-button--live {
    max-width: 60px;
    max-height: 60px;
  }

  .floating-button--live .live-link,
  .floating-button--live .floating-button--sonar-effect {
    border-radius: 10px;
  }
}