html,body{
    overflow-x: hidden;
    overflow-y: scroll;
}


img {
     width: auto;
     height: auto; 
}

@font-face {
    font-family: 'MyYuGothicM';
    font-weight: normal;
    src: local('YuGothic-Medium'), /* PostScript Name = localの正式な指定方法 */
    local('Yu Gothic Medium'),     /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
    local('YuGothic-Regular');     /* 游ゴシックMediumが存在しないWindows8.1用 */
}
@font-face {
    font-family: 'MyYuGothicM';
    font-weight: bold;
    src: local('YuGothic-Bold'), /* PostScript Name = localの正式な指定方法 */
    local('Yu Gothic');          /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
}
.sample{
   font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
   font-size: 3.4rem;
   background-color: #fff;
   display: inline-block;
   font-weight: 700;
}

.lp-mainvisual {
    background:url(../img/lp/mainvisual.jpg) no-repeat;
    padding: 30px 0;
    margin-bottom: 0;
    background-attachment: scroll;
    background-position: center center;
    width: 100vw;
    height: 650px;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;

}

.material-icons{
    vertical-align: middle;
    font-size: 23px;
}

.logo-img{
    padding: 0 0px;
}

.lp-row{
    padding: 30px 0 0 0;
}

.row .lp-col{
    padding: 20px 0 0 0;
}

.lp-main-btn{
    color: #5C8563;
    background: #FFF;
    border: #fff;
    border-radius: 5px;
    padding: 20px 50px;
    letter-spacing: 1px;
    font-size: 16px;
    transition: .3s;
}
.lp-main-btn:hover {
    opacity: .8;
    transition: .3s;
}


.btn-box {
    margin-top: 45px;
}
.how-to-use-case-padding-img {
    position: absolute;bottom: 0;
}

.lp-main-text h2{
    line-height: 150%;
    color: #fff;
}
.lp-main-text p{
    line-height: 200%;
    color: #fff;
}
.lp-mainvisual h2{
    font-size: 2.8rem;
    margin: 30px 0;
    font-weight: bold;
}

.lp-mainvisual p{
    font-size: 1.2rem;
    letter-spacing: 1px;
    line-height: 200%;
    font-weight: bold;
}

.features{
    padding: 100px 0;
}

.features-title{
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 35px 0;
}

.features .features-caption{
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 200%;
    text-align: center;
    margin: 0 0 60px 0;
}

.features-caption{
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 200%;
    text-align: center;
    margin: 0 0 20px 0;
}

.features-col h4{
    font-size: 32px;
    line-height: 150%;
    font-weight: bold;
}

.features-text{
    text-align: center;
    margin: 0 0 60px 0;
    letter-spacing: 1px;
    line-height: 200%;
}

.features-col img{
    width: 100%;
}

.features-row-bottom{
    margin-top: 80px;
}

.main-function{
    padding: 80px 0;
    background-color: #F7F7F7;
}

/*.border-box{
    border: dotted #C7C7C7;
    width: 100%;
    height: 200px;
}*/

#schema_s{

}

.slick-slide img{
    max-width: 100%;
    height: auto;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #5C8563;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 60px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #5C8563;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-function-col1{
    margin: 0 0 80px 0;
    position: relative;
}

.main-function-col2{
    margin: 0 0 80px 0;
    position: relative;
}

.main-function-col3{
    margin: 0 0 80px 0;
    position: relative;
}

.border-box img{
    width: 100%;
    margin: 15px 0 0 0;
}

