@charset "UTF-8";
/* common-----------------------------------*/
body {
  font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",Osaka,Arial,verdana,sans-serif;
  text-align: center;
}

.br {
  display: block;
}

.cf:after {
  content: " ";
  display: block;
}

h1 {
  position: absolute;
  top: 20px;
  left: 10px;
  z-index: 10;
}

/* メインナビゲーション部分------------------------*/
.maincontents {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.maincontents .mainInner {
  height: 95%;
  position: relative;
}
.maincontents .overview {
  text-align: left;
  padding: 2% 1% 2% 1%;
  background-color: rgba(255, 255, 255, 0.8);
  bottom: 2%;
  width: 47.1%;
  display: block;
  position: absolute;
}
.maincontents .overview h3 {
  font-size: 1.5rem;
}
.maincontents .overview p {
  line-height: 1.5;
  font-weight: bold;
  font-size: 0.8rem;
  padding-top: 1%;
}
.maincontents .overview a {
  position: absolute;
  right: 3%;
  bottom: 2%;
}

/* js実装後はずす*/
.opening {
  position: fixed;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: #FFF;
}
.opening .openingLogo{
  position: absolute;
  margin: auto;
  opacity: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.opening div{
  position: absolute;
  z-index: 3;
  background: #009cff;
}
.opening div:nth-child(even){
  height: 7px;
  width: 0;
}
.opening div:nth-child(odd){
  height: 0;
  width: 7px;
}
.opening div.lt{
  top: 0;
  right: 0;
}
.opening div.lr{
  bottom: 0;
  right: 0;
}
.opening div.lb{
  bottom: 0;
  left: 0;
}
.opening div.ll{
  top: 0;
  left: 0;
}
.opening div.lt.hiding{
  top: auto;
  bottom: 0;
}
.opening div.lr.hiding{
  left: 0;
  right: auto;
}
.opening div.lb.hiding{
  top: 0;
  bottom: auto;
}
.opening div.ll.hiding{
  left: auto;
  right: 0;
}

/* イラストメニュー---------------------------------*/
.illustbox {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 50%;
  text-align: left;
  background: url(/images/home/illustBG.jpg) no-repeat right top;
  background-size: auto 100%;
}
.illustbox h2 {
  position: absolute;
  right: 8%;
  width: 35.5%;
  height: 100%;
  z-index: 5;
}
.illustbox h2 img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.illustbox nav {
  height: 100%;
  position: relative;
}
.illustbox nav ul li {
  height: 100%;
}
.illustbox nav ul li {
  position: absolute;
  right: 1%;
  z-index: 5;
  font-weight: bold;
  font-size: 1.1rem;
}
.illustbox nav ul li a {
  background: url(/images/home/menuIconL.png) no-repeat right 40%;
  padding-right: 20px;
  text-decoration: none;
  color: #000;
  position: relative;
}
.illustbox nav ul .storyboard {
  top: 14%;
}
.illustbox nav ul .illust {
  top: 24%;
}
.illustbox nav ul .character {
  top: 34%;
}
.illustbox nav ul .animation {
  top: 64%;
}
.illustbox nav ul .gameIllust {
  top: 74%;
}
.illustbox nav ul .spaceIllust {
  top: 84%;
}
/*.illustbox nav dl .overview {
  left: 2%;
}
.illustbox nav dl dd {
  position: absolute;
  top: 0;
  left: -100%;
  width: 85%;
  height: 100%;
  z-index: 4;
}*/
/*.illustbox nav dl .storyboardDd {
  background: url(/images/home/storyboardBG.png) no-repeat 0 0;
  background-size: contain;
}
.illustbox nav dl .illustDd {
  background: url(/images/home/illustBG.png) no-repeat 0 0;
  background-size: contain;
}
.illustbox nav dl .characterDd {
  background: url(/images/home/characterBG.png) no-repeat 0 0;
  background-size: contain;
}
.illustbox nav dl .animationDd {
  background: url(/images/home/MangaBG.png) no-repeat 0 0;
  background-size: contain;
}
.illustbox nav dl .gameIllustDd {
  background: url(/images/home/gameIllustBG.png) no-repeat 0 0;
  background-size: contain;
}
.illustbox nav dl .spaceIllustDd {
  background: url(/images/home/spaceIllustBG.png) no-repeat 0 0;
  background-size: contain;
}*/

/* ウェブメニュー----------------------------------*/
.digitalbox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  text-align: left;
  background: url(/images/home/digitalBG.jpg) no-repeat left 30%;
  background-size: auto 100%;
}
.digitalbox h2 {
  position: absolute;
  left: 8%;
  width: 33%;
  height: 100%;
  z-index: 5;
}
.digitalbox h2 img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.digitalbox nav {
  height: 100%;
  position: relative;
}
.digitalbox nav ul li {
  position: absolute;
  left: 1%;
  z-index: 5;
  font-weight: bold;
  font-size: 1.1rem;
}
.digitalbox nav ul li a {
  padding-left: 20px;
  background: url(/images/home/menuIconR.png) no-repeat left 40%;
  text-decoration: none;
  color: #fff;
  position: relative;
}
.digitalbox nav ul .webApp {
  top: 14%;
}
.digitalbox nav ul .graphic {
  top: 24%;
}
.digitalbox nav ul .movie {
  top: 34%;
}
.digitalbox nav ul .signage {
  top: 64%;
}
.digitalbox nav ul .marketing {
  top: 74%;
}
/*.digitalbox nav ul .overview {
  right: 2%;
}*/
/*.digitalbox nav dl dd {
  position: absolute;
  top: 0;
  right: -100%;
  width: 85%;
  height: 100%;
  z-index: 4;
}*/
/*.digitalbox nav dl .webAppDd {
  background: url(/images/home/WebBG.png) no-repeat 100% 0;
  background-size: contain;
}
.digitalbox nav dl .graphicDd {
  background: url(/images/home/graphicBG.png) no-repeat 100% 0;
  background-size: contain;
}
.digitalbox nav dl .movieDd {
  background: url(/images/home/MovieBG.png) no-repeat 100% 0;
  background-size: contain;
}
.digitalbox nav dl .signageDd {
  background: url(/images/home/SignageBG.png) no-repeat 100% 0;
  background-size: contain;
}*/

/* バッテンのデザイン-------------------------------*/
.xLine {
  position: absolute;
  top: 0;
  bottom: 5%;
  left: 0;
  right: 0;
  width: 250px;
  height: 30px;
  margin: auto;
  background: #009CFF none repeat scroll 0% 0%;
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
}
.yLine {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  height: 250px;
  width: 30px;
  margin: auto;
  background: #009CFF none repeat scroll 0% 0%;
  -moz-transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
}

/* subcontents--------------------------------*/
/* conpany------------------------------------*/
.company dl {
  padding-top: 45px;
  padding-bottom: 80px;
  height: 280px;
}
.company dl dt {
  width: 326px;
  height: 280px;
  opacity: 1;
  position: absolute;
  margin: auto;
}
.company dl dd:hover {
  opacity: 0;
}
.company dl dt .companyboxInner{
  display: table-cell;
  vertical-align: middle;
  width: 326px;
  height: 280px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.2rem;
}
.company dl .recruitbox .companyboxInner{
  background: url(/images/home/triangle.png) no-repeat 50% 50%, url(/images/home/recruit.jpg) no-repeat;
}
.company dl .prbox .companyboxInner{
  background: url(/images/home/triangle.png) no-repeat 50% 50%, url(/images/home/aquaweekly.jpg) no-repeat;
}
.company dl .companybox .companyboxInner{
  background: url(/images/home/triangle.png) no-repeat 50% 50%, url(/images/home/company.jpg) no-repeat;
}
.company dl dd {
  width: 326px;
  height: 280px;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  margin: 0 auto;
  opacity: 0;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
}
.company dl dd:hover {
  opacity: 1;
}
.company dl dd a {
  display: table-cell;
  vertical-align: middle;
  width: 326px;
  height: 280px;
  text-decoration: none;
  color: #fff;
}
.company dl .recruitsubbox, .company dl .recruitbox{
  left: 0;
  right: 675px;
}
.company dl .prsubbox, .company dl .prbox{
  left: 0;
  right: 0;
}
.company dl .companysubbox, .company dl .companybox{
  left: 670px;
  right: 0;
}
.company dl dd div{
  position: absolute;
  z-index: 3;
  background: #009cff;
}
.company dl dd div:nth-of-type(1),
.company dl dd div:nth-of-type(3){
  width: 0;
  height: 7px;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
}
.company dl dd div:nth-of-type(2),
.company dl dd div:nth-of-type(4){
  width: 7px;
  height: 0;
  -webkit-transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  transition-duration: 0.35s;
}
.company dl dd div:nth-of-type(1){
  top: 0;
  right: 0;
}
.company dl dd div:nth-of-type(2){
  bottom: 0;
  right: 0; }
.company dl dd div:nth-of-type(3){
  bottom: 0;
  left: 0; }
.company dl dd div:nth-of-type(4){
  top: 0;
  left: 0;
}
.company dl dd:hover div:nth-of-type(1),
.company dl dd:hover div:nth-of-type(3){
  width: 100%;
}
.company dl dd:hover div:nth-of-type(2),
.company dl dd:hover div:nth-of-type(4){
  height: 100%;
}
.company h2{
  overflow: hidden;
}
.company h2 img{
  position: relative;
}
.company nav dl dt{
  overflow: hidden;
}
.company nav dl dt div{
  position: relative;
}

/* etc----------------------------------------*/
.etc {
  padding-bottom: 90px;
}
.etc ul {
  width: 1000px;
  margin: 0 auto;
  margin-top: 45px;
}
.etc ul li {
  float: left;
}
.etc ul li:not(:first-of-type) {
  margin-left: 10px;
}
.etc ul li a {
  display: block;
}
.etc h2{
  overflow: hidden;
}
.etc h2 img{
  position: relative;
}

.etc nav ul li{
  overflow: hidden;
}
.etc nav ul a{
  position: relative;
}
.etc ul:hover li:not(:hover){
  opacity: 0.4;
}

/* 動いた後のcss=======================================================*/
.xl_selected {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  margin: 0;
  width: 100%;
}
.yl_selected {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  height: 100%;
  bottom: 0;
}
.mainInner section.selected{
  cursor: default;
}
.mainInner section nav dl dt.selected{
  font-size: 2rem;
  bottom: 0.5rem;
}
.mainInner section .arrowIcon{
  position: absolute;
  top: 60%;
  opacity: 0;
}
.mainInner .digitalbox .arrowIcon{
  left: 9px;
}
.mainInner .illustbox .arrowIcon{
  right: 9px;
}
.mainInner .digitalbox nav dl dd.selected{
  right: 14%;
}
.mainInner .illustbox nav dl dd.selected{
  left: 15%;
}
.mi_default{
  left: 0;
}


/* 動いた後のcss(illust)=======================================================*/
.mi_illustbox{
  left: 35%;
}
.mi_illustbox .digitalbox .arrowIcon{
  opacity: 1;
}

/* 横からスライドしてくるカテゴリ詳細------------------------------------------*/
.illustbox h2.fm {
  left: 78%;
  width: 20%;
  bottom: 0;
}
.mi_illustbox .digitalbox {
  cursor: pointer;
}
.digitalbox h2.fs {
  width: 10%;
  right: 87%;
  bottom: -10%;
}

/* 青の横線(上から順番)------------------------------------------------------------*/
/* 動いた後のcss(digital)=======================================================*/
/* メインナビゲーション部分-------------------------------------------------*/
.mi_digitalbox {
  left: -35%;
}
.mi_digitalbox .illustbox .arrowIcon{
  opacity: 1;
}


/* 横からスライドしてくるカテゴリ詳細------------------------------------------*/
.digitalbox h2.fm {
  width: 20%;
  right: 77%;
  bottom: 0;
}
.mi_digitalbox .illustbox {
  cursor: pointer;
}
.illustbox h2.fs {
  width: 13%;
  left: 85%;
  bottom: -10%;
}

/* 青の横線(上から順番)------------------------------------------------------------*/
/* 1440px~1001pxのメインナビゲーション用css*/
@media screen and (max-width: 1440px) and (min-width: 1001px) {
  .company {
    padding-top: 40px;
  }
}
/* ~1000pxのメインナビゲーション用css*/
@media screen and (max-width: 1000px) {
  .company {
    padding-top: 53px;
  }
  .company dl dt {
    width: 320px;
  }
  .company dl dd {
    width: 320px;
  }
  .etc ul li:not(:first-of-type) {
    margin-left: 4px;
  }
}