@font-face {
  font-family: 'Cabinet Grotesk';
  src:
    url('https://19853391.fs1.hubspotusercontent-na2.net/hubfs/19853391/CabinetGrotesk-Extrabold.woff2') format('woff2'),

  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
PC/SP表示切替
========================= */

.video-pc-only{
  display:block;
}

.video-sp-only{
  display:none;
}

/* =========================
全体
========================= */

.hero-parallax-video{

  position:relative;

  overflow:hidden;

  min-height:100vh;

  display:flex;
  justify-content:center;

  padding:
    clamp(50px, 8vh, 100px)
    clamp(14px, 3vw, 40px)
    clamp(60px, 8vh, 120px);

  box-sizing:border-box;

}

/* =========================
背景クリップ
========================= */

.hero-parallax-video-clip{

  position:absolute;

  inset:0;

  clip:rect(auto, auto, auto, auto);

  z-index:0;

  pointer-events:none;

  overflow:hidden;

  border-radius:
    clamp(20px, 4vw, 60px)
    clamp(20px, 4vw, 60px)
    0
    0;

  -webkit-mask-image:
    -webkit-radial-gradient(white, black);

}

/* =========================
背景動画
========================= */

.hero-parallax-video-bg{

  position:fixed;

  inset:0;

  width:100vw;
  height:100vh;

  isolation:isolate;

}

/* =========================
動画
========================= */

.hero-parallax-video-element{

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center center;

  display:block;

}

/* =========================
overlay
========================= */

.hero-parallax-video-bg::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.25);

}

/* =========================
inner
========================= */

.hero-parallax-video-inner{

  position:relative;

  z-index:2;

  width:100%;

  min-height:100vh;

  display:flex;

  justify-content:center;

  align-items:flex-end;

  padding-bottom:10vh;

}

/* =========================
見出しグループ
========================= */

.hero-parallax-video-heading-group{

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  width:100%;

  gap:clamp(20px, 4vh, 60px);

  padding-inline:4vw;

  box-sizing:border-box;

}

/* =========================
見出し
========================= */

.hero-parallax-video-heading{

  margin:0;

  font-size:clamp(26px, 8vw, 130px);

  font-weight:700;

  line-height:1.15;

  letter-spacing:.03em;

  font-family:
    "Cabinet Grotesk",
    serif;

  color:#fff;

  white-space:nowrap;

  text-shadow:
    0 8px 24px rgba(0,0,0,.25);

}

.hero-parallax-video-heading *{

  margin:0;

  font:inherit !important;

  color:inherit !important;

}

/* =========================
サブ
========================= */

.hero-parallax-video-sub{

  font-size:clamp(11px, 2vw, 40px);

  line-height:2;

  letter-spacing:.04em;

  color:#fff;

  text-align:center;

  font-family: "yu-mincho-pr6n", sans-serif;
font-weight: 700;
font-style: normal;

  text-shadow:
    0 4px 16px rgba(0,0,0,.25);

}

.hero-parallax-video-sub *{

  margin:0;

  font:inherit !important;

  color:inherit !important;

  text-align:inherit !important;

}

/* =========================
SP
========================= */

@media screen and (max-width:800px){

  .video-pc-only{
    display:none;
  }

  .video-sp-only{
    display:block;
  }

  /* =========================
  セクション
  ========================= */

  .hero-parallax-video{

    min-height:auto;

    padding:0;

  }

  /* =========================
  16:9固定
  ========================= */

  .hero-parallax-video-clip{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

  }

  /* =========================
  背景固定
  ========================= */

  .hero-parallax-video-bg{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

  }

  /* =========================
  動画
  ========================= */

  .hero-parallax-video-element{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center center;

    background:none;
  

  }

  /* =========================
  テキスト
  ========================= */

  .hero-parallax-video-inner{

    position:absolute;

    inset:0;

    min-height:auto;

    padding-bottom:8vw;

    display:flex;

    justify-content:center;

    align-items:flex-end;

  }

  .hero-parallax-video-heading{

    font-size:clamp(50px, 10vw, 150px);

    white-space:normal;

    line-height:1.3;

  }

  .hero-parallax-video-sub{

    font-size:clamp(15px, 3vw, 50px);

  }

}