@charset "UTF-8";
/* ---------------------------------------------------------------- */
/* メインスライダー  */
/* ---------------------------------------------------------------- */
#slider_area {
  width: 100%;
  position: relative; }
  #slider_area .text-box {
    width: 100%;
    position: absolute;
    top: 67%;
    left: 0;
    z-index: 3;
    transform: translateY(-50%); }
    #slider_area .text-box h3 {
      color: #fff;
      text-align: center;
      font-size: 32px;
      margin-bottom: 0;
      padding: 0 15px;
      animation-duration: 6s; }
    #slider_area .text-box p {
      color: #fff;
      text-align: center;
      font-size: 14px;
      margin-top: 0;
      padding: 0 15px;
      animation-duration: 6s; }
  @media print, screen and (min-width: 768px) {
    #slider_area .text-box h3 {
      font-size: 42px; }
    #slider_area .text-box p {
      font-size: 24px; } }

#zoom_slide {
  width: 100%;
  position: relative;
  overflow: hidden; }

#slide_wrapp {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0; }
  #slide_wrapp .slide_item {
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s linear, transform 15s linear; /*transform デフォルト7.5s*/
    position: relative;
    display: block;
    /* for IE*/ }
    #slide_wrapp .slide_item:not(:first-child) {
      position: absolute;
      top: 0;
      left: 0; }
    #slide_wrapp .slide_item.show_ {
      opacity: 1; }
    #slide_wrapp .slide_item.zoom_ {
      transform: scale(1.1); }
    #slide_wrapp .slide_item img {
      display: block; }
  @media print, screen and (min-width: 768px) {
    #slide_wrapp {
      margin: 0;
      padding: 0;
      width: 100%;
      left: 0;
      margin-left: 0; } }

/* ---------------------------------------------------------------- */
/* HOME */
/* ---------------------------------------------------------------- */
#main_container #news_area {
  padding: 50px 0 20px;
  animation-duration: 2s;
  animation-delay: 0s; }
  #main_container #news_area h3 {
    text-align: center;
    font-size: 28px; }
  #main_container #news_area .inner {
    max-width: 990px;
    margin: 0 auto;
    padding: 0 15px; }
    #main_container #news_area .inner .column3Wrap .columnBox p {
      font-size: 14px; }
    #main_container #news_area .inner .img_box {
      width: 100%;
      overflow: hidden;
      position: relative; }
      #main_container #news_area .inner .img_box:before {
        content: "";
        display: block;
        padding-top: 57%; }
      #main_container #news_area .inner .img_box img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        -moz-transition: -moz-transform 0.5s linear;
        -webkit-transition: -webkit-transform 0.5s linear;
        -o-transition: -o-transform 0.5s linear;
        -ms-transition: -ms-transform 0.5s linear;
        transition: transform 0.5s linear; }
    #main_container #news_area .inner a {
      color: #333;
      text-decoration: none; }
      #main_container #news_area .inner a:hover .img_box img {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2); }
    #main_container #news_area .inner dl {
      width: 100%;
      clear: both;
      padding-bottom: 5px; }
      #main_container #news_area .inner dl dd {
        text-align: center;
        float: left;
        width: auto;
        margin: 0; }
        #main_container #news_area .inner dl dd.day {
          padding-left: 20px;
          font-size: 14px; }
    #main_container #news_area .inner a dl dd.category {
      background: #333366;
      margin: 0px;
      color: #fff;
      text-decoration: none;
      min-width: 120px;
      text-align: center;
      font-size: 12px; }
    #main_container #news_area .inner a:hover dl dd.category {
      background: #333366;
      margin: 0px;
      color: #fff;
      text-decoration: none !important; }
  #main_container #news_area .spNone {
    display: none; }
