@charset "UTF-8";

/* --------------------------------------------------
  page-fade-in
-------------------------------------------------- */
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* --------------------------------------------------
  .swiper-pc /.swiper-sp
-------------------------------------------------- */
.swiper-sp{
    display: none;
}
@media(max-width: 640px){
    .swiper-pc{
        display: none;
    }
    .swiper-sp{
        display: block;
    }
}

/* --------------------------------------------------
  .main-visual
-------------------------------------------------- */
.home .site-header{
    display: none;
}
.home .site-header.show{
    display: block;
}

.main-visual{
    position: relative;
}

.sp .bannerWrap{
    display: none;
}

.bannerWrap{
    background: rgba(255,255,255,0.6);
    position: absolute;
    right: 10px;
    bottom: 50px;
    z-index: 99999;
    padding: 10px;
}

.bannerWrap.type02{
    bottom: 10px;
}

.bannerWrap .banner{
    display: block;
    width: 300px;
    margin-bottom:10px;
}

.bannerWrap .banner:last-child{
    margin-bottom: 0px;
}

.bannerWrap .banner img{
    max-width: 100%;
}

.main-visual {
    position: relative;
    overflow: hidden;
    background: #000;
}
.main-visual .main-visual-inner{
    width:100%;
    position: relative;
}
.main-visual .main-visual-inner:before{
    content: '';
    display: block;
    padding-top:41.142%;
}
.main-visual .swiper-container {
    background: url(../images/corporate/01_thum.jpg);
    background-position: center center;
    background-size: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
}
.main-visual .swiper-container .swiper-pagination.swiper-pagination-bullets {
    position: absolute;
    bottom: 10px;
    z-index: 2; }
.main-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager_off.png") no-repeat center center; }
@media (max-width: 600px) {
    .main-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        width: 12px;
        height: 12px; } }
.main-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager.png") no-repeat center center; }
@media (max-width: 600px) {
    .main-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
        width: 12px;
        height: 12px; } }
.main-visual .swiper-container .swiper-button-prev {
    left: 3%;
    background: url("../images/corporate/common/prev.png") no-repeat center center;
    background-size: 80%;
    width: 48px;
    height: 62px; }
@media (max-width: 600px) {
    .main-visual .swiper-container .swiper-button-prev {
        display: none;
        left: 1%;
        background: url("../images/corporate/common/prev.png") no-repeat center center; } }
.main-visual .swiper-container .swiper-button-next {
    right: 3%;
    background: url("../images/corporate/common/next.png") no-repeat center center;
    background-size: 80%;
    width: 48px;
    height: 62px; }
@media (max-width: 600px) {
    .main-visual .swiper-container .swiper-button-next {
        display: none;
        right: 1%;
        background: url("../images/corporate/common/next.png") no-repeat center center; } }
.main-visual .swiper-container .video-hover {
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    opacity: 0; }
.main-visual .swiper-container .video-hover.hover {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s; }

.work-visual .swiper-container {
    height: auto; }
.work-visual .swiper-container .swiper-pagination.swiper-pagination-bullets {
    position: absolute;
    bottom: 10px;
    z-index: 2; }
.work-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager_off.png") no-repeat center center;
    opacity: 0.8; }
@media (max-width: 600px) {
    .work-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        width: 12px;
        height: 12px; } }
.work-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager.png") no-repeat center center; }
@media (max-width: 600px) {
    .work-visual .swiper-container .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
        width: 12px;
        height: 12px; } }
.work-visual .swiper-container .swiper-button-prev {
    left: 3%;
    background: url("../images/corporate/common/prev.png") no-repeat center center;
    background-size: 80%;
    width: 48px;
    height: 62px; }
@media (max-width: 600px) {
    .work-visual .swiper-container .swiper-button-prev {
        display: none;
        left: 1%;
        background: url("../images/corporate/common/prev.png") no-repeat center center; } }
.work-visual .swiper-container .swiper-button-next {
    right: 3%;
    background: url("../images/corporate/common/next.png") no-repeat center center;
    background-size: 80%;
    width: 48px;
    height: 62px; }
@media (max-width: 600px) {
    .work-visual .swiper-container .swiper-button-next {
        display: none;
        right: 1%;
        background: url("../images/corporate/common/next.png") no-repeat center center; } }
.work-visual .swiper-container figure {
    position: relative;
    overflow: hidden; }
@media (min-width: 600px) {
    .work-visual .swiper-container figure:hover figcaption {
        opacity: 1; }
    .work-visual .swiper-container figure:hover figcaption {
        left: 10%; } }
@media (min-width: 600px) and (max-width: 1000px) {
    .work-visual .swiper-container figure:hover figcaption {
        left: 10%; } }
@media (min-width: 600px) {
    .work-visual .swiper-container figure:hover figcaption {
        -webkit-transition-delay: .2s;
        transition-delay: .2s; } }

