@charset "UTF-8";
/* Meet-up Box KV hero — static export
   使い方: <link rel="stylesheet" href="kv-hero.css"> と index.html の <section class="kv-hero"> をコピー
   assets/ フォルダをそのまま同階層に配置してください */
.kv-hero {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 2.0588235294;
  overflow: hidden;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
/* 1400x830 のデザインをそのままコンテナ幅に合わせて縮小 */
.kv-hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1400px;
  height: 680px;
  transform: scale(calc(100cqw / 1400px));
  transform-origin: top left;
}
.kv-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(875px 655px at 82% 34%, #f4f8ff 0%, rgba(255, 255, 255, 0) 60%);
}
.kv-hero__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 466px;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000 150px);
  mask-image: linear-gradient(to bottom, transparent 0px, #000 150px);
}
.kv-hero__bg video, .kv-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleY(-1);
}
.kv-hero__bg-b {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.kv-hero__bg img.kv-hero__bg-still {
  display: none;
}
.kv-hero__emblem {
  position: absolute;
  top: 340px;
  right: 88px;
  width: 539px;
  height: 539px;
  transform: translateY(-50%);
  isolation: isolate;
  contain: paint;
}
.kv-hero__emblem-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 463px;
  height: 463px;
  transform: translate(-50%, -50%);
  animation: kvspin-inner 47.5s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
.kv-hero__emblem-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 539px;
  height: 539px;
  animation: kvspin 27.5s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes kvspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kvspin-inner {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.kv-hero__copy {
  position: absolute;
  top: 340px;
  left: 88px;
  width: 736px;
  transform: translateY(-50%);
}
.kv-hero__jms {
  display: block;
  width: 306px;
  height: auto;
}
.kv-hero__kicker {
  font-weight: 700;
  font-size: 29px;
  color: #1b1b1b;
  margin-top: 12px;
  letter-spacing: 1.5px;
}
.kv-hero__wordmark {
  display: block;
  width: 641px;
  height: auto;
  margin: 25px 0 0 -10px;
  mix-blend-mode: multiply;
}
.kv-hero__lead {
  font-weight: 700;
  font-size: 41px;
  line-height: 1.42;
  color: #1b1b1b;
  margin-top: 32px;
  letter-spacing: 0.7px;
}
.kv-hero__note {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  color: #2B3440;
  margin-top: 28px;
  letter-spacing: 0.05em;
}
/* 左下の波形。リード文には重なってよいが、回転エンブレム（左端 x≈773px）手前で消す */
.kv-hero__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 860px;
  height: 225px;
  overflow: hidden;
  pointer-events: none;
}
.kv-hero__wave img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
}
/* スマートフォン・動きを減らす設定では静止画に差し替え */
/* OS の「動きを減らす」設定でも演出を止めない方針。
   静止画 flow-ribbons-still.png は kv-hero.js のフォールバック
   （再生が始まらないときの退避）専用として残している。 */
/*# sourceMappingURL=./kv-hero.css.map */