@charset "utf-8";
/**
 * variables
 */


/**
 * custom media
 */

/*
@custom-media --smart (min-width: 481px);
@custom-media --tablet (min-width: 769px);
@custom-media --pc (min-width: 1365px);
@custom-media --full (min-width: 1365px);
*/


/**
 * custom selector
 */
/**
 * top.css
**/

.site-header{
  min-height: 100vh;
}
.site-header .mod-title{
  padding: 185px 0 80px;
}

.site-header .mod-title .logo{
  /* padding: 0 0 49.649123%; */
/*   background: no-repeat center 0; */
/*   background-size: contain; */
/*background:red;*/

}
.site-header .mod-title .logo svg{
  width:100%;
}

.site-header .mod-title .site-title{
  /* max-width: 130px; */
  left:6px;
  width: 77.733333%;
  margin: 0 auto;
}
.mod-title .site-title{
}

#webgl {
  width: 100%;
  height: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  background-image: none;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

#webgl.static-bg {
  background-image: url(../images/bg_top.png);
}

#webgl #grid {
  position: absolute;
  left:50%;
}


@media screen and (max-width: 480px) {
  #webgl.static-bg {
    background-size: cover;
  }
}

@media screen and (min-width: 481px) {
  #webgl.static-bg {
    background-image: url(../images/bg_top-768.png);
    background-size: cover;
  }
}
@media screen and (min-width: 769px) {

  .site-header .mod-title{
    padding: 115px 0 0;
  }
  .site-header .mod-title .site-title {
    max-width: 936px;
    margin-bottom: 156px;
  }

  #webgl.static-bg {
    background-image: url(../images/bg_top-1366.png);
    background-size: auto 100vh;
  }
}

@media screen and (min-width: 1365px) {
  #webgl.static-bg {
    background-size: 100vw auto;
  }
}

.site-header .mod-title .logo {

}