@charset "UTF-8";

body{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #222;
    letter-spacing: 0.03em;
    background-color: #fff;
}
a{
    color: #333;
    text-decoration: none;
}


/*header start*/
.logo img{
    width: 100%;
    max-width: 300px;
}
header{
    width: 100%;
    background: #fff;
    box-shadow: 0px 4px 6px #00000012;
}
.header-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:24px 40px;
    background: #fff;
}
.header-wrap ul{
    display: flex;
}
.header-wrap li{
    font-size: 16px;
}
.header-wrap li:not(:last-child){
    margin-right: 32px;
}

.pc .border a {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
.pc .border a::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #333;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }
  .pc .border a:hover::after {
    transform: scale(1, 1);
  }
  .pc .box{
    transition: all .3s;

}
  .pc .box:hover{
      opacity: 0.9;
      transition: all .3s;
  }




/*header end*/


/*main start*/
main{
    width: 100%;
    background: url(../img/mv@2x.jpg) no-repeat top left;
    background-size: cover;
}
.main-wrap{
    text-align: center;
    color: #fff;
    padding: 88px 24px;
}
.main-wrap h1{
    font-size: 46px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0px 0px 5px #00000029;
}
.main-wrap p{
    font-size: 18px;
    line-height: 1.8;
    margin-top: 24px;
    text-shadow: 0px 0px 5px #00000029;
}
.main-wrap button{
    display: inline-block;
    width: 100%;
    max-width: 364px;
    padding: 18px 0;
    font-size: 18px;
    color: #fff;
    background-color: #222;
    border: none;
    outline: none;
    margin-top: 32px;
}
.btn1{
    position: relative;
    transition: all .3s;
}
.btn1:before,
.btn1:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 20%;
    height: 1px;
    background: #fff;
    transition: all .3s;
  }
.btn1:before{
    width: 35px;
    transform: translate(30px, 0px);
  }
.btn1:after{
    width: 15px;
    transform-origin: right center;
    transform: translate(30px, 0px) rotate(25deg);
  }
.btn1:hover{
  background-color: #333;
}
.btn1:hover:before,
.btn1:hover:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 15%;
    height: 1px;
    background: #fff;
  }
/*main end*/


