@charset "UTF-8";
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?kzq1j8");
  src: url("fonts/icomoon.eot?#iefixkzq1j8") format("embedded-opentype"), url("fonts/icomoon.woff?kzq1j8") format("woff"), url("fonts/icomoon.ttf?kzq1j8") format("truetype"), url("fonts/icomoon.svg?kzq1j8#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: "icomoon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: inline-block;
  -webkit-transition: all 1s ease;
          transition: all 1s ease;
  font-size: 2em;
  padding: 8px;
  color: #FFF;
  box-sizing: border-box;
  border-radius: 4px;
}
.icon-game    { background-color: #FF7115; }
.icon-mobile  { background-color: #076dff; }
.icon-goods   { background-color: #ff4491; }
.icon-company { background-color: #7841ff; }
.icon-recruit { background-color: #61d211; }
.icon-company:before { content: "\e605"; }
.icon-recruit:before { content: "\e604"; }
.icon-game:before    { content: "\e601"; } 
.icon-goods:before   { content: "\e603"; }
.icon-mobile:before  { content: "\e602"; }

.global-menu {
  position: relative;
  z-index: 100;
}

.menu {
  padding: 0;
  margin: 0;
}

.menu-item {
  display: block;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  border-bottom: 2px solid #aaa;
  border-top: 4px solid;
  -webkit-transition: all 1s ease;
          transition: all 1s ease;
  padding: 0.5em 0;
  padding-bottom: 0;
  float: left;
  width: 20%;
}
@media screen and (min-width: 768px) {
  .menu-item {
    margin: 0 0.5%;
    width: 19%;
    padding: 0.5em 0;
  }
  .menu-item:hover { color: #FFFFFF !important; }
  .menu-item:hover i { background-color: #FFFFFF !important; }
}
.menu-item.active-menu { color: #FFFFFF !important; }
.menu-item.active-menu i { background-color: #FFFFFF !important; }
.menu-item .menu-title {
  display: table;
  padding-bottom: 0.5em;
  margin: auto
}
@media screen and (min-width: 768px) {
  .menu-item .menu-title {
    margin: 0 auto;
    padding-bottom: 0;
  }
  .menu-item .menu-title i {
    display: table-cell;
    vertical-align: middle;
  }
  .menu-item .menu-item-text {
    display: table-cell;
    vertical-align: middle;
    padding-left: 8px
  }
  .menu-item .menu-item-text-jp {
    font-size: 1.2em;
  }
  .menu-item .menu-item-text-en {
    font-size: 0.9em;
  }
}
.menu-item .menu-item-text-en {
  font-size: 10px;
}

.submenu-item {
  display: none;
  position: relative;
  top: 100%;
  list-style: none;
  padding: 0;
  padding-bottom: 1em;
  margin-bottom: -2px;
  width: 500%;
  box-sizing: border-box;
  z-index: 10;
}
.submenu-item li:first-child {
  border-top: 1px solid #fff;
}
.submenu-item li {
  text-align: left;
  width: 100%;
  padding: .5em;
  padding-left: 2em;
  font-size: 1.5rem;
  border-bottom: 1px solid #fff;
}
.submenu-item a {
  display: block;
  color: #FFFFFF !important;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .submenu-item { position: absolute; width: 100%; }
  .submenu-item li { padding-left: .5em }
  .submenu-item a { font-size: 0.9em; }
}

#menu-game {
  border-color: #FF7115;
  color: #c84e00;
}

#menu-mobile {
  border-color: #076dff;
  color: #0042a0;
}

#menu-goods {
  border-color: #ff4491;
  color: #dd005b;
}

#menu-company {
  border-color: #7841ff;
  color: #3f00da;
}

#menu-recruit {
  border-color: #61d211;
  color: #357409;
}


ul#submenu-game    { background-color: #C84E00; }
ul#submenu-mobile  { background-color: #0042A0; }
ul#submenu-goods   { background-color: #DD005B; }
ul#submenu-company { background-color: #3F00DA; }
ul#submenu-recruit { background-color: #357409; }

#submenu-game    li { background-color: #FF7115; }
#submenu-mobile  li { background-color: #076DFF; }
#submenu-goods   li { background-color: #FF4491; }
#submenu-company li { background-color: #7841FF; }
#submenu-recruit li { background-color: #61D211; }

#submenu-game    li:hover, #submenu-game    li:active { background-color: #C84E00; }
#submenu-mobile  li:hover, #submenu-mobile  li:active { background-color: #0042A0; }
#submenu-goods   li:hover, #submenu-goods   li:active { background-color: #DD005B; }
#submenu-company li:hover, #submenu-company li:active { background-color: #3F00DA; }
#submenu-recruit li:hover, #submenu-recruit li:active { background-color: #357409; }

@media screen and (max-width: 767px) {
  #submenu-game    { left: 0%; }
  #submenu-mobile  { left: -100%; }
  #submenu-goods   { left: -200%; }
  #submenu-company { left: -300%; }
  #submenu-recruit { left: -400%; }
}

#menu-game.active-menu    { background-color: #FF7115; }
#menu-mobile.active-menu  { background-color: #076DFF; }
#menu-goods.active-menu   { background-color: #FF4491; }
#menu-company.active-menu { background-color: #7841FF; }
#menu-recruit.active-menu { background-color: #61D211; }

#menu-game.active-menu    i { color: #FF7115; }
#menu-mobile.active-menu  i { color: #076DFF; }
#menu-goods.active-menu   i { color: #FF4491; }
#menu-company.active-menu i { color: #7841FF; }
#menu-recruit.active-menu i { color: #61D211; }

@media screen and (min-width: 768px) {
  #menu-game:hover    { background-color: #FF7115; }
  #menu-mobile:hover  { background-color: #076DFF; }
  #menu-goods:hover   { background-color: #FF4491; }
  #menu-company:hover { background-color: #7841FF; }
  #menu-recruit:hover { background-color: #61D211; }

  #menu-game:hover    i { color: #FF7115; }
  #menu-mobile:hover  i { color: #076DFF; }
  #menu-goods:hover   i { color: #FF4491; }
  #menu-company:hover i { color: #7841FF; }
  #menu-recruit:hover i { color: #61D211; }

  #menu-game    a { border-color: #FF7115; }
  #menu-mobile  a { border-color: #076DFF; }
  #menu-goods   a { border-color: #FF4491; }
  #menu-company a { border-color: #7841FF; }
  #menu-recruit a { border-color: #61D211; }
}