#main_container #project_area {
  padding: 0 0 20px;
  background: #eee; }
  #main_container #project_area h3 {
    font-size: 28px;
    margin: 0 0 30px; }
  #main_container #project_area .project_text_wrap {
    height: 420px;
    padding: 0 15px;
    background: url("../images/home/project_image.jpg") no-repeat center center;
    background-size: cover;
    color: #fff;
    display: flex; }
    #main_container #project_area .project_text_wrap .project_text {
      margin-right: auto;
      padding-top: 150px; }
      #main_container #project_area .project_text_wrap .project_text .project_copy {
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold; }
      #main_container #project_area .project_text_wrap .project_text p {
        margin: 0; }
  #main_container #project_area .inner {
    margin: -90px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  #main_container #project_area .project1 {
    padding: 0 15px 0;
    margin-bottom: 70px;
    flex-basis: 100%;
    width: 100%; }
    #main_container #project_area .project1 .project1_img {
      background: url("../images/home/project_game.jpg") no-repeat;
      background-size: 100%;
      padding-top: 48.51063%; }
    #main_container #project_area .project1 .box {
      background-color: #fff;
      padding: 50px 25px;
      position: relative; }
      #main_container #project_area .project1 .box .n_text {
        margin: 0 0 20px;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -30px; }
      #main_container #project_area .project1 .box h4 {
        font-size: 22px;
        margin-top: 0px;
        margin-bottom: 10px; }
      #main_container #project_area .project1 .box p {
        margin-bottom: 0; }
      #main_container #project_area .project1 .box .btn {
        margin: 0;
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translate(-50%, 0); }
  #main_container #project_area .project2 {
    padding: 0 15px 0;
    margin-bottom: 70px;
    flex-basis: 100%;
    width: 100%; }
    #main_container #project_area .project2 .project2_img {
      background: url("../images/home/project_animation.jpg") no-repeat;
      background-size: 100%;
      padding-top: 48.51063%; }
    #main_container #project_area .project2 .box {
      background-color: #fff;
      padding: 50px 25px;
      position: relative; }
      #main_container #project_area .project2 .box .n_text {
        margin: 0 0 20px;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -30px; }
      #main_container #project_area .project2 .box h4 {
        font-size: 22px;
        margin-top: 0px;
        margin-bottom: 10px; }
      #main_container #project_area .project2 .box p {
        margin-bottom: 0; }
      #main_container #project_area .project2 .box .btn {
        margin: 0;
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translate(-50%, 0); }
  #main_container #project_area .project3 {
    padding: 0 15px 0;
    margin-bottom: 70px;
    flex-basis: 100%;
    width: 100%; }
    #main_container #project_area .project3 .project3_img {
      background: url(../images/home/project_vtuber.jpg) no-repeat;
      background-size: 100%;
      padding-top: 48.51063%; }
    #main_container #project_area .project3 .box {
      background-color: #fff;
      padding: 50px 25px;
      position: relative; }
      #main_container #project_area .project3 .box .n_text {
        margin: 0 0 20px;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -30px; }
      #main_container #project_area .project3 .box h4 {
        font-size: 22px;
        margin-top: 0px;
        margin-bottom: 10px; }
      #main_container #project_area .project3 .box p {
        margin-bottom: 0; }
      #main_container #project_area .project3 .box .btn {
        margin: 0;
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translate(-50%, 0); }
#main_container #banner_area .about_img_box {
  background: url("../images/home/aboutus.jpg") no-repeat center;
  background-size: auto 100%;
  padding-bottom: 67%; }
#main_container #banner_area .column2Wrap2 {
  margin-bottom: 0; }
  #main_container #banner_area .column2Wrap2.about_us_wrap {
    display: flex;
    flex-wrap: wrap; }
    #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox {
      flex-basis: 100%;
      width: 100%; }
      #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox.about_us_box {
        order: 2; }
      #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox.about_img_box {
        order: 1; }
#main_container #banner_area .p_box {
  padding: 50px 15px 40px; }
#main_container #banner_area .n_text {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0px; }
#main_container #banner_area h4 {
  font-size: 22px;
  margin-top: 0px;
  margin-bottom: 10px; }
#main_container #banner_area .btn {
  margin-bottom: 0; }
