@charset "UTF-8";

#yodogawa h3 {
  margin-bottom: 16px;
}
#enjoy .enjoy-contents-1 h3 img {
    width: 38px;
}
#enjoy .enjoy-contents h3 {
  gap: 10px;
}
#enjoy .enjoy-contents-3 h3 img {
    width: 40px;
}
#enjoy .enjoy-contents-2, #enjoy .enjoy-contents-3 {
  margin-top: 50px;
}
.btn-more {
  margin-top: 24px;
}

#live h3::before {
    content: "";
    display: inline-block;
    background: url(../img/index/icon-camera.png) no-repeat;
    background-size: contain;
    width: 58px;
    height: 34px;
    -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    top: 11px;
    right: 6px;
    position: relative;
}

#live {
  background-color: #D6EFF9;
  padding: 50px 0;
  position: relative;
  z-index: 1;
}

#live .inner .yt-wrap{
  position: relative;
  max-width: 900px;
  width: 77vw;
  aspect-ratio: 16 / 9;
  margin: 20px auto 0;
}
#live .inner .yt-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 103%;
  border-radius: 30px;
  border: 5px solid #FFF;
  background: #FFF;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
#live .inner .btn {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}
#live .inner .btn button {
  --live-btn-ready-bg: #FFE771;
  --live-btn-disabled-bg: #BCBCBC;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 3px solid #454545;
  background: var(--live-btn-ready-bg);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#live .inner .btn button:disabled {
  background: var(--live-btn-disabled-bg);
  transform: translateY(2px);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
}
#live .inner .btn button.is-cooling-down:disabled {
  background: linear-gradient(
    to top,
    var(--live-btn-ready-bg) 0%,
    var(--live-btn-ready-bg) calc(var(--cooldown-progress, 0) * 1%),
    var(--live-btn-disabled-bg) calc(var(--cooldown-progress, 0) * 1%),
    var(--live-btn-disabled-bg) 100%
  );
}
#live .inner .btn button::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) scale(0.88);
  width: 60px;
  height: 36px;
  background: url('../img/index/waves.svg') center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
#live .inner .btn button.wave::before {
  animation: radioWave 1.5s ease-out infinite, waveBlink 0.5s step-end infinite;
}
#live .credit {
  text-align: center;
  margin-top: .5em;
  font-size: 1.2rem;
}

@keyframes radioWave {
  0% {
    transform: translateX(-50%) scale(0.88);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-12px) scale(1.08);
    opacity: 0;
  }
}

@keyframes waveBlink {
  0%,
  49% {
    filter: brightness(1);
  }
  50%,
  100% {
    filter: brightness(1.5);
  }
}
@media (hover: hover) {
  #live .inner .btn button:hover {
    transform: translateY(2px);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
  }
}
@media (min-width: 641px) {
  #news {
    max-width: 780px;
  }

  .parking {
    width: 92%;
  }
  #live h3::before {
    width: 74px;
    height: 43px;
    top: 14px;
    right: 10px;
  }
  #live .inner .yt-wrap {
    margin-top: 35px;
  }
  #live .inner .btn {
    gap: 30px;
    margin-top: 30px;    
  }
  #live .inner .btn button {
    width: 100px;
    height: 100px;
    border-width: 4px;
  }
  #live .inner .btn button::before {
    top: -80px;
    transform: translateX(-50%) scale(0.88);
    width: 96px;
    height: 58px;
  }
  #live {
    padding: 70px 0;
  }
  #live .inner iframe {
    border-radius: 70px;
  }
  #live .inner .yt-wrap iframe {
    height: 101%;
  }
  #live .credit {
    margin-top: 1em;
    font-size: 1.4rem;
  }
}
@media (min-width: 992px) {
  #enjoy .enjoy-contents-1 h3 img {
    width: 40px;
  }
  #enjoy .enjoy-contents {
    grid-template-areas:
      "image text"
      "image button";
  }
  #enjoy .enjoy-contents-3 h3 img {
    width: 46px;
  }
  #enjoy .enjoy-contents-3 {
    margin-top: 100px;
    padding-top: 0;
    grid-template-areas:
      "text image"
      "button image";
  }
}
@media (min-width: 1024px) {
  #yodogawa .text .btn-more {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  #concept h3 {
    margin-top: 30px;
    padding-left: calc((100vw - 900px) / 2);
    text-align: left;
  }
}
@media (max-width: 640px) {
  #news .sns-wrapper > div {
    width: 100%;
  }
  #info .inner div dl dd span {
    font-size: 96%;
  }
}