.main-function-col1 p{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
.main-function-col2 p{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
.main-function-col3 p{
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
.features-col p{
    line-height: 200%;
}
.flow{
    padding: 80px 0;
}
.flow-img {
    display: inline-block;
    text-align: center;
}
.flow-col{
    text-align: center;
}

.flow-col h5{
    font-size: 20px;
    font-weight: bold;
    color: #6ABC55;
}

.flow-col p{
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 200%;
}
.launch-wrap {
    background: url(../img/lp/cv-bg.jpg) no-repeat;
    height: 300px;
    background-size: cover;
    background-position: center center;  
    padding: 60px 0;
}

.launch-text {
    text-align: center;
}
.launch-btn {
    margin-top: 40px;
    text-align: center;
}

.launch-btn a{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aee088+18,7ab542+99,93b773+100 */
background: rgb(174,224,136); /* Old browsers */
background: -moz-linear-gradient(left, rgba(174,224,136,1) 18%, rgba(122,181,66,1) 99%, rgba(147,183,115,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(174,224,136,1) 18%,rgba(122,181,66,1) 99%,rgba(147,183,115,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(174,224,136,1) 18%,rgba(122,181,66,1) 99%,rgba(147,183,115,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aee088', endColorstr='#93b773',GradientType=1 ); /* IE6-9 */
color: #fff;
}


.launch-btn a:hover img{
    opacity: .8;

}
.submit-btn {
    width: auto;
    padding: 1.4rem 4rem;
}

.home-prev {
    position: absolute;
    top: 48%;
    left: 25px;
}

.home-prev2{
    position: absolute;
    top: 48%;
    left: 25px;
}

.home-prev3{
    position: absolute;
    top: 48%;
    left: 25px;
}

.home-prev:hover {
    cursor: pointer;
}

.home-prev2:hover {
    cursor: pointer;
}

.home-prev3:hover {
    cursor: pointer;
}

.home-next{
    position: absolute;
    top: 48%;
    right: 25px;
}

.home-next2{
    position: absolute;
    top: 48%;
    right: 25px;
}


.home-next3{
    position: absolute;
    top: 48%;
    right: 25px;
}


.home-next:hover{
    cursor: pointer;
}

.home-next2:hover{
    cursor: pointer;
}
.home-next3:hover{
    cursor: pointer;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 12px;
  }
  
  header {
    background-color: #12887b;
    height: 4rem;
    width: 100%;
  }

  header .logo {
    height: 4rem;
    width: auto;
    padding: .8rem 0;
    margin: 0 0 0 5%;
  }

  header .logo img {
    height: 100%;
    width: auto;
  }

  header .side-nav-btn {
    position: absolute;
    top: calc((100% - 3rem) / 2);
    right: 1rem;
    line-height: 1;
    height: 3rem;
  }

  header .side-nav-btn i {
    font-size: 3rem;
    color: #fff;
  }

  .side-nav {
    background-color: #fff;
    padding: 10% 5%;
  }

  .side-nav .logo {
    width: 60%;
    margin: 0 0 0 5%;
    padding: 1rem 0;
    height: auto;
  }

  .side-nav ul,
  .side-nav ul li,
  .side-nav ul li a {
    width: 100%;
    display: block;
    height: auto;
    margin: 0;
  }

  .side-nav ul {
    padding-left: 3rem;
  }

  .side-nav li > a {
    display: block;
    line-height: 250%;
    font-size: 1.5rem;
    color: #12887b;
    padding: 0;
    text-align: left;
  }

  .page-title__text {
    font-size: 1.6rem;
    margin: 1.9rem 0 1.9rem 3%;
  }

  .hero-box {
    top: calc((100vh - 4rem - 7rem) / 2)
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__text {
    font-size: .8rem;
  }

  .service-item {
    width: 90%;
    margin: 0 5% 2rem 5%;
  }

  .service-item__num {
    display: block;
    width: 4rem;
    height: 4rem;
    padding-top: .5rem;
  }

  .service-item__title {
    margin: 0;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
  }

  .service-item__caption {
    margin: 1rem 10%;
  }

  .more {
    margin: 2rem 0;
  }

  .more__btn {
    width: 10rem;
    font-size: 1rem;
    padding: .5rem 0;
  }

  .company-item {
    margin-bottom: 1rem;
  }

  .recruit-info {
    height: 20vw;
    padding-top: calc((20vw - 1.5rem) / 2);
  }

  .cv-area-contact {
    flex-direction: column;
  }

  .cv-area-contact__text {
    font-size: 1rem;
    margin: 1rem 10%;
  }

  .cv-area-contact__btn {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    width: 15rem;
    padding: .5rem;
  }

  footer .row {
    padding: 3rem 0;
  }

  .site-map {
    padding: 2rem;
  }

  .footer__heading {
    margin-top: 1rem;
  }

  .footer__element {
    padding-left: 1rem;
  }

  .item-header i {
    font-size: 1.8rem;
    padding: .9rem;
  }

  .item__title {
    font-size: 1.2rem;
    letter-spacing: .2rem;
    padding: 1.4rem 0 1.4rem .4rem;
  }

  .about-us-item {
    width: 90%;
    margin: 0 5%;
    padding-bottom: 1rem;
  }

  .about-us-table {
    margin: 2rem .3rem;
    width: calc(100% - .6rem);
  }

  .about-us-table th,
  .about-us-table td {
    padding-left: .5rem;
    letter-spacing: .2rem;
  }

  .about-us-img {
    margin: 1rem 0;
  }

  .ceo-history-item {
    width: 90%;
    margin: 0 5%;
    padding-bottom: 1rem;
  }

  .vision-detail {
    padding: 2rem 0;
  }

  .vision-item {
    width: 90%;
    margin: 0 5%;
    padding-bottom: 1rem;
  }

  .vision-item-img {
    width: 90%;
    margin: 0 5%;
  }

  .interview-item {
    width: 90%;
    margin: 0 5%;
    padding-bottom: 1rem;
  }

  .welfare .container .row .col {
    margin-top: 1rem;
  }

  .welfare-item {
    height: 12rem;
    width: 12rem;
  }

  .welfare-item__text {
    font-size: 1rem;
  }

  .row-margin {
    padding: 0;
    margin-top: 0;
  }

  .section__caption-center {
    width: 90%;
    margin: 2rem 5%;
  }

  .training-item {
    margin-bottom: 2rem;
  }

  .requirements-table th,
  .requirements-table td {
    padding-left: .5rem;
    letter-spacing: .2rem;
  }

/*
  lp
*/
.lp-mainvisual {
    background:url(../img/lp/mainvisual.jpg) no-repeat;
    padding: 20px 0;
    margin-bottom: 0;
    background-attachment: scroll;
    background-position: center center;
    width: 100vw;
    height: 450px;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;

}
.lp-mainvisual h2 {
  font-size: 28px;
}
.how-to-use-case-padding-img {
  display: none;
}
.lp-mainvisual .how-to-use-case-padding-img img{
  width: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: auto;
}
.lp-row {
  padding-top: 0px;
}
.row .lp-col {
  padding-top: 10px;
}
.logo-img {
  padding: 0 0px;
}
.btn-box  {
  text-align: center;
}
.features {
  padding: 40px 0;
}
.features-title {
  font-size: 24px;
}
.features-caption {
  font-size: 14px;
  margin-bottom: 20px;
}
.features-col h4 {
  font-size: 24px;
}
.features-row-bottom {
  margin-top: 20px;
}
.main-function {
  padding: 40px 0;
}
.flow {
  padding: 40px 0;
}
.footer-logo img {
  width: 200px;
}
#home-arrows,#home-arrows2,#home-arrows3{
  display: none;
}
}

@media only screen and (max-width: 991px) {
  html {
    font-size: 13px;
  }

  .col .service-item-img {
    margin-top: 20%;
  }

    .flow-col .flow-img{
    width: 100%;
  }

  .service-item__title {
    letter-spacing: .1rem;
    margin-left: .5rem;
    text-align: center;
    display: block;
  }

  .company-overlay {
    padding: 0 1rem;
  }

  .service-item__caption {
    margin-top: 2rem;
  }

  .company-overlay i {
    font-size: 2rem;
  }

  .company__title-ja {
    font-size: 1.2rem;
    letter-spacing: .3rem;
  }

  .cv-area-contact__btn {
    width: 15rem;
    font-size: 1rem;
    padding: .5rem 0;
    margin-left: 1rem;
  }

  .footer-logo-col {
    padding: 0 .9rem;
  }

  .service-item,
  .about-us-item,
  .ceo-history-item,
  .vision-item,
  .interview-item {
    width: 90%;
    margin: 0 5% 3rem 5%;
  }

  .service-detail-item {
    padding: 1rem;
  }

  .service-detail__title {
    letter-spacing: .2rem;
  }

  .about-us-table th,
  .about-us-table td {
    padding-left: 2rem;
  }

  .welfare-item {
    width: 11rem;
    height: 11rem;
  }

  .welfare-item__text {
    font-size: 1rem;
    letter-spacing: .1rem;
  }

  .wanted-item {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .wanted-item__caption {
    font-size: 1.1rem;
    letter-spacing: .1rem;
  }

  footer .row {
    padding: 3rem 0;
  }

  .footer__info {
    margin: 1rem 0;
  }

  .site-map {
    padding: 0;
  }

  .site-map .row .col {
    padding: .5rem;
  }
}