* {
  font-size: 2vw;
  color: #aaaaaa; }
  @media screen and (max-width: 768px) {
    * {
      font-size: 4vw; } }

body {
  background-image: url("images/bg_img.jpg");
  background-size: cover;
  background-attachment: fixed;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }

h1 {
  color: red; }

#navi {
  width: 100%;
  position: fixed;
  background: linear-gradient(black, rgba(0, 0, 0, 0));
  z-index: 100; }
  #navi li {
    list-style: none; }
  #navi #logo {
    float: left; }
    #navi #logo img {
      height: 5vw;
      padding-left: 0.5em; }
      @media screen and (max-width: 768px) {
        #navi #logo img {
          height: 10vw; } }
  #navi #navibar {
    display: block;
    float: right;
    z-index: 2; }
    @media screen and (max-width: 768px) {
      #navi #navibar {
        display: none; } }
    #navi #navibar li {
      display: inline;
      padding: 0 0.5em; }
      #navi #navibar li a {
        font-weight: bold;
        text-decoration: none; }
        #navi #navibar li a:hover {
          color: #333333;
          -webkit-text-stroke: 2px #999999;
          text-stroke: 2px #999999;
          paint-order: stroke; }
  #navi #humberbarNavi {
    display: none;
    text-align: right;
    float: right;
    padding-right: 0.5em; }
    @media screen and (max-width: 768px) {
      #navi #humberbarNavi {
        display: block; } }
    #navi #humberbarNavi a {
      font-weight: bold;
      text-decoration: none; }
    #navi #humberbarNavi .bgm {
      display: none; }

.subheader {
  width: 50%; }

.liveD_y {
  font-family: "Times New Roman", Times, "serif";
  font-style: italic;
  font-size: 0.6em; }

.liveD {
  font-family: "Times New Roman", Times, "serif";
  font-style: italic;
  font-weight: bold; }

.liveTag {
  font-size: 0.5em;
  text-align: center;
  width: auto;
  padding-right: 0.5em; }

.liveT {
  font-size: 0.8em;
  font-weight: bold;
  width: 100%; }

.liveB {
  width: 100%;
  font-size: 0.7em; }

.liveI {
  font-size: 0.7em; }
  .liveI a {
    font-size: 1em;
    text-decoration: underline; }
    .liveI a:hover {
      color: #ffffff;
      -webkit-text-stroke: 2px #333333;
      text-stroke: 2px #333333;
      paint-order: stroke; }

.anc {
  width: 100%;
  float: left;
  position: relative; }

#header {
  width: 100%;
  padding-top: 5vw; }
  @media screen and (max-width: 768px) {
    #header {
      padding-top: 10vw; } }
  #header #header1 img {
    width: 100%; }
  #header #newrelease {
    float: left;
    padding: 0 0.5em; }
    @media screen and (max-width: 768px) {
      #header #newrelease {
        width: 100%; } }
    #header #newrelease img {
      width: 100%; }
  #header #nextlive {
    float: right;
    padding: 0 0.5em;
    padding-bottom: 1em; }
    @media screen and (max-width: 768px) {
      #header #nextlive {
        display: none; } }
  #header #sns {
    float: right;
    padding: 0 0.5em; }
    @media screen and (max-width: 768px) {
      #header #sns {
        display: none; } }

#live {
  height: 56.25vw;
  float: left;
  width: 100%;
  position: relative;
  margin-top: 5vw; }
  @media screen and (max-width: 768px) {
    #live {
      margin-top: 10vw; } }
  #live video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0; }
  #live #liveCon {
    position: absolute;
    height: 100%;
    top: 0px;
    z-index: 3; }
    #live #liveCon h1 {
      padding-left: 0.5em; }
    #live #liveCon #liveBody {
      width: 50%;
      height: 54.25vw;
      margin: 0 auto;
      overflow: scroll;
      z-index: 100; }
      @media screen and (max-width: 768px) {
        #live #liveCon #liveBody {
          width: 80%; } }
      #live #liveCon #liveBody li {
        list-style: none;
        padding-bottom: 1em; }
      #live #liveCon #liveBody tbody {
        -webkit-text-stroke: 2px #333333;
        text-stroke: 2px #333333;
        paint-order: stroke; }

#music {
  width: 100%;
  float: left;
  padding: 0 0.5em;
  margin-top: 5vw; }
  @media screen and (max-width: 768px) {
    #music {
      margin-top: 10vw; } }
  #music .musicItem {
    width: 25%;
    float: left; }
    @media screen and (max-width: 768px) {
      #music .musicItem {
        width: 50%; } }
    #music .musicItem img {
      width: 100%;
      padding: 0.25em 0.5em 0.25em 0; }
    #music .musicItem .musicTitle {
      width: 100%;
      position: relative;
      font-size: 0.5em;
      text-align: center;
      margin-top: 0; }

#movie {
  width: 100%;
  float: left;
  padding: 0 0.5em;
  margin-top: 5vw; }
  @media screen and (max-width: 768px) {
    #movie {
      margin-top: 10vw; } }
  #movie #movieBody {
    overflow-x: scroll;
    display: flex; }
  #movie .movieContents {
    min-width: 60vw;
    min-height: 33.75vw;
    position: relative;
    float: left;
    margin: 0 1em;
    background: #333333;
    padding: 0.2em; }
    @media screen and (max-width: 768px) {
      #movie .movieContents {
        min-width: 90vw;
        min-height: 50.625vw; } }
    #movie .movieContents video {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px; }
  #movie .movieTitle {
    position: relative;
    float: left;
    text-align: center;
    font-size: 0.6em; }

#shop {
  width: 100%;
  position: relative;
  float: left;
  padding: 0 0.5em;
  margin-top: 5vw; }
  @media screen and (max-width: 768px) {
    #shop {
      margin-top: 10vw; } }
  #shop .notice {
    font-size: 0.9em;
    color: #999999;
    font-style: italic;
    padding-left: 1em; }

#footer {
  width: 100%;
  height: 5vw;
  position: relative;
  float: left;
  padding: 0 0.5em;
  margin-top: 1em;
  background: linear-gradient(rgba(0, 0, 0, 0), black);
  text-align: right;
  vertical-align: bottom;
  font-size: 0.5em; }