.swiper-slide video {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media (max-width: 1060px) {
    .swiper-slide video {
        height: 100%;
        width: auto; } }
@media (max-width: 600px) {
    .swiper-slide video {
        height: 100%;
        width: auto;
        zoom: 0.5; } }
.swiper-slide video.imageWrap.hover {
    opacity: 0.52;
    -webkit-transition: all .3s;
    transition: all .3s; }
.swiper-slide img {
    width: 100%;
    opacity: 0.9; }

.video-wrap:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../images/corporate/top_img/ptn.png);
    z-index: 0; }

.img-wrap {
    background: #000; }

/* @include sp_none {
  .img-wrap:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(https://cdn2.hubspot.net/hubfs/2638975/corporate/top_img/ptn.png);
    z-index: 0;
  }
} */
.works .main-visual img {
    opacity: 1; }

.main-visual .bx-controls-direction .bx-prev {
    left: 3%;
    background: url("../images/corporate/common/prev.png") no-repeat center center;
    background-size: 80%; }
@media (max-width: 600px) {
    .main-visual .bx-controls-direction .bx-prev {
        display: none;
        left: 1%;
        background: url("../images/corporate/common/prev.png") no-repeat center center; } }

/* .main-visual .bx-controls-direction .bx-prev:hover {
  background: url("../img/common/prev_on.png") no-repeat center center;
} */
.main-visual .bx-controls-direction .bx-next {
    right: 3%;
    background: url("../images/corporate/common/next.png") no-repeat center center;
    background-size: 80%; }
@media (max-width: 600px) {
    .main-visual .bx-controls-direction .bx-next {
        display: none;
        right: 1%;
        background: url("../images/corporate/common/next.png") no-repeat center center; } }

/* .main-visual .bx-controls-direction .bx-next:hover {
  background: url("../img/common/next_on.png") no-repeat center center;
} */
.main-visual .bx-default-pager,
.main-visual .bx-controls-direction a {
    z-index: 51; }

.main-visual-slider .image {
    top: 0; }

.bx-default-pager .bx-pager-item {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 3px; }

.bx-default-pager a {
    display: block;
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager_off.png") no-repeat center center; }

.bx-default-pager a:hover,
.bx-default-pager a.active {
    width: 24px;
    height: 24px;
    background: url("../images/corporate/common/pager.png") no-repeat center center; }

.bx-default-pager {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 24px;
    text-align: center; }

.bx-controls-direction a {
    display: block;
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    text-indent: -9999px;
    -webkit-transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }

@media (max-width: 1000px) {
    .main-visual {
        margin-top: 0;
        text-align: center; } }
.main-visual .child {
    position: relative; }
@media (max-width: 600px) {
    .main-visual .child {
        height: 360px; } }

.main-visual .child.hover img {
    opacity: 0.75;
    -webkit-transition: all .3s;
    transition: all .3s; }
@media (min-width: 600px) {
    .main-visual .child.hover a.btnBk {
        background-color: #00a6fa;
        border-color: #00a6fa;
        color: #fff; } }

.works .main-visual .child {
    position: relative; }
@media (max-width: 600px) {
    .works .main-visual .child {
        width: auto;
        height: 180px; } }

.main-visual .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    display: inline-block;
    text-align: left;
    opacity: 1;
    display: flex;
    display: -webkit-flex;
    align-items:flex-end;
    -webkit-align-items: flex-end;
    height:100%;
    z-index: 3;
    /*padding: 140px 0 0 15%;*/
}
@media (max-width: 1000px) {
    .main-visual .text {
    }
}
@media (max-width: 600px) {
    .main-visual .text {
        text-align: center;
    }
}
.main-visual .text .text-inner{
    margin-bottom: 2.5rem;
    padding: 1rem 3rem 1rem 10%;
    background-color: rgba(0,0,0,0.8)
}

.copyMain {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight:400;
    line-height: 1.15;
    font-size: 2.8rem;
    text-align: left;
}
@media (max-width: 1000px) {
    .copyMain {
        font-size: 1.7rem;
    }
    .main-visual .text .text-inner{
        margin-bottom: 2rem;
        padding: 0.7rem 2rem 0.7rem 10%;
    }
}
@media (max-width: 600px) {
    .main-visual .text .text-inner{
        margin-bottom: 1rem;
        padding: 0.5rem 1rem 0.3rem 2rem;
    }
    .main-visual .text .text-inner p{
        font-size: 0.5rem;
    }
    .main-visual .text .text-inner .copyMain {
        font-size: 1.2rem;
    }
    .swiper-pagination{
        display: none;
    }
}

.copyMain + div p {
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: left; }
@media (max-width: 1000px) {
    .copyMain + div p {
        font-size: 16px; } }
@media (min-width: 600px) and (max-width: 768px) {
    .copyMain + div p {
        font-size: 14px; } }
@media (max-width: 600px) {
    .copyMain + div p {
        display: inline-block;
        font-size: 13px;
        margin: 0 0 56px 16px; } }

@media (max-width: 600px) {
    .main-visual.white .bx-wrapper {
        overflow: hidden;
        position: relative; }

    .main-visual .image img {
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }

    .copySub {
        font-size: 16px;
        line-height: 1.25; } }

.main-btn {
    display: inline-block;
    box-sizing: border-box;
    height: 56px;
    line-height: 56px;
    border-radius: 28px;
    text-decoration: none;
    font-size: 17px;
    text-align: center;
    margin-top: 1.5%; }
@media (max-width: 600px) {
    .main-btn {
        height: 48px;
        line-height: 48px;
        border-radius: 24px;
        font-size: 15px; } }
.main-btn a {
    display: block;
    color: #fff; }

.news-area {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    padding: 2rem 0 2rem 0;
    line-height: 1.4;
}
.news-area .news-area-inner {
    width: 600px;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
@media (max-width: 1000px) {
    .news-area .news-area-inner {
        width: 96%;
    } }
.news-area .news-area-inner h2 {
    float: left;
    line-height: 0.7;
    font-size: 140%;
}
.news-area .news-area-inner ul {
    padding: 0 0 0 4rem;
}
@media(max-width: 768px){
    .news-area .news-area-inner ul {
        padding: 0 0 0 1rem;
    }
}
@media (min-width: 600px) {
    .news-area .news-area-inner ul li a:hover {
        color: #00a6fa;
    }
}

.main-top {
    text-align: center;
    margin: 50px 0 60px;
    /*font-family: "ゴシックMB101 M","Gothic MB101 Midium";*/
    font-family: "FP-ヒラギノ角ゴ ProN W6","FP-HiraKakuProN-W6";
    font-size: 28px;
    font-weight: bold;
    color: #000; }
.main-top span {
    color: #00a6fa; }
@media (max-width: 600px) {
    .main-top {
        font-size: 16px;
        margin: 30px 0;
    } }
/* --------------------------------------------------
  WORKS（新）
-------------------------------------------------- */
.top-works{
    padding: 72px 16px 60px;
    background-color:#f5f5f5 ;
}
.top-works .top-works-inner{
    margin: 0 auto;
    /*max-width: 1000px;*/
    width:96%;
}
.top-works .main-ttl{
    margin-bottom:40px;
}
.top-works .top-works-inner ul.works-items{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin-top:-30px;
}
@media(max-width: 639px){
    .top-works .top-works-inner ul.works-items {
        margin-top: 0;
    }
}

@media(min-width: 1200px){
    .top-works .top-works-inner .works-items li{
        width:calc(94% / 4);
        margin:30px 2% 0 0;
    }
    .top-works .top-works-inner .works-items li:nth-child(4n){
        margin-right:0;
    }
    .top-works .top-works-inner .works-items li:nth-child(9){
        display: none;
    }
}
@media(max-width: 1199px){
    .top-works .top-works-inner .works-items li{
        width:calc(94% / 3);
        margin:30px 2% 0 0;
    }
}
@media screen and (min-width: 641px) and (max-width: 1000px){
    .top-works .top-works-inner .works-items li:nth-child(3n){
        margin-right:0;
    }
}
.top-works .top-works-inner .works-items li img{
    width:100%;
    height:auto;
}
.top-works .top-works-inner .works-items li h3{
    padding:0.5rem 0;
    /*font-size: 110%;*/
}
.top-works .top-works-inner .works-items li .cateWrap{
    display: inline-block;
    font-size: 80%;
    padding-bottom: 5px;
}
.top-works .top-works-inner .works-items li .cateWrap a{
    cursor: pointer;
    display: block;
    padding: 4px 7px;
    border: 1px solid #000;
    border-radius: 3px;
    line-height: 1;
    margin-right: 2px;
}

@media(max-width: 640px){
    .top-works .top-works-inner .works-items li{
        width:100%;
        margin:0 auto 20px;
    }
}

/*---PC版のみhoverエフェクトを追加---*/

@media(min-width: 769px){
    .top-works .top-works-inner .works-items li{
        position: relative;
        overflow: hidden;
    }

    .top-works .top-works-inner .works-items li .hover-text{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        box-sizing: border-box;
        background-color: rgba(0,0,0,0.6);
        color: #ffffff;
        transition: all 500ms 0s ease;
        -webkit-transition: all 500ms 0s ease;
        opacity:0;
    }
    .top-works .top-works-inner .works-items li:hover .hover-text{
        opacity:1;
    }
    .top-works .top-works-inner .works-items li  .hover-text h3{
        padding:0.5rem 0;
        font-weight:normal;
        position: absolute;
        top:0px;
        left:5%;
        opacity:0;
        transition: all 500ms 0s ease;
        -webkit-transition: all 500ms 0s ease;
        width:90%;
    }
    .top-works .top-works-inner .works-items li:hover  .hover-text h3{
        top:10%;
        left:5%;
        opacity:1;
    }
    .top-works .top-works-inner .works-items li  .hover-text .cateWrap-area{
        display: inline-block;
        padding-bottom: 5px;
        position: absolute;
        bottom:0px;
        left:5%;
        transition: all 500ms 0s ease;
        -webkit-transition: all 500ms 0s ease;
        opacity:0;
    }
    .top-works .top-works-inner .works-items li:hover .hover-text .cateWrap-area{
        bottom:10%;
        left:5%;
        opacity:1;
    }
    .top-works .top-works-inner .works-items li  .hover-text .cateWrap{
        display: inline-block;
        font-size: 80%;
        padding-bottom: 5px;
    }
    .top-works .top-works-inner .works-items li  .hover-text .cateWrap a{
        cursor: pointer;
        display: block;
        padding: 4px 7px;
        border: 1px solid #fff;
        border-radius: 3px;
        line-height: 1;
        margin-right: 2px;
        color: #ffffff;
    }
    .top-works .top-works-inner .works-items li  .hover-text .cateWrap a:hover{
        background-color: rgba(255,255,255,0.3);
    }
}

/* --------------------------------------------------
  提供サービス
-------------------------------------------------- */
.top-service {
    margin: 0 auto;
    max-width: 1000px;
    width:96%;
    padding: 72px 16px 60px;
}
@media (max-width: 600px) {
    .top-service {
        padding: 48px 8px 40px; } }
.top-service h3 {
    font-size: 32px;
    text-align: center;
    margin: 0 0 40px;
    line-height: 1.5;
    /*font-family: "ゴシックMB101 B", sans-serif;*/
    font-family: "FP-ヒラギノ角ゴ ProN W6","FP-HiraKakuProN-W6";
}
@media (min-width: 600px) and (max-width: 768px) {
    .top-service h3 {
        font-size: 30px; } }
@media (max-width: 600px) {
    .top-service h3 {
        font-size: 20px;
        margin: 0 0 24px; } }
.top-service .main-ttl {
    margin-bottom: 40px; }

/* --------------------------------------------------
  事業
-------------------------------------------------- */
.serviceCon {
    display: flex;
    margin: 0 -4% 40px 0;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    justify-content: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    position: relative; }
@media(min-width: 769px){
    .serviceCon.visual {
        margin:-40px 0 0 0;
    }
}
@media (min-width: 600px) and (max-width: 768px) {
    .serviceCon {
        flex-wrap: wrap;
        margin-right: -2%; } }
@media (max-width: 600px) {
    .serviceCon {
        border-top: 1px solid #e8e8e8;
        flex-wrap: wrap;
        margin: 0 0 40px; } }
.serviceCon article {
    width: 23.5%;
    box-sizing: border-box;
    border: 4px solid #f0f0f0;
    margin: 40px 2% 0 0;
    text-align: center;
    position: relative;
}
.serviceCon article:nth-child(4n){
    margin-right:0;
}
@media (min-width: 600px) and (max-width: 767px) {
    .serviceCon article {
        width: 48%;
        margin: 0 2% 20px 0; } }
@media (max-width: 600px) {
    .serviceCon article {
        width: 100%;
        margin: 0 0 8px 0;
        text-align: left;
        margin-bottom: 1px;
        border: none;
        border-bottom: 1px solid #e8e8e8; } }
.serviceCon article img {
    width: 120px;
    height: 120px; }
@media (max-width: 600px) {
    .serviceCon article img {
        float: left;
        width: 60px;
        height: 60px;
        margin: 0 8px; } }
.serviceCon article > a {
    display: inline-block;
    padding: 12px 0; }
@media (max-width: 600px) {
    .serviceCon article > a {
        overflow: hidden;
        padding: 16px 0;
        display: block; } }
.serviceCon article h4 {
    font-size: 16px;
    color: #00a6fa;
    margin: 10px 0;
    line-height: 1.2;
    /*font-family: "ゴシックMB101 M","Gothic MB101 Midium";*/
    font-family: "FP-ヒラギノ角ゴ ProN W6","FP-HiraKakuProN-W6";
}
@media (max-width: 600px) {
    .serviceCon article h4 {
        font-size: 16px;
        margin: 0;
        padding-bottom: 0.4rem; } }
.serviceCon article p {
    text-align: center;
    padding: 0 12px 0;
    line-height: 1.25; }
@media (max-width: 600px) {
    .serviceCon article p {
        text-align: left;
        font-size: 13px;
        padding: 0 40px 0 75px; } }
.serviceCon article .service-arw {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px; }
.serviceCon article .service-arw svg {
    width: 48px;
    height: 36px; }
.serviceCon article.gameLp a {
    display: inline-block;
    padding: 12px 0; }
@media (max-width: 600px) {
    .serviceCon article.gameLp a {
        overflow: hidden;
        padding: 16px 0 32px;
        display: block; } }
.serviceCon article::after,
.serviceCon article::before,
.serviceCon article > a::after,
.serviceCon article > a::before {
    background-color: #00a6fa;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease; }
.serviceCon article::after {
    height: 4px;
    left: -4px;
    top: -4px;
    width: 0px; }
.serviceCon article::before {
    bottom: -4px;
    height: 4px;
    right: -4px;
    width: 0px; }
.serviceCon article > a::after {
    bottom: -4px;
    height: 0px;
    left: -4px;
    width: 4px; }
.serviceCon article > a::before {
    height: 0px;
    right: -4px;
    top: -4px;
    width: 4px; }
@media (min-width: 600px) {
    .serviceCon article:hover::after,
    .serviceCon article:hover::before {
        width: 100%;
        width: calc(100% + 4px); }
    .serviceCon article:hover > a::after,
    .serviceCon article:hover > a::before {
        height: 100%;
        height: calc(100% + 4px); } }
@media (max-width: 600px) {
    .serviceCon article:last-child {
        margin-bottom: 0; } }

/* --------------------------------------------------
  事例のご紹介
-------------------------------------------------- */
.works {
    background: #f5f5f5;
    padding: 72px 0; }
@media (max-width: 600px) {
    .works {
        padding: 48px 0 40px; } }
.works .main-visual {
    height: auto;
    max-height: 460px;
    margin: 0 0 30px;
    position: relative;
    overflow: hidden; }
@media (min-width: 600px) and (max-width: 768px) {
    .works .main-visual {
        margin-bottom: 0; } }

/* --------------------------------------------------
  企業情報
-------------------------------------------------- */
.top-company {
    margin: 0 auto;
    padding: 72px 0 60px;
    text-align: center;
    border-top:1px solid #e8e8e8;
}
@media (min-width: 600px) and (max-width: 768px) {
    .top-company {
        padding: 72px 16px 60px; } }
@media (max-width: 600px) {
    .company {
        padding: 48px 8px 40px; } }

.company-text01 h3 {
    color: #00a6fa;
    font-size: 38px;
    margin-bottom: 40px; }
@media (max-width: 600px) {
    .company-text01 h3 {
        font-size: 24px; } }

/* .company-img {
  max-width: 972px;
  max-height: 460px;
  margin: 0 auto;
  @include pc {
    padding: 0 16px;
  }
  @include sp {
    padding: 0;
  }
  img {
    width: 972px;
    height: 460px;
    @include pc {
      width: 100%;
      height: auto;
    }
  }
} */
.company-textWrap {
    /*display: inline-block; */
    max-width: 600px;
    margin: 0 auto;
    width: 96%;
}

.company-text01 h3 {
    width: 500px;
    text-align: left;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; }
@media (max-width: 600px) {
    .company-text01 h3 {
        width: 304px; } }

.company-text01 h3.move {
    -webkit-transform: translate(-24px, 0);
    transform: translate(-24px, 0);
    opacity: 0; }

.company-text02 p {
    text-align: left;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1; }

.company-text02 p.move {
    -webkit-transform: translate(-28px, 0);
    transform: translate(-28px, 0);
    opacity: 0; }

/* --------------------------------------------------
  ブログ
-------------------------------------------------- */
.blog {
    background: #f5f5f5;
    padding: 72px 0 60px; }
@media (max-width: 600px) {
    .blog {
        padding: 48px 0 40px; } }

.blog-list {
    width: 1000px;
    margin: 0 auto 0;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
@media (max-width: 1000px) {
    .blog-list {
        width: 96%;
        margin-bottom: 30px; } }
.blog-list li {
    width: 33%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 12px 12px 20px 12px;
    border: solid 1px #f0f0f0;
    background-color: #FFFFFF;
    position: relative; }
@media (min-width: 600px) and (max-width: 768px) {
    .blog-list li:last-child {
        display: none; } }
@media (max-width: 600px) {
    .blog-list li:last-child {
        margin-bottom: 0; } }
@media (min-width: 600px) and (max-width: 768px) {
    .blog-list li {
        width: 49%; } }
@media (max-width: 600px) {
    .blog-list li {
        width: 100%;
        margin-bottom: 20px; } }
.blog-list li article {
    position: relative;
    margin-right: 4px; }
.blog-list li .blog-date {
    color: #969696;
    padding-top: 0.5rem;
    display: block; }
.blog-list li .blog-img {
    width: 100%;
    height: 180px;
    text-align: center;
    overflow: hidden; }
.blog-list li .blog-img img {
    height: 100%;
    width: auto; }
@media (max-width: 600px) {
    .blog-list li .blog-img img {
        width: 100%;
        height: auto; } }
.blog-list li .blog-con {
    padding-top: 20px; }
.blog-list .blog-label {
    color: #fff;
    display: block;
    position: absolute;
    font-size: 11px;
    padding: 7px 10px;
    top: -8px;
    left: 5px;
    z-index: 99; }
.blog-list .blog-label.digital {
    background-color: #f78700; }
.blog-list .blog-label.creative {
    background-color: #f45179; }
.blog-list .blog-label.about {
    background-color: #00a6fa; }
.blog-list .blog-label.seminar {
    background-color: #a562cc; }
.blog-list .blog-label.news {
    background-color: #414ff2; }
.blog-list .blog-label.illustopic {
    background-color: #34d647; }
.blog-list .blog-label:before {
    position: absolute;
    top: 0;
    right: -8px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 0 8px;
    content: ""; }
.blog-list .blog-label.digital:before {
    border-color: transparent transparent transparent #a05605; }
.blog-list .blog-label.creative:before {
    border-color: transparent transparent transparent #af385b; }
.blog-list .blog-label.about:before {
    border-color: transparent transparent transparent #2e87aa; }
.blog-list .blog-label.seminar:before {
    border-color: transparent transparent transparent #783aa0; }
.blog-list .blog-label.news:before {
    border-color: transparent transparent transparent #323e7a; }
.blog-list .blog-label.illustopic:before {
    border-color: transparent transparent transparent #1a9328; }

.blog-con h3 {
    display: inline-block;
    background: #00a6fa;
    line-height: 1;
    padding: 3px 4px;
    margin-bottom: 12px;
    font-size: 12px; }
.blog-con time {
    display: block;
    margin-bottom: 8px; }
.blog-con .blog-title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: bold; }
.blog-con .blog-title.digital:hover {
    color: #f78700; }
.blog-con .blog-title.creative:hover {
    color: #f45179; }
.blog-con .blog-title.about:hover {
    color: #00a6fa; }
.blog-con .blog-title.seminar:hover {
    color: #a562cc; }
.blog-con .blog-title.news:hover {
    color: #414ff2; }
.blog-con .blog-auther {
    font-size: 10px;
    margin-top: 8px; }

/* --------------------------------------------------
  リクルート
-------------------------------------------------- */
.recruit {
    margin: 0 auto;
    /*padding: 72px 0 0; */
}
@media (max-width: 600px) {
    .recruit {
        padding: 48px 0 40px; } }

.recruit-imgWrap:after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../images/corporate/top_img/ptn.png);
    z-index: 0; }

.recruit-imgWrap {
    background: #000; }

.recruit-img {
    overflow: hidden;
    width: 100%;
    height: 460px;
    position: relative;
    background: #000; }
@media (max-width: 1000px) {
    .recruit-img {
        height: 360px; } }
@media (max-width: 600px) {
    .recruit-img {
        height: 300px;
        margin-bottom: 32px; } }
.recruit-img .main-ttl {
    color: #fff;
    position: absolute;
    z-index: 999;
    top: 72px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
@media (max-width: 600px) {
    .recruit-img .main-ttl {
        top: 48px; } }
.recruit-img p {
    position: absolute;
    top: 50%;
    left: 50%;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    white-space: nowrap;
    font-size: 18px;
    letter-spacing: 0.20em; }
@media (max-width: 600px) {
    .recruit-img p {
        font-size: 14px;
        letter-spacing: normal; } }
.recruit-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0.8;
    -webkit-transition: all .3s;
    transition: all .3s; }
@media (max-width: 448px) {
    .recruit-img img {
        width: auto;
        height: 100%; } }
.recruit-img .btnWrap {
    position: absolute;
    bottom: 70px;
    left: 50%;
    margin-left: -120px; }

@media (min-width: 600px) {
    .recruit-imgWrap.hover {
        text-align: center; }
    .recruit-imgWrap.hover img {
        width: 110%;
        opacity: 0.3;
        -webkit-transition: all .3s;
        transition: all .3s; } }
/* --------------------------------------------------
  お問い合わせ
-------------------------------------------------- */
.banner-area {
    padding: 72px 0; }

.top-bnr {
    overflow: hidden;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center; }
@media (max-width: 600px) {
    .top-bnr {
        flex-wrap: wrap;
        padding: 0 2%; } }
.top-bnr li {
    height: auto;
    text-align: center;
    margin: 0 2% 20px 0;
    width: 32%;
    box-sizing: border-box;
    border: 1px #dcdcdc solid; }
@media (max-width: 600px) {
    .top-bnr li {
        width: 48%;
        float: none;
        margin: 0 4% 16px 0; } }
.top-bnr li img {
    width: 100%;
    height: auto;
    display:block;
    }
@media (max-width: 600px) {
    .top-bnr li:nth-child(2n) {
        margin-right: 0; } }

/* --------------------------------------------------
  お問い合わせ
-------------------------------------------------- */
.contact-map {
    overflow: hidden;
    width: 100%;
    height: 460px;
    position: relative;
    margin: 50px 0 10px; }
@media (max-width: 1000px) {
    .contact-map {
        height: 360px; } }
@media (max-width: 600px) {
    .contact-map {
        height: 300px;
        margin-bottom: 32px; } }
.contact-map .contact-company {
    width: 418px;
    height: 255px;
    background: url(../images/corporate/contact_map_bg02.png) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    margin-top: -172px;
    margin-left: -451px;
    padding-right: 33px; }
@media (max-width: 1000px) {
    .contact-map .contact-company {
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #dedede;
        margin-top: -140px;
        margin-left: -200px;
        width: 400px;
        height: 200px;
        padding: 0; } }
@media (max-width: 600px) {
    .contact-map .contact-company {
        margin-top: -135px;
        margin-left: -154px;
        width: 300px;
        height: 185px; } }
.contact-map .contact-company h3 {
    font-size: 23px;
    margin-bottom: 10px; }
@media (max-width: 1000px) {
    .contact-map .contact-company h3 {
        margin-bottom: 5px; } }
@media (max-width: 600px) {
    .contact-map .contact-company h3 {
        font-size: 20px; } }
.contact-map .contact-company p {
    font-size: 16px;
    line-height: 1.8; }
@media (max-width: 1000px) {
    .contact-map .contact-company p {
        line-height: 1.6; } }
@media (max-width: 600px) {
    .contact-map .contact-company p {
        font-size: 14px; } }
.contact-map img.logo {
    width: 110px;
    height: auto;
    margin: 39px 0 30px; }
@media (max-width: 1000px) {
    .contact-map img.logo {
        margin: 24px 0 16px; } }
.contact-map img.map {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto; }
@media (max-width: 1618px) {
    .contact-map img.map {
        width: auto;
        height: 100%; } }
.contact-map .btnWrap {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -120px; }

#map {
    height: 480px; }

figure.snip1176 {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    background: #000000;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

figure.snip1176 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out; }

figure.snip1176 img {
    max-width: 100%;
    position: relative;
    opacity: 0.7; }

figure.snip1176 .caption {
    overflow: hidden;
    width: 100%;
    position: absolute; }

figure.snip1176 .caption {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    bottom: 0; }

figure.snip1176 a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1; }

@media (min-width: 600px) {
    figure.snip1176:hover img,
    figure.snip1176.hover img {
        opacity: 0.15;
        -webkit-transform: scale(1.1);
        transform: scale(1.1); }

    figure.snip1176:hover p,
    figure.snip1176.hover p {
        opacity: 1;
        -webkit-transition-delay: 0.35s;
        transition-delay: 0.35s;
        color: #ffffff; }

    figure.snip1176:hover p:before,
    figure.snip1176.hover p:before {
        left: -150%; }

    figure.snip1176:hover p:after,
    figure.snip1176.hover p:after {
        right: -150%; } }
figcaption {
    position: absolute;
    top: 30%;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: left;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0; }
@media (max-width: 1000px) {
    figcaption {
        top: 20%; } }

figcaption p {
    width: 80%;
    text-align: left;
    -webkit-transition: .3s;
    transition: .3s;
    top: 40%;
    color: #fff;
    font-size: 40px;
    margin-bottom: 12px; }
@media (max-width: 1000px) {
    figcaption p {
        font-size: 32px; } }
@media (max-width: 600px) {
    figcaption p {
        font-size: 24px; } }

figcaption p.cap-txt {
    font-size: 20px;
    margin-bottom: 32px; }
@media (max-width: 1000px) {
    figcaption p.cap-txt {
        font-size: 16px; } }
@media (max-width: 600px) {
    figcaption p.cap-txt {
        font-size: 24px; } }

figcaption p.cap-btn {
    text-align: left;
    width: auto;
    display: inline-block;
    font-size: 18px;
    border: 1px solid #fff;
    padding: 6px 12px;
    border-radius: 4px; }

.gameLP-link {
    position: absolute;
    bottom: -40px;
    left: 50%;
    margin-left: 13%;
    width: 22%;
    text-align: center;
    background: #ff338d;
    height: 32px;
    line-height: 32px;
    font-weight: bold;
    border-radius: 8px;
    box-shadow: 1px 1px 0 #000; }
.gameLP-link a {
    color: #fff;
    display: block;
    -webkit-transition: .3s;
    transition: .3s; }
@media (min-width: 600px) and (max-width: 768px) {
    .gameLP-link {
        width: 30%;
        margin-left: -15%;
        bottom: -24px; } }
@media (max-width: 600px) {
    .gameLP-link {
        width: 50%;
        bottom: 16px;
        left: 76px;
        margin-left: 0;
        font-size: 13px;
        height: 30px;
        line-height: 30px; }

.main-visual.white.aos-init.aos-animate{
/*     margin-bottom: 40px; */
}

.pc .bannerWrap{
    display: none;
}

.sp .bannerWrap{
    position: static;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 20px 2%;
}

.sp .bannerWrap .banner{
    width: 100%;
    margin-bottom: 0;
}

.bannerWrap .banner img{
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

 }

/*トップページリニューアル*/

.home .main-ttl .en{
    font-size:48px;
    font-weight:900;
}
@media (max-width: 600px){
    .home .main-ttl .en{
        font-size:40px;
    }
}

.home .main-ttl .jp{
    margin-top:10px;
    font-size:14px;
    line-height:1.3;
    font-family: "FP-ヒラギノ角ゴ StdN W5","FP-HiraKakuStdN-W5";
}
.home .main-copy{
    max-width:1000px;
    margin:-20px auto 40px;
    text-align: center;
}

.home .btnWrap{
    margin-top:40px;
}

.top-works,
.top-service,
.top-company,
.blog{
    padding:70px 0;
}

@media(max-width: 600px){
    .top-works,
    .top-service,
    .top-company,
    .blog{
        padding:50px 0;
    }

}


/*---スクロールアニメーション---*/

/*works*/
@media(min-width: 769px) {
    .top-works .top-works-inner .works-items li{
        transform: translateY(15%);
        -webkit-transform: translateY(15%);
        transition: all 300ms 0s ease-in;
        -webkit-transition: all 300ms 0s ease-in;
        opacity:0;
    }
    .top-works .top-works-inner .works-items li:nth-child(1){transition-delay:0ms;-webkit-transition-delay:0ms;}
    .top-works .top-works-inner .works-items li:nth-child(2){transition-delay:0ms;-webkit-transition-delay:0ms;}
    .top-works .top-works-inner .works-items li:nth-child(3){transition-delay:0ms;-webkit-transition-delay:0ms;}
    .top-works .top-works-inner .works-items li:nth-child(4){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(5){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(6){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(7){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-works .top-works-inner .works-items li:nth-child(8){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-works .top-works-inner .works-items li:nth-child(9){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-works .top-works-inner .works-items li.aos-animate{
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        opacity:1;
    }
}
@media(min-width:1200px){
    .top-works .top-works-inner .works-items li:nth-child(1){transition-delay:0ms;-webkit-transition-delay:200ms;}
    .top-works .top-works-inner .works-items li:nth-child(2){transition-delay:0ms;-webkit-transition-delay:200ms;}
    .top-works .top-works-inner .works-items li:nth-child(3){transition-delay:0ms;-webkit-transition-delay:200ms;}
    .top-works .top-works-inner .works-items li:nth-child(4){transition-delay:0ms;-webkit-transition-delay:200ms;}
    .top-works .top-works-inner .works-items li:nth-child(5){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(6){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(7){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-works .top-works-inner .works-items li:nth-child(8){transition-delay:400ms;-webkit-transition-delay:400ms;}
}
/*service*/
@media(min-width: 768px) {
    .top-service .serviceCon.visual article{
        transform: translateY(15%);
        -webkit-transform: translateY(15%);
        transition: all 300ms 0s ease-in;
        -webkit-transition: all 300ms 0s ease-in;
        opacity:0;
    }
    .top-service .serviceCon.visual article:nth-of-type(1){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .top-service .serviceCon.visual article:nth-of-type(2){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .top-service .serviceCon.visual article:nth-of-type(3){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .top-service .serviceCon.visual article:nth-of-type(4){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .top-service .serviceCon.visual article:nth-of-type(5){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-service .serviceCon.visual article:nth-of-type(6){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-service .serviceCon.visual article:nth-of-type(7){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-service .serviceCon.visual article:nth-of-type(8){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .top-service .serviceCon.visual article:nth-of-type(9){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-service .serviceCon.visual article:nth-of-type(10){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-service .serviceCon.visual article:nth-of-type(9){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-service .serviceCon.visual article:nth-of-type(10){transition-delay:600ms;-webkit-transition-delay:600ms;}
    .top-service .serviceCon.visual article.aos-animate{
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        opacity:1;
    }
}
/*blog*/
@media(min-width: 769px) {
    .content-wrap .blog .blog-list li{
        transform: translateY(15%);
        -webkit-transform: translateY(15%);
        transition: all 300ms 0s ease-in;
        -webkit-transition: all 300ms 0s ease-in;
        opacity:0;
    }
    .content-wrap .blog .blog-list li:nth-child(1){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .content-wrap .blog .blog-list li:nth-child(2){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .content-wrap .blog .blog-list li:nth-child(3){transition-delay:200ms;-webkit-transition-delay:200ms;}
    .content-wrap .blog .blog-list li:nth-child(4){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .content-wrap .blog .blog-list li:nth-child(5){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .content-wrap .blog .blog-list li:nth-child(6){transition-delay:400ms;-webkit-transition-delay:400ms;}
    .content-wrap .blog .blog-list li.aos-animate{
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        opacity:1;
    }
}