@charset "utf-8";


.loading{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
}

.loading img{
  width: 200px;
}
	
body{
  position: relative;
  background:#000;
  cursor: none; /*もともとあるカーソルは非表示に*/
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.lexend-<uniquifier> {
  font-family: "Lexend", sans-serif;
  font-weight: <weight>;
  font-style: normal;
}



/*========= カーソル要素 ===============*/
#cursor{
  position: fixed;

  /*丸の大きさと色の指定*/
  outline: 2px solid #fff;
  border-radius:10px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/

  z-index: 2;/*一番手前に来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.1s;/*アニメーションの秒数指定*/
}

/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
  position: fixed;
  /*丸の大きさと色の指定*/
  outline: 1px solid #fff;
  width: 60px;
  height: 60px;
  border-radius:30px;
  margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 1;/*カーソルの後ろに来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.5s;/*アニメーションの秒数指定*/
}

#cursor.active,
#stalker.active{
  transform: scale(1.4);
}


/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
    font-family: "Lexend", sans-serif;
} 

#header a {
  z-index: 10;
  font-size: 22pt;
  font-weight:500;
  color: #fff;
  letter-spacing: 1px; }

#header a::after {
  position: absolute;
  bottom: -0.5px;
  left: 0;
  content: '';
  width: 100%;
  height: 5px;
  background: #fff;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s; }

#header a:hover::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1); }

p{
  font-size: 7pt;
  color: #fff;
  letter-spacing: 1px;
}


/*LOGO*/
h1{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 37%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

h2{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 43%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    min-height: 100%;
    min-width: 100%;
}

#video-area::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-image: radial-gradient(#00010b 20%, transparent 95%);
  background-color: #fff0;
  background-position: 0 0;
  background-size: 4px 4px;
 filter: contrast(3);
}