/*
** top page styles
*/

/*----------------------------------
  top common items
------------------------------------*/
/*----------------------------------
  top common items
------------------------------------*/

.owl-item img{
  transition-duration: 0.3s;
}

.button{
  
  width: 550px;
  height: 100px;
  text-align: center;
  position: relative;
  transition-duration: 0.3s;
}
.button:after{
  content:'';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  right:5px;
  top:5px;
}

.button:hover{
  transition-duration: 0.3s;
}

.button a{
  height: 100%;
  width: 100%;
  display: inherit;
  color: #fff;
}

.button .ja{
  font-size: 49px;
  font-weight: bold;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  display: inline-block;
  height:  100px;
  line-height: 100px;
  letter-spacing: 3px;
  transition-duration: 0.3s;
}

.button .ja:hover{
  transition-duration: 0.3s;
}

.button .en{
  font-size: 13px;
  position: absolute;
  bottom: 20px;
  left:0;
  right:0;
  margin: auto;
}

/*----------------------------------
  section:main-visual
------------------------------------*/




.body3{
  position: relative;
  padding: 70px 0 50px;

  
}

.body3 .wrp ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.body3 .wrp ul li{
  width: 210px;
  height: 210px;
  border-radius: 15px;
  margin-bottom: 12px;
  box-shadow: 0 0 6px 1px rgba(0,0,0,0.4);
  transition-duration: 0.3s;
}

.body3 .wrp ul li:hover{
  box-shadow: 0 0 0px 0px rgba(0,0,0,0.4);
  transition-duration: 0.3s;
}

.body3 .wrp ul li .box{
  height: 153px;
  position: relative;
}
.body3 .wrp ul li .front:hover{
  opacity: 0;
}

.body3 .wrp ul li .back,
.body3 .wrp ul li .front{
  position: absolute;
  height: 100%;
  width: 100%;
}
.body3 .wrp ul li .front{
  background-color: #fff;
  z-index: 1;
  border-radius: 15px 15px 0 0;
  transition-duration: 0.3s;
}
.body3 .wrp ul li .front img{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.body3 .wrp ul li .back{
  background-color: #fff;
  border-radius: 15px 15px 0 0;
}
.body3 .wrp ul li .back p{
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  padding: 24px 10px 0px 10px;
}
.body3 .wrp ul li .title{
  padding: 17px;
  background-color: #f2f2f2;
  height: 57px;
  border-radius: 0 0 15px 15px;
  position: relative;
}
.body3 .wrp ul li .title:after{
  content: '';
  background-image: url(../img/arrow-round.svg);
  background-size: cover;
  height: 15px;
  width: 9px;
  display: block;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.body3 .wrp ul li .title span{
  font-weight: bold;
  font-size: 18px;
}


@media (max-width: 599px){
  .body3 .wrp ul{justify-content: space-around;}
  .body3 .wrp ul li{width: 48%;}
  .body3 .wrp ul li .front img{width: auto;}
}

.introduction{
  /* margin-top: -100px; */
  background-color: #f4f4f4;
/*  padding-top: 50px; */

}

.introduction .text-box{
  width: 630px;
  margin: 0 auto;
  margin-top: 0px;
}

.introduction .lower{
  width: 1000px;
  height: 100px;
  position: relative
}

.introduction .lower img{
  position: absolute;
  bottom: 0;
}

.introduction .lower .human{
  right: 0;
}

.body-1, .body-2, .body-3{
  height: 525px;
  background-repeat: no-repeat;
  background-position: center;
}
.body-1 .title, .body-2 .title, .body-3 .title{
  padding-top: 90px;
}

.body-1 .text-box,
.body-2  .text-box,
.body-3 .text-box{
  text-align: left;
  margin-top: 35px;
}

/*----------------------------------
  section:technique
------------------------------------*/
.body-1{
  background-image: url(../img/characteristic.jpg);
}

.body-1 .title{
  text-align: left;
}

/*----------------------------------
  section:succeed
------------------------------------*/

.body-2{
  background-image: url(../img/characteristic2.jpg);
}

.body-2 .title{
  text-align: right;
}

.body-2 .text-box{
  width: 430px;
  right: 5%;
  position: absolute;
}

/*----------------------------------
  section:projects
------------------------------------*/

.body-3{
  background-image: url(../img/characteristic3.jpg);
}

.body-3 .title{
  text-align: left;
}

/*----------------------------------
  section:point
------------------------------------*/

.body2{
  background-color: #f4f4f4;
  background-position: 6% 0;
  padding-bottom: 50px;
}

.body2 .wrp{
  width: 900px;
}

.body2 .title{
  padding:100px 0 50px;
}

.body2 ul{
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.body2 li{
  width: 25%;
  text-align: center;
}

.body2 .sub-title{
  font-size: 22px;
  font-weight: bold;
  color: #4d4d4d;
  text-align: center;
  padding: 13px 0;
  line-height: 1.3;
}

.body2 .text-box-s{
  font-size: 20px;
  line-height: 32px;
  text-align: left;
  padding-bottom: 20px;
}

/* block:tour(included section:point) */



.tour .text-box-s{
  width: 660px;
  text-align: center;
  margin: 0 auto;
}

.tour .button{
  margin: 0px auto;
  margin-top: 20px;
    margin-bottom: 50px;
  background-color: #ca0022;
  color: #FFF;
}




@media (max-width: 599px){
  /*----------------------------------
    responsive common style
  ------------------------------------*/

 .project-sort{
	margin-bottom: 0;
 }

  section{
    width: 100%;
  }

  section .title{
    text-align: center !important;

  }

  section .title img{
    display: inline;
    width: 90%;
  }

  .text-box{
    width: 90% !important;
    position: inherit !important;
    margin: 0 auto;
  }


  /*----------------------------------
    section:main-visual
  ------------------------------------*/

  /*----------------------------------
    section:introduction
  ------------------------------------*/

/*
  .introduction{
    padding-top: 200px;
  } */

  .introduction .title img{
    margin: 50px 0;
  }
    
   .introduction{
    /* padding-top: 100px; */
  } 

  .introduction .lower{
    width: 90%;
  }

  .introduction .lower img{
    width: 100%;
  }

  .body-1, .body-2, .body-3{
    height: auto;
    padding: 0 0 20px;
    background-image: none;
  }

  .body-1 .title, .body-2 .title, .body-3 .title{
    padding: 30px 0;
  }

  .body-1 img,
  .body-2 img,
  .body-3 img{
    width: 100%;
  }

  /*----------------------------------
    section:point
  ------------------------------------*/

  .body2{
    background-size: 40%;
  }

  .body2 .wrp{
    width: 100%;
  }

  .body2 .title{
    padding: 50px 0;
    padding-left: 0px;
    text-align: center;
  }

  .body2 .title img{
    max-width: 674px;
  }

  .body2 ul{
    justify-content: space-around;
    width: 90%;
    margin: 0 auto;
  }

  .body2 li{
    width: 45%;
    margin-bottom: 30px;
  }

  .body2 li img{
    width: 100%;
  }

  .body2 .sub-title{
    font-size: 1rem;
  }

  /* section:tour */


  .body2 .tour {
    width: 95%;
    margin: 0 auto;
  }

  .tour .text-box-s{
    width: 100%;
  }
  .tour .button{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
  }



  .tour .title img{
    max-width: 604px;
  }

  .tour .sub-title img{
    width: 100%;
  }

    
    
  .body3{
  position: relative;
  padding: 70px 0 0px;
  padding-bottom: -10px;

  
}