@charset "UTF-8";
@font-face {
  font-family: 'RobotoSlab';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/RobotoSlab-Light.woff"); }
@font-face {
  font-family: 'RobotoSlab';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/RobotoSlab-Regular.woff"); }
@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/NotoSansCJKjp-Light.otf"); }
* {
  margin: 0;
  padding: 0; }

html {
  width: 100%;
  height: 100%; }

body {
  z-index: 0;
  background-color: #f0f0f0;
  width: 100%;
  height: 100%;
  font-family: NotoSansCJKjp;
  font-weight: 300; }

#bg-graphic {
  z-index: 1;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px; }
  #bg-graphic img {
    display: none;
    width: 100%;
    height: 100%; }

#mat {
  width: 100%;
  height: 100%;
  z-index: 49; }

#container {
  z-index: 50;
  position: fixed;
  overflow: scroll;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25); }

#contents {
  width: 800px;
  margin: auto;
  margin-top: 100px;
  z-index: 51;
  font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; }

#menuBox {
  z-index: 100;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5); }
  #menuBox #menu {
    font-family: RobotoSlab;
    font-weight: 300;
    position: relative;
    margin: auto;
    padding: 0px;
    width: 800px;
    height: 100%;
    font-size: 16px; }
    #menuBox #menu li {
      color: rgba(32, 32, 32, 0.5);
      list-style-type: none;
      float: left;
      width: 20%;
      height: 100%;
      line-height: 50px;
      text-align: center;
      margin: auto; }
      #menuBox #menu li:hover {
        color: rgba(32, 32, 32, 0.75);
        background-color: rgba(255, 255, 255, 0.75); }
      #menuBox #menu li ul {
        list-style-type: none;
        display: none;
        text-align: center; }
        #menuBox #menu li ul li {
          margin: 0;
          width: 100%;
          /*text-align:left;*/
          background-color: rgba(255, 255, 255, 0.5); }
          #menuBox #menu li ul li:hover {
            background-color: rgba(255, 255, 255, 0.75); }
          #menuBox #menu li ul li a {
            text-decoration: none;
            width: 100%;
            height: 100%;
            color: rgba(32, 32, 32, 0.5); }
            #menuBox #menu li ul li a:hover {
              color: rgba(32, 32, 32, 0.75); }
      #menuBox #menu li a {
        color: rgba(32, 32, 32, 0.5);
        height: 100%;
        width: 100%;
        height: 100%;
        margin: auto;
        text-decoration: none;
        display: inline-block;
        margin: auto; }
        #menuBox #menu li a:hover {
          color: rgba(32, 32, 32, 0.75); }