* {
  margin: 0px;
  padding: 0px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
}

ul li, ol li {
  list-style: none;
}

.header {
  z-index: 9;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: #000;
}

.header__sitename {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}

.header__sns {
  position: absolute;
}
.header__sns a {
  display: block;
}
.header__sns img {
  display: block;
}
.header__sns ul {
  display: flex;
  align-items: center;
}

.contents {
}
.fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.fullscreen video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: block;
}


html.landscape .fullscreen video {
  width: 100%;
  height: auto;
}
html.portrait .fullscreen video {
  width: auto;
  height: 100%;
}


/**
 * PC
 */
@media screen and (min-width: 751px), print {

  .header {
    height: 74px;
  }

  .header__sitename img {
    width: 296px;
  }

  .header__sns {
    right: 0;
    top: 0;
  }
  .header__sns ul {
    height: 74px;
    padding: 0 12px;
  }
  .header__sns ul li {
    width: auto;
    margin-left: 7px;
  }

}




/**
 * SP
 */
@media screen and (max-width: 750px), print {

  .header {
    height: 42.666667vw;
  }
  .header__sitename {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate3d(-50%, 0, 0);
    margin-top: 8vw;
  }
  .header__sitename img {
    width: 76.266667vw;
  }

  .header__sns {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .header__sns ul {
    justify-content: center;
    margin-bottom: 6.93333333vw;
  }
  .header__sns ul li {
    width: 10.666667vw;
    margin: 0 0.93333333vw;
  }
  .header__sns ul li img {
    width: 100%;
  }

}


/*ボタンの透過アニメ*/ 
a img {
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
}