main {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
main > h1 {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 100px;
  transform: translate(0, -50%);
  font-size: 3rem;
  color: #555;
}
.kouji {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
}

main > video {
  position: absolute;
  right: 0;
  width: auto;
  height: 120%;
  opacity: 0.6;
}

.case {
    /* display: flex; */
    /* margin-top: 30vh; */
    width: 100%;
    height: 100%;
  }
svg {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.path {
  /* 塗りの色 */
fill:none;
  /* 線の色 */
  stroke:#BEBFBF;
  /* 線の太さ */
  stroke-width: 3.5;
  /* 線の頂点の部分のスタイルを指定します。miter（鋭角）、round（丸）、bevel（面取り）の3種類。デフォルトは miter です。 */
  stroke-linejoin:round;
  /* 線の端の部分をどのように表示するか指定できます。butt（端の部分が線の長さと等しく平ら)、round（丸）、square（端を四角く）の三種類。デフォルトは butt になっています。 */
  stroke-linecap:round;

  /* stroke-miterlimit:10; */

  stroke-dasharray: 2170;
  stroke-dashoffset: 5000;

  animation: DASH 2.2s ease-in-out alternate 0s forwards;
  -webkit-animation: DASH 3.2s ease-in-out 0s forwards;
  animation: DASH 3.2s ease-in-out 0s forwards;

}
   
@keyframes DASH {
  0% {
    stroke-dashoffset: 2170;
  }
  100% {
    stroke-dashoffset: 0;
  }
}