@media print, screen and (min-width: 768px) {
  #main_container #news_area .spNone {
    display: block; }
  #main_container #project_area .project_text_wrap {
    background: url("../images/home/project_image.jpg") no-repeat center center;
    background-size: cover;
    background-attachment: fixed; }
  #main_container #project_area .project1, #main_container #project_area .project2, #main_container #project_area .project3 {
    display: flex;
    flex-wrap: wrap; }
    #main_container #project_area .project1 .project1_img,
    #main_container #project_area .project1 .project2_img,
    #main_container #project_area .project1 .project3_img, #main_container #project_area .project2 .project1_img,
    #main_container #project_area .project2 .project2_img,
    #main_container #project_area .project2 .project3_img, #main_container #project_area .project3 .project1_img,
    #main_container #project_area .project3 .project2_img,
    #main_container #project_area .project3 .project3_img {
      flex-basis: 100%;
      width: 100%; }
    #main_container #project_area .project1 .box, #main_container #project_area .project2 .box, #main_container #project_area .project3 .box {
      flex: 1;
      flex-basis: 100%;
      width: 100%; }
  #main_container #banner_area .column2Wrap2.about_us_wrap {
    display: flex;
    flex-wrap: nowrap; }
    #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox {
      flex-basis: 50%;
      width: 50%; }
      #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox.about_us_box {
        order: 1; }
      #main_container #banner_area .column2Wrap2.about_us_wrap .columnBox.about_img_box {
        order: 2;
        padding-bottom: 0; }
  #main_container #banner_area .p_box {
    padding: 100px 66px; } }
@media print, screen and (min-width: 992px) {
  #main_container #project_area .inner {
    margin: -90px 80px 0;
    flex-wrap: nowrap; }
  #main_container #project_area .project_text_wrap {
    padding: 0 80px; }
  #main_container #project_area .project1, #main_container #project_area .project2, #main_container #project_area .project3 {
    flex-basis: 32%;
    width: 32%;
    padding: 0; }
    #main_container #project_area .project1 .box, #main_container #project_area .project2 .box, #main_container #project_area .project3 .box {
      padding: 65px 25px; }
      #main_container #project_area .project1 .box h4, #main_container #project_area .project2 .box h4, #main_container #project_area .project3 .box h4 {
        text-align: center; }
      #main_container #project_area .project1 .box .btn, #main_container #project_area .project2 .box .btn, #main_container #project_area .project3 .box .btn {
        max-width: 290px;
        width: 100%; } }
@media print, screen and (min-width: 1600px) {
  #main_container #banner_area .about_img_box {
    background-size: cover; } }

.Company_bg a {
  background: url("../images/home/top_company.jpg") no-repeat;
  background-size: 100%;
  padding: 18.8% 0;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 28px; }
  .Company_bg a:hover {
    opacity: .8; }

.Office_bg a {
  background: url("../images/home/top_office.jpg") no-repeat;
  background-size: 100%;
  padding: 18.8% 0;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 28px; }
  .Office_bg a:hover {
    opacity: .8; }

/* アニメーション設定 */
.invisible {
  transition: all 0.5s ease;
  opacity: 0.0; }

.visible {
  transition: all 0.5s ease;
  opacity: 1.0; }

.ad1 {
  animation-delay: 0.1s; }

.ad2 {
  animation-delay: 0.2s; }

.ad3 {
  animation-delay: 0.3s; }

/* スタッフカルーセル */
.bx-pager {
  display: none; }

.bx-wrapper {
  border: none !important;
  margin-bottom: 0 !important; }

.bx-prev {
  background: url("../images/home/bx-prev.png") no-repeat !important;
  left: 0px !important;
  width: 60px !important;
  height: 60px !important;
  z-index: 1 !important; }

.bx-next {
  background: url("../images/home/bx-next.png") no-repeat !important;
  right: 0px !important;
  width: 60px !important;
  height: 60px !important;
  z-index: 1 !important; }

.bx-wrapper .bx-controls-direction a {
  top: 44% !important; }

#main_navi ul li a {
  position: relative; }