*{
 padding: 0;
 margin: 0;
 font-family:  'Meiryo UI' ;
 padding: 0;
 border: 0;
 font-style: normal;
 font-weight: 400;
 font-size: 100%;
 vertical-align: baseline;
 /* max-width: :1170px; */
}

html body {
 width: 100%;
 height: 100%;
 background-color:#000000;
 text-align: center;
 min-height: 100%;
 position: fixed;
 margin: 0;
}

/* ------背景の動画------ */

.homeMv {
  width: 100%;
  height: 100%;
  position: relative;
}

.homeMv__movie {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}


.homeMv__movie video {
  min-width: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: .18;
}

/* ------coming soon----- */

.flexContainer{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

.link__comment{
  display: block;
  max-height: 100%;
  overflow-y: scroll;
}
.link__comment h1{
    height: auto;
    font-size: 10vh;
    font-family: 'Dancing Script', cursive;
    display: block;
    text-align: center;
    margin: 0 auto;
    vertical-align: middle;
}
.link__comment img{
  display: block;
  max-width: 10em;
  margin: 0 auto;
}
.link__logo{
  display: block;
  text-decoration: none;
  padding: 1.5vw 0;
  cursor: pointer;
  cursor: hand;
}
#aclassImg{
  width: 7.5em;
  margin-top: 1vh;
}
#clipsImg{
  max-width: 12em;
}

.link__comment p{
  /* width: 100%; */
  height: auto;
  font-size: 20px;
  display: block;
  text-align: center;
  margin: 0 auto;
  font-weight: lighter;
  vertical-align: middle;
  color: #ffffff;
}

.coming__soon{
  opacity: .3;
}

.border__line{
  content: "";
  width: 90%;
  height: 3px;
  opacity: .4;
  background-color: #ffffff;
  margin: 0 auto;
  display: block;
  margin-bottom: 5vw;
  margin-top: 1vw;
}


/* ------メニューバー------ */

.menus__about{
 text-decoration: none;
 display: block;
 position: fixed;
 padding-left: 40px;
 left: 0;
 top: 90%;
 margin-top: -9px;
 font-size: 20px;
 color: #ffffff;
 letter-spacing: .1em;
 transition-property: transform;
 transition-duration: .6s;
 transition-delay: .2s;
 z-index: 20;
 font-family: 'Megrim', cursive;
}

.menus__about:hover{
 transform: translate(55px,0);
}

.top__aboutLine {


 content: "";
 width: 100%;
 height: 2px;
 position: fixed;
 right: 100%;
 top: 90%;
 margin-top: 8px;
 display: inline-block;
 background-color: #ffffff;
 transform: translateX(0);
 margin-right: 10px;
}

.menus__about:hover + .top__aboutLine{
 transition: translateX(90px);
 -webkit-transform: translateX(90px);
   -moz-transform: translateX(90px);
   -ms-transform: translateX(90px);
   -o-transform: translateX(90px);
   transition-property: transform;
   transition-duration: .6s;
   transition-delay: .3s;
   opacity: 1;
   background-color: #ffffff;
   pointer-events: none;
}


.menus__vision{
   text-decoration: none;
   display: block;
   position: fixed;
   padding-right: 40px;
   right: 0;
   top: 90%;
   margin-top: -9px;
   font-size: 20px;
   color:#ffffff;
   letter-spacing: .1em;
   transition-property: transform;
   transition-duration: .6s;
   transition-delay: .2s;
   z-index: 20;
   font-family: 'Megrim', cursive;
}

.menus__vision:hover{
 transform: translate(-55px,0);
}

.top__visionLine {
 content: "";
 width: 100%;
 height: 2px;
 position: fixed;
 left: 100%;
 top: 90%;
 margin-top: 8px;
 display: inline-block;
 background-color: #ffffff;
 transform: translateX(0);
 margin-left: 10px;
}

.menus__vision:hover + .top__visionLine{
 transition: translateX(-90px);
 -webkit-transform: translateX(-90px);
 -moz-transform: translateX(-90px);
 -ms-transform: translateX(-90px);
 -o-transform: translateX(-90px);
 transition-property: transform;
 transition-duration: .6s;
 transition-delay: .3s;
 opacity: 1;
 background-color:#ffffff;
 pointer-events: none;
}

footer{
  display: none;
 position: absolute;
 left:0;
 right: 0;
 bottom: 0;
 padding: 20px 0;
 background-position: top;
 padding:1px;
}

footer .container{
 padding: 0 30px;
}

footer .container img {
  max-width: 7%;
  display: block;
  margin: 1vh auto;
}

footer .container p{
  font-weight: 100;
  font-size: 3px;
  clear:right;
  color: #ffffff;
  text-align: center;
  padding-bottom: 5px;
  font-family: 'Megrim', cursive;
}


/* =========================================== */


#nav-drawer {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  padding:20px;
  z-index: 100;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
  background-color: rgb(40,40,40);
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  opacity: .9;
  z-index: 9999;/*最前面に*/
  width: 20%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: rgb(40,40,40);/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

#nav-content .nav__about{
  margin-top: 30vh;
}

#nav-drawer a{
  font-weight: inherit;
  padding-left: 20px;
  padding-bottom: 15px;
  font-size: 2em;
  float: left;
  clear: left;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Megrim', cursive;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);



}


/* ========================================== */