/* トップページ：YouTube動画 */

.home-video {
 position: relative;
 z-index: 1;
 scroll-margin-top: clamp(76px, 6vw, 112px);
 padding: clamp(90px, 7.29167vw, 140px) 0 clamp(100px, 8.33333vw, 160px);
 background:
  radial-gradient(circle at 12% 20%, rgb(245 49 112 / 11%), transparent 25%),
  radial-gradient(circle at 88% 82%, rgb(172 125 32 / 12%), transparent 24%),
  linear-gradient(180deg, var(--color-white), var(--color-accent-pink-surface));
 color: var(--color-text);
 overflow: hidden;
}

.home-video--wave {
 padding-top: calc(clamp(90px, 7.29167vw, 140px) + clamp(50px, 7.29167vw, 140px));
 background:
  radial-gradient(circle at 12% 20%, rgb(245 49 112 / 11%), transparent 25%),
  radial-gradient(circle at 88% 82%, rgb(172 125 32 / 12%), transparent 24%),
  linear-gradient(180deg, var(--color-surface-cream), var(--color-accent-pink-surface));
}

.home-video__top-curve {
 position: absolute;
 z-index: 1;
 display: block;
 width: 100%;
 height: clamp(50px, 7.29167vw, 140px);
 inset: -1px 0 auto;
 fill: var(--color-white);
 pointer-events: none;
}

.home-video__inner {
 position: relative;
 width: min(var(--content-width-1200), calc(100% - 80px));
 margin-inline: auto;
}

.home-video__inner::before,
.home-video__inner::after {
 content: '';
 position: absolute;
 z-index: -1;
 border-radius: 50%;
 pointer-events: none;
}

.home-video__inner::before {
 top: 22%;
 left: -55px;
 width: 110px;
 height: 110px;
 border: 2px solid rgb(245 49 112 / 22%);
}

.home-video__inner::after {
 right: -42px;
 bottom: -35px;
 width: 84px;
 height: 84px;
 background: rgb(172 125 32 / 13%);
}

.home-video__header {
 margin-bottom: clamp(38px, 3.64583vw, 70px);
 text-align: center;
}

.home-video__title {
 margin: 0;
 color: var(--color-text);
 font-family: var(--font-family-base);
 font-size: var(--font-size-60);
 font-weight: var(--font-weight-bold);
 line-height: 1.25;
 letter-spacing: .04em;
}

.home-video__title span {
 color: var(--color-accent-pink);
}

.home-video__title-break {
 display: none;
}

.home-video__lead {
 margin: clamp(12px, 1.04167vw, 20px) 0 0;
 color: var(--color-text);
 font-size: var(--font-size-24);
 font-weight: var(--font-weight-bold);
 line-height: 1.7;
}

.home-video__frame {
 position: relative;
 padding: clamp(8px, .83333vw, 16px);
 border: 3px solid var(--color-accent-pink-border);
 border-radius: clamp(22px, 2.08333vw, 40px);
 background: var(--color-white);
 box-shadow: 0 20px 60px rgb(164 99 119 / 14%);
 overflow: hidden;
}

.home-video__frame::before {
 content: '';
 position: absolute;
 z-index: 1;
 inset: 8px;
 border: 1px solid rgb(172 125 32 / 28%);
 border-radius: clamp(15px, 1.5625vw, 30px);
 pointer-events: none;
}

.home-video__frame iframe {
 position: relative;
 z-index: 0;
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 border: 0;
 border-radius: clamp(14px, 1.5625vw, 30px);
 background: #000;
}



@media (min-width: 768px) and (max-width: 1199px) {
 .home-video__inner {
  width: min(var(--content-width-980), calc(100% - clamp(40px, calc(25.745px + 1.85615vw), 48px)));
 }
}

@media (max-width: 767px) {
 .home-video {
  padding: 80px 0 100px;
 }

 .home-video--wave {
  padding-top: 120px;
 }

 .home-video__top-curve {
  height: clamp(30px, 6.5189vw, 50px);
 }

 .home-video__inner {
  width: calc(100% - 32px);
 }

 .home-video__header {
  margin-bottom: 32px;
 }

 .home-video__title {
  font-size: var(--font-size-42);
 }

 .home-video__title-break {
  display: block;
 }

 .home-video__lead {
  font-size: var(--font-size-16);
  text-align: left;
 }

 .home-video__frame {
  padding: 6px;
  border-width: 2px;
  border-radius: 18px;
 }

 .home-video__frame::before {
  inset: 6px;
  border-radius: 12px;
 }

 .home-video__frame iframe {
  border-radius: 12px;
 }

 .home-video__inner::before {
  left: -30px;
  width: 64px;
  height: 64px;
 }

 .home-video__inner::after {
  right: -18px;
  width: 54px;
  height: 54px;
 }
}