@import url('css2-Exowght600_swap.css');

[data-gwd-group="logo"] .logo_ventures.venture_wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  left: 20px;
  top: 20px;
}
[data-gwd-group="logo"] {
  width: 100%;
  height: auto;
}
.div_venture {
  position: relative;
  left: -20px;
  top: -20px;
}
.div_venture a:before {
  content: "";
  display: block;
  padding-top: 53%;
}







.home .mission {
  background: url(../image/mission_3.jpg) 50% 40%;
  background-size:cover;
  padding: 200px 20px 100px;
  overflow: visible;
}
.home .mission:before{display:none;}
.home .mission .copy,
.maincopy,
.maincopy .copy_text{
  color:#FFF;
  max-width:1040px;width:100%;
  text-align:left;

}
.home .mission .copy{
  color:#FFF;
  font-family: 'Exo', sans-serif;
  text-transform:uppercase;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
.maincopy{
  margin:20px auto;
  min-height:500px;
  position: relative;
}



.logo_inner{
  margin:0 0 5px;
  padding:0px;
  flex-basis: 32.5%;
  box-sizing:border-box !important;
  background-color: rgba(255,255,255,0.85);
  z-index: 11;
  position: relative;
  overflow: hidden;
  font-weight: bold;
  display: inline-block;
}


.logo_wrapper {
  margin: 30px 0 20px;
  text-align: center;
}
.logo_wrapper .title span{
  display: block;
  background-color: #6b9c41;
  color: #FFF;
  line-height: 2;
  font-weight: normal;
}

[data-gwd-group="logo"] + .title span{
background-color:#6b9c41;
}

[data-gwd-group="studio"] + .title span{
background-color:#e30080;
}

[data-gwd-group="connect"] +  .title span{
background-color:#8e2b8b;
}

.div_venture{
  width: calc(100% - 40px) !important;
  margin: auto;
  top: 0px;
  transition:top ease 0.5s;

}

.comment {
  transition:all ease 0.5s;
  text-align: left;
  color: #666;
  font-size: 15px;
  line-height: 1.8;
}
.comment div{
  margin-bottom: 5px;
}
.comment a{
  text-decoration: none;
}

@media(max-width: 600px){
  .home .mission {
    padding: 0px;
    margin-bottom: -90px;
    background: none #87d7e6;
  }
  .home .missionbg_forSP{
    position: relative;
    padding: 100px 10px 400px;
    background: url(../image/mission_3.jpg) 25.5% 0%;
    height: 100%;
    height:100vh;
    background-size: cover;
  }
  .div_venture{
    width: 80% !important;
    margin: auto !important;
    position: relative !important;
    top: -20px !important;
    left: -20px !important;
  }
  .logo_inner{
    width: 84%;
    height: auto;
    overflow: visible;
    margin-bottom: 20px;
  }
  .logo_inner:before{
    display: none;
  }
  .logo_inner .title{
    position: static;
  }
  .logo_inner .title span{
    line-height: 1.8;
    font-size: 14px;
  }
  .logo_inner .comment{
    padding: 10px;
    position: static;
  }
  .logo_inner .comment div{
    display: none;
  }

}

@media(min-width:601px){
  .home .mission {
    margin-bottom: 0px;
  }
  .maincopy .copy{
    font-size:30px;
  }

  .logo_wrapper{
    position: static;
    text-align: center;
  }
  .logo_wrapper .title span{
    font-size: 14px;
    padding: 5px 0;
    margin: 5px 0 0 0;
    text-align: center;
  }

  .logo_inner{
    width: 32%;
    height: auto;
    vertical-align: top;
  }
  .logo_inner .div_venture{
    margin-bottom: 20px;
  }
  .logo_inner .title{
    position: static;
  }
  .logo_inner .comment{
    position: static;
    padding: 10px;
  }
  .logo_inner .comment div{
    display: none;
  }

}
@media(min-width:901px){
  .home .mission{
    margin-bottom: -50px;
  }
  .maincopy .copy{
    font-size:40px;
  }

  .logo_wrapper{
    display: flex;
    justify-content: space-between;
    height: 250px;
    position: absolute;
    width: 100%;
    bottom: 0px;
  }
  .logo_wrapper .title{
    position: absolute;
    top:calc(100% - 36px);
    transition:all ease 0.5s;
    width: 100%;
    text-align: center;
  }
  .logo_wrapper .title span{
    font-size: 18px;
    margin: 0;
    padding: 0;
  }
  .logo_inner{
    height:250px;
  }
  .logo_inner.mouseenter .title{
    top: 0px;
  }
  .logo_inner.mouseenter .comment{
    top: 55px;
  }
  .logo_inner.mouseenter .div_venture{
    top: -300px;
  }
  .logo_inner .comment{
    position: absolute;
    top: 108%;
    padding: 0 20px;
  }
  .logo_inner .comment div {
      display: block;
  }


  
  @keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

}





/*------------------------------------------------------------------logo内のテキスト部分*/
@keyframes textandbtn {
  0% {
    opacity: 0;
    transform:translate(0px,-20px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform:translate(0,0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
@keyframes movefromleft {
  0% {
    opacity: 0;
    transform:translate(-100px,0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform:translate(0,0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
@keyframes movefromright {
  0% {
    opacity: 0;
    transform:translate(100px,0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform:translate(0,0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}

/*------------------------------------------------------------------logo部分*/


[data-gwd-group="logo"] .logo_ventures.venture_1 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="logo"] .logo_ventures.venture_2 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 0px;
  top: 20px;
}
[data-gwd-group="logo"] .logo_ventures.venture_3 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 0px;
}
[data-gwd-group="logo"] .logo_ventures.venture_4 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 40px;
  top: 20px;
}
[data-gwd-group="logo"] .logo_ventures.venture_5 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="logo"] .logo_ventures.venture_6 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="logo"] .logo_ventures.venture_7 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}


@keyframes venture_animation7-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(20px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
[data-gwd-group="logo"] .venture_animation7 {
  animation: venture_animation7-keyframes 0.8s linear 2.5s 1 normal forwards;
}


@keyframes venture_animation6-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(-20px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
[data-gwd-group="logo"] .venture_animation6 {
  animation: venture_animation6-keyframes 0.8s linear 2.5s 1 normal forwards;
}

@keyframes venture_animation5-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
[data-gwd-group="logo"] .venture_animation5 {
  animation: venture_animation5-keyframes 0.5s linear 2.2s 1 normal forwards;
}

@keyframes venture_animation4-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(-40px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(-20px, 0px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}

[data-gwd-group="logo"] .venture_animation4 {
  animation: venture_animation4-keyframes 0.5s linear 1.9s 1 normal forwards;
}

/*3*/
@keyframes venture_animation3-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, 20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
[data-gwd-group="logo"] .venture_animation3 {
  animation: venture_animation3-keyframes 0.5s linear 1.6s 1 normal forwards;
}

/*2*/
@keyframes venture_animation2-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(20px, 0px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
[data-gwd-group="logo"] .venture_animation2 {
  animation: venture_animation2-keyframes 0.5s linear 1.3s 1 normal forwards;
}

/*1*/
@keyframes venture_animation1-keyframes {
  0% {
    opacity: 01;
    transform: translate3d(0px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: linear;
  }
}
[data-gwd-group="logo"] .venture_animation1{
  animation: venture_animation1-keyframes 0.5s linear 1s 1 normal forwards;
}




/*------------------------------------------------------------------studio部分*/

[data-gwd-group="studio"] .logo_studio.studio_wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  left: 20px;
  top: 20px;
}
[data-gwd-group="studio"] {
  width: 100%;
  height: auto;
}
.div_studio {
  position: absolute;
  left: -20px;
  top: -20px;
}
[data-gwd-group="studio"] .logo_studio.studio_1 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="studio"] .logo_studio.studio_2 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 0px;
}
[data-gwd-group="studio"] .logo_studio.studio_3 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 0px;
}
[data-gwd-group="studio"] .logo_studio.studio_4 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 40px;
  top: 20px;
}
[data-gwd-group="studio"] .logo_studio.studio_5 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="studio"] .logo_studio.studio_6 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}
[data-gwd-group="studio"] .logo_studio.studio_7 {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  left: 20px;
  top: 40px;
}


@keyframes studio_animation7-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(20px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
.logo_wrapper [data-gwd-group="studio"] .studio_animation7 {
  animation: studio_animation7-keyframes 0.8s linear 2.5s 1 normal forwards;
}


@keyframes studio_animation6-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(-20px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}

.logo_wrapper [data-gwd-group="studio"] .studio_animation6 {
  animation: studio_animation6-keyframes 0.8s linear 2.5s 1 normal forwards;
}

@keyframes studio_animation5-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
.logo_wrapper [data-gwd-group="studio"] .studio_animation5 {
  animation: studio_animation5-keyframes 0.5s linear 2.2s 1 normal forwards;
}

@keyframes studio_animation4-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(-40px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(-20px, 0px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}

.logo_wrapper [data-gwd-group="studio"] .studio_animation4 {
  animation: studio_animation4-keyframes 0.5s linear 1.9s 1 normal forwards;
}

/*3*/
@keyframes studio_animation3-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(-10px, 10px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, 20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
.logo_wrapper [data-gwd-group="studio"] .studio_animation3 {
  animation: studio_animation3-keyframes 0.5s linear 1.5s 1 normal forwards;
}

/*2*/
@keyframes studio_animation2-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, 40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, 20px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
}
.logo_wrapper [data-gwd-group="studio"] .studio_animation2 {
  animation: studio_animation2-keyframes 0.5s linear 1.3s 1 normal forwards;
}

/*1*/
@keyframes studio_animation1-keyframes {
  0% {
    opacity: 0;
    transform: translate3d(0px, -40px, 0px);
    animation-timing-function: cubic-bezier(0, 0.285, 0.525, 0.905);
  }
  100% {
    opacity: 1;
    transform: translate3d(0px, -20px, 0px);
    animation-timing-function: linear;
  }
}
.logo_wrapper [data-gwd-group="studio"] .studio_animation1{
  animation: studio_animation1-keyframes 0.5s linear 1s 1 normal forwards;
}






.content.head .text h1 {
  animation: textandbtn 0.8s linear 1.5s 1 normal forwards;
}
.content.head .text h2 {
  animation: textandbtn 0.8s linear 1.5s 1 normal forwards;
}


.content.head [data-gwd-group="studio"] .studio_animation7 {
  animation: studio_animation7-keyframes 0.8s linear 1.2s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation6 {
  animation: studio_animation6-keyframes 0.8s linear 1.2s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation5 {
  animation: studio_animation5-keyframes 0.8s linear 1.0s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation4 {
  animation: studio_animation4-keyframes 0.8s linear 1.0s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation3 {
  animation: studio_animation3-keyframes 0.8s linear 1.0s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation2 {
  animation: studio_animation2-keyframes 0.8s linear 1.0s 1 normal forwards;
}
.content.head [data-gwd-group="studio"] .studio_animation1 {
  animation: studio_animation1-keyframes 0.5s linear 1.0s 1 normal forwards;
}





/*------------------------------------------------------------------connect部分*/

[data-gwd-group="connect"] .logo_connect.connect_wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  left: 20px;
  top: 20px;
}
[data-gwd-group="connect"] {
  width: 100%;
  height: auto;
}
[data-gwd-group="connect"] .logo_connect {
  position: absolute;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
}

[data-gwd-group="connect"] .logo_connect.connect_1 {
  left: 20px;
  top: 0px;
  animation: fadein_downward 0.5s linear 1s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_2 {
  left: 0px;
  top: 40px;
  animation: fadein_lb2rt 0.5s linear 1.3s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_3 {
  left: 20px;
  top: 40px;
  animation: fadein_upward 0.5s linear 1.5s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_4 {
  left: 0px;
  top: 0px;
  animation: fadein_lt2rb 0.5s linear 1.9s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_5 {
  left: 20px;
  top: 40px;
  animation: fadein_upward 0.5s linear 2.2s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_6 {
  left: 20px;
  top: 0px;
  animation: fadein_downward 0.5s linear 2.2s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_7 {
  left: 0px;
  top: 20px;
  animation: fadein_l2r 0.8s linear 2.5s 1 normal forwards;
}
[data-gwd-group="connect"] .logo_connect.connect_8 {
  left: 40px;
  top: 20px;
  animation: fadein_r2l 0.8s linear 2.5s 1 normal forwards;
}

@keyframes fadein_upward {
  0% {
  }
  100% {
    opacity: 1;
    transform: translateY(-20px);
  }
}
@keyframes fadein_downward {
  0% {
  }
  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}
@keyframes fadein_lb2rt {
  0% {
  }
  100% {
    opacity: 1;
    transform: translate(20px,-20px);
  }
}
@keyframes fadein_lt2rb {
  0% {
  }
  100% {
    opacity: 1;
    transform: translate(20px,20px);
  }
}
@keyframes fadein_l2r {
  0% {
  }
  100% {
    opacity: 1;
    transform: translateX(20px);
  }
}
@keyframes fadein_r2l {
  0% {
  }
  100% {
    opacity: 1;
    transform: translateX(-20px);
  }
}







.content.head [data-gwd-group="connect"] .connect_animation8 {
  animation: fadein_r2l 0.8s linear 1.2s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation7 {
  animation: fadein_l2r 0.8s linear 1.2s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation6 {
  animation: fadein_downward 0.8s linear 1s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation5 {
  animation: fadein_upward 0.8s linear 1s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation4 {
  animation: fadein_lt2rb 0.8s linear 1s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation3 {
  animation: fadein_upward 0.8s linear 1s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation2 {
  animation: fadein_lb2rt 0.8s linear 1s 1 normal forwards;
}
.content.head [data-gwd-group="connect"] .connect_animation1 {
  animation: fadein_downward 0.8s linear 1s 1 normal forwards;
}