/*Philosophy start*/
.philosophy-box{
    width: 100%;
    max-width: 1040px;
    padding: 0 16px;
    margin: 0 auto;
}
.title1{
    padding: 72px 0 48px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.title1:after{
    content: 'Philosophy';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.philosophy-wrap{
    display: flex;
    margin-bottom: 104px;
}
.philosophy-img{
    width: 49.5%;
}
.philosophy-img img{
    width: 100%;
    max-width: 489px;
}
.philosophy-text{
    width: 50.5%;
    margin-left: 48px;
}
.philosophy-text h2{
    font-size: 36px;
    font-weight: 600;
    line-height: 1.6;
}
.philosophy-text p{
    font-size: 14px;
    line-height: 2.0;
    margin-top: 24px;
}
/*Philosophy end*/



/*services start*/
.services{
    background-color: #F4F4F4;
}
.title2{
    padding: 72px 0 48px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.title2:after{
    content: 'Services';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.services-box{
    width: 100%;
    max-width: 1040px;
    padding: 0 16px;
    margin: 0 auto;    
}
.services-img img{
    width: 100%;
    max-width: 520px;
}
.services-wrap{
    display: flex;
    box-shadow: 0px 0px 10px #0000000D;
}
.services-wrap:not(:last-child){
    margin-bottom: 32px;

}
.services-img{
    width: 50%;
}
.services-text{
    width: 50%;
    background-color: #fff;
    padding: 0 32px;
}
.services-text-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.services-text-explanation{
    font-size: 14px;
    line-height: 2.0;
    margin-bottom: 22px;
}
.services-text-number{
    font-weight: 600;
    font-size: 60px;
    line-height: 1.5;
}
.services-text h2{
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
}
.services-item{
    border-top: 1px #ccc dashed;
}
.services-item ul{
    margin-top: 24px;
}
.services-item li{
    display: inline-block;
    font-size: 14px;
    background-color: #eee;
    border-radius: 3px;
    padding: 6px 16px;
    margin-right: 10px;
    margin-bottom: 12px;
}
.reverse{
    flex-direction: row-reverse;
}
.w544{
    display: none;
}
.services{
    padding-bottom: 104px;
}
/*services end*/

/*Recruiting start*/
.recruiting-box{
    width: 100%;
    max-width: 1040px;
    padding: 0 16px;
    margin: 0 auto;
}
.title3{
    padding: 72px 0 48px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.title3:after{
    content: 'Recruiting';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.recruiting-wrap{
    background: url(../img/recruiting@2x.jpg)no-repeat center center;
    background-size: cover;
    padding: 48px 20px 56px;
    text-align: center;
}
.recruiting-wrap p{
    font-size: 16px;
    color: #fff;
    text-shadow: 0px 0px 6px #00000033;
    line-height: 2.1;
}
.recruiting-wrap button{
    display: inline-block;
    width: 100%;
    max-width: 364px;
    padding: 18px 0;
    font-size: 18px;
    color: #fff;
    background-color: #222;
    border: none;
    outline: none;
    margin-top: 32px;
}
/*Recruiting end*/


/*hoiku*/

.hoikutitle{
    padding: 72px 0 48px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.hoikutitle:after{
    content: 'RecruitingSystem';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.hoiku-wrap{
    background: url(../img/business-system_hoiku.jpg)no-repeat center center;
    background-size: cover;
    padding: 48px 20px 56px;
    text-align: center;
}



.hoiku-wrap p{
    font-size: 16px;
    color: #fff;
    text-shadow: 0px 0px 6px #00000033;
    line-height: 2.1;
}
.hoiku-wrap button{
    display: inline-block;
    width: 100%;
    max-width: 364px;
    padding: 18px 0;
    font-size: 18px;
    color: #fff;
    background-color: #222;
    border: none;
    outline: none;
    margin-top: 32px;
}
/*hoiku end*/

/*News & Topics start*/
.news-box{
    width: 100%;
    max-width: 760px;
    padding: 0 16px;
    margin: 0 auto;
}
.title4{
    padding: 104px 0 40px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.title4:after{
    content: 'News & Topics';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.news-wrap{
    margin-bottom: 104px;
}
.news-wrap li{
    font-size: 14px;
    line-height: 2.0;
    border-bottom: 1px solid #e6e6e6;
    padding: 24px;
}

.news-wrap span{
    display: inline-block;
    margin-right: 48px;
}
.news-wrap p{
    display: inline-block;
}
/*News & Topics end*/


/*contact start*/
.contact{
    background: url(../img/contact@2x.jpg) no-repeat center center;
    background-size: cover;
    padding-bottom: 104px;
}
.contact-box{
    width: 100%;
    max-width: 1040px;
    padding: 0 16px;
    margin: 0 auto;
    text-align: center;
}
.title5{
    padding: 72px 0 48px;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.45;
}
.title5:after{
    content: 'Services';
    color: "#222";
    font-size: 20px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0em;
}
.contact-wrap button{
    display: inline-block;
    width: 100%;
    max-width: 364px;
    padding: 18px 0;
    font-size: 18px;
    color: #fff;
    background-color: #222;
    border: none;
    outline: none;
    margin-top: 32px;
}
.btn2{
    position: relative;
    transition: all .3s;
}
.btn2::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 26px;/*画像の幅*/
    height: 26px;/*画像の高さ*/
    background: url(../img/mail.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 8px;
}
.btn2:hover{
    position: relative;
    background-color: #333;
    transition: all .3s;
}
.contact-wrap p{
    font-size: 16px;
    line-height: 1.5;
}
.w450{
    display: none;
}
/*contact end*/


/**/
.footer{
    background-color: #222;
}
.footer-box{
    width: 100%;
    max-width: 1040px;
    padding: 48px 16px 56px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.footer-box h1{
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
}
.address{
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 24px;
}
.industry{
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    display: inline-block;
    text-align: left;
    padding-left:3em;
    text-indent:-3em;
}
.copyright{
    margin-top: 24px;
    font-size: 10px;
}

.clear{
      display: none;
}

/**/


@media screen and (max-width: 1120px) {
    .philosophy-text{
        margin-left: 32px;
    }
.clear{
      display: none;
}
}

@media screen and (max-width: 992px) {
    .logo img{
        max-width: 240px;
    }
    .header-wrap li:not(:last-child){
        margin-right: 12px;
    }
    main{
        top: 69px;
    }
    .title1 {
        padding: 56px 0 40px;
        font-size: 36px;
    }
    .title2{
        padding: 56px 0 40px;
        font-size: 36px;
    }
    .philosophy-text h2{
        font-size: 28px;
        line-height: 1.3;
    }
    .philosophy-wrap {
        margin-bottom: 88px;
    }
    .services-text h2{
        font-size: 18px;
    }
    .services-text{
        padding: 0 16px;
    }
    .services-text-number{
        font-size: 36px;
    }
    .services-text-explanation{
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .services-item ul{
        margin-top: 16px;
    }
    .services-item li{
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 2px;
        margin-bottom: 8px;
    }
    .services {
        padding-bottom: 88px;
    }
    .title3{
        padding: 56px 0 40px;
        font-size: 36px;
    }
    .title4{
        padding: 56px 0 40px;
        font-size: 36px;
    }
    .news-wrap li {
        padding: 16px;
    }
    .news-wrap {
        margin-bottom: 88px;
    }
    .title5{
        padding: 56px 0 40px;
        font-size: 36px;
    }
    .contact{
        padding-bottom: 88px;
    }
    .header-wrap .pc li:last-child a {
        display: block;
        width: 100px;
        background: #222222;
        color: #ffffff;
        text-align: center;
        padding: 14px 0;
    }
.clear{
      display: none;
}

.hoiku-wrap{
    background: url(../img/business-system_hoiku.jpg)no-repeat center center;

}

}

@media screen and (max-width: 768px) {
    .main-wrap h1{
        font-size: 40px;
    }
    .main-wrap p{
        font-size: 16px;
    }
    .main-wrap button{
        font-size: 16px;
    }
    main{
        width: 100%;
        background: url(../img/mv_sp@2x.jpg) no-repeat top center;
        background-size: cover;
    }
    .philosophy-text p{
        line-height: 1.8;
        margin-top: 16px;
    }
    .philosophy-wrap{
        flex-direction: column;
    }
    .philosophy-img{
        width: 100%;
        text-align: center;
    }
    .philosophy-img img{
        width: 100%;
        max-width: 544px;
    }
    .philosophy-text{
        width: 100%;
        margin-left: 0px;
        margin-top: 24px;
    }
    .w768{
        display: none;
    }
    .services-wrap{
        flex-direction: column;
    }
    .services-img{
        width: 100%;
    }
    .services-text{
        width: 100%;
    }
    .services-img img{
        max-width: 768px;
    }
    .services-text h2{
        font-size: 20px;
    }
    .services-text-number{
        font-size: 56px;
    }
    .services-text-title{
        margin-bottom: 10px;
    }
    .services-text-explanation{
        line-height: 1.5;
        margin-bottom: 24px;
    }
    .services-item ul{
        margin-top: 24px;
    }
    .services-item li{
        font-size: 14px;
        padding: 6px 18px;
        margin-right: 16px;
        margin-bottom: 16px;
    }
    .services-text {
        padding: 0 24px 16px;
    }
    .recruiting-wrap button{
        font-size: 16px;
    }
    .recruiting-wrap{
        background: url(../img/recruiting_sp@2x.jpg)no-repeat center center;
        background-size: cover;
        padding: 48px 20px 56px;
        text-align: center;
    }
    .news-wrap span{
        display: block;
        margin-bottom: 5px;
    }
    .news-wrap p{
        display: block;
    }
    .news-wrap li {
        padding: 8px 12px;
        line-height: 1.5;
    }
    .contact{
        background: url(../img/contact_sp@2x.jpg) no-repeat center center;
        background-size: cover;
        padding-bottom: 104px;
    }
.clear{
   display: block;
}

.hoiku-wrap{
    background: url(../img/business-system_hoiku_sp.jpg)no-repeat center center;

}

}

@media screen and (max-width: 544px) {
    .main-wrap h1{
        font-size: 32px;
    }
    .main-wrap p{
        font-size: 14px;
    }
    .main-wrap button{
        font-size: 14px;
    }
    .main-wrap{
        padding: 56px 24px 52px;
    }
    .title1{
        padding: 40px 0 24px;
        font-size: 36px;
    }
    .title2{
        padding: 40px 0 24px;
        font-size: 36px;
    }
    .philosophy-wrap {
        margin-bottom: 72px;
    }
    .services-text h2{
        font-size: 18px;
    }
    .services-text-number{
        font-size: 28px;
    }
    .services-text-title{
        margin-bottom: 10px;
    }
    .services-text-explanation{
        line-height: 1.5;
        margin-bottom: 12px;
    }
    .services-item ul{
        margin-top: 16px;
    }
    .services-item li{
        font-size: 12px;
        padding: 6px 8px;
        margin-right: 4px;
        margin-bottom: 8px;
    }
    .services-text {
        padding: 8px 16px 16px;
    }
    .w544{
        display: inline;
    }
    .services {
        padding-bottom: 72px;
    }
    .recruiting-wrap p{
        font-size: 14px;
        line-height: 1.8;
    }
    .w544-2{
        display: none;
    }
    .recruiting-wrap button{
        font-size: 14px;
    }
    .title3{
        padding: 40px 0 24px;
        font-size: 36px;
    }
    .title4{
        padding: 40px 0 24px;
        font-size: 36px;
    }
    .news-wrap {
        margin-bottom: 72px;
    }
    .title5{
        padding: 40px 0 24px;
        font-size: 36px;
    }
    .contact{
        padding-bottom: 72px;
    }
    .footer-box h1{
        font-size: 20px;
    }
    .address{
        line-height: 1.4;
        margin-top: 16px;
    }
    .industry{
        line-height: 1.4;
        margin-top: 12px;
    }
    .copyright{
        margin-top: 20px;
        font-size: 10px;
    }
    .footer-box{
        padding: 24px 16px 32px;
    }

.hoiku-wrap{
    background: url(../img/business-system_hoiku_sp.jpg)no-repeat center center;

}

.clear{
   display: block;
}
}
@media screen and (max-width: 450px) {
    .w450{
        display: block;
    }
}