html {
  line-height: 1.5;
  color: #212121;
  font-size: 100%; }

html, body {
  width: 100%;
  height: 100%;
  background-color: #000000; }

img {
  max-width: inherit; }

ul, li {
  list-style: none;
  margin: 0;
  padding: 0; }

h1, h2, h3 {
  margin: 0;
  padding: 0; }

a {
  color: white;
  color: #212121; }
  a:hover, a:active, a:focus {
    color: #cccccc; }

.mbVariable--1 {
  margin-bottom: 20px; }

.mbVariable--2 {
  margin-bottom: 40px; }

#main {
  position: relative;
  width: 100%;
  min-height: 100%; }

.contents {
  position: relative;
  width: 100%;
  min-height: 100%; }

#backlayer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 1024px; }
  #backlayer .fixedLayer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden; }
  #backlayer .fixedCoverLayer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden; }
  #backlayer .bg_flex {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1024px;
    height: 100%; }
  #backlayer .absoluteLayer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0; }
    #backlayer .absoluteLayer img {
      position: absolute; }

#frontlayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  z-index: 10000; }
  #frontlayer #overLay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    min-width: 1024px; }
    #frontlayer #overLay .mat {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #000000;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8; }
    #frontlayer #overLay .itemList {
      position: absolute;
      width: 683px;
      height: 384px;
      overflow: hidden;
      top: 50%;
      left: 50%;
      margin-left: -342px;
      margin-top: -192px; }
      #frontlayer #overLay .itemList iframe {
        width: 683px; }
    #frontlayer #overLay .closeButton {
      position: absolute;
      cursor: pointer;
      width: 60px;
      height: 60px;
      top: 50%;
      left: 50%;
      margin-left: 281px;
      margin-top: -252px;
      background: #060606;
      -moz-transform: translate(0px, 60px);
      -ms-transform: translate(0px, 60px);
      -webkit-transform: translate(0px, 60px);
      transform: translate(0px, 60px);
      -moz-transition: -moz-transform 0.25s linear;
      -o-transition: -o-transform 0.25s linear;
      -webkit-transition: -webkit-transform 0.25s linear;
      transition: transform 0.25s linear; }
      #frontlayer #overLay .closeButton .closs {
        position: absolute;
        width: 60px;
        height: 60px;
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -moz-transition: -moz-transform 0.25s linear;
        -o-transition: -o-transform 0.25s linear;
        -webkit-transition: -webkit-transform 0.25s linear;
        transition: transform 0.25s linear; }
        #frontlayer #overLay .closeButton .closs .line {
          position: absolute;
          width: 2px;
          height: 50px;
          top: 5px;
          left: 50%;
          margin-left: -1px;
          background: #ffffff; }
        #frontlayer #overLay .closeButton .closs .line:nth-of-type(1) {
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }
        #frontlayer #overLay .closeButton .closs .line:nth-of-type(2) {
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }
      #frontlayer #overLay .closeButton .closs.on {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg); }
    #frontlayer #overLay .closeButton.show {
      -moz-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      -webkit-transform: translate(0px, 0px);
      transform: translate(0px, 0px); }

#frameEffectslayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9000;
  pointer-events: none; }
  #frameEffectslayer .honeycomb {
    position: absolute;
    left: -150px;
    bottom: -150px;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8); }

.sceneList {
  position: relative;
  width: 100%; }

.scene {
  position: relative;
  width: 100%; }

.page {
  position: relative;
  width: 100%; }

.pageBacklayer {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden; }

.pageFrontlayer {
  position: absolute;
  top: 0;
  width: 100%; }

.pageContents {
  position: relative;
  width: 1024px;
  margin: 0 auto; }

.resource {
  display: none; }
  .resource img {
    display: none; }

.dotLine {
  margin: 30px 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIzMy4zMzMzMyUiIHN0b3AtY29sb3I9IiM0ODM0MzEiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(33.33333%, #483431), color-stop(33.33333%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, #483431 33.33333%, rgba(0, 0, 0, 0) 33.33333%, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-linear-gradient(left, #483431 33.33333%, rgba(0, 0, 0, 0) 33.33333%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(to right, #483431 33.33333%, rgba(0, 0, 0, 0) 33.33333%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(to left, #483431 33.33333%, rgba(0, 0, 0, 0) 33.33333%, rgba(0, 0, 0, 0) 100%);
  background-size: 6px 6px;
  height: 2px;
  border: none; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 58px;
  min-width: 1024px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  color: #111111; }

.header--official nav ul {
  width: 100%; }

.menu {
  color: #ffffff; }
  .menu a {
    color: #ffffff; }
  .menu a:hover {
    display: block;
    background: rgba(255, 255, 255, 0.15); }
  .menu li {
    width: 150px;
    height: 58px; }

footer {
  position: relative;
  width: 100%;
  min-width: 1024px; }

.footer--official {
  border-top: 1px solid #444444;
  background: #111111;
  color: #ffffff; }
  .footer--official .scene--sns .pageContents {
    padding: 1rem 0; }
  .footer--official .scene {
    border-bottom: 1px solid #444444; }
  .footer--official .scene:last-child {
    border-bottom: none; }