@charset "utf-8";
/*--------------------------------------------------------------------------------

* common

--------------------------------------------------------------------------------*/
*{margin:0;padding:0;}
body{
	/*color: #3c4448;*/
  color:#8f9192;
	font-family: "Noto Sans Japanese",游ゴシック体,'Yu Gothic',YuGothic,'ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size: 16px;
  background: white;
  line-height: 1.7;
}
ul,ol,li{margin:0;padding:0;}
li{list-style: none;}
h1{font-size: 38px;line-height: 1.5;margin:0;font-weight: bold;}
h2{font-size: 24px;line-height: 1.4;-webkit-font-smoothing: antialiased;margin:0;font-weight: bold;margin-bottom: 20px;}
h3{font-size: 20px;line-height: 1;-webkit-font-smoothing: antialiased;margin:0;font-weight: bold;}
h4{font-size: 18px;-webkit-font-smoothing: antialiased;}
p{-webkit-font-smoothing: antialiased;margin-bottom:20px;}
img{max-width: 100%;height: auto;}
a{cursor:pointer;color:#8f9192;transition: all .2s;}
a:hover{text-decoration: none;}
.container{margin:auto;}


/*------------------------------------------
header
------------------------------------------*/
.site-logo{width: 250px;height: 100%;display: block;}
header{position: absolute;top:0;left:0;z-index: 2;width: 100%;}
header.recruit{position: relative;}
header.recruit li a{color: #8f9192}
header.recruit .header-container{margin:20px auto;}
.header-container{display: flex;justify-content: space-between;margin-top: 20px;}
.wrap-mobile-nav{display: none;}
.no-pseudo::before,.no-pseudo::after{content:none;}
.header-container ul{display: flex;}
.header-container li a{color:white;display:block;padding:5px 20px 10px;}
.header-container li a:hover{color:#363b44;}

.first-view{background-size: cover;background-repeat: no-repeat;background-position: center;height: 300px;display: flex;justify-content: center;align-items: center;position: relative;}
.first-view.top{background-image: url(../img/img-firstview01.png)}
.first-view.about{background-image: url(../img/img-firstview02.png)}
.first-view.store{background-image: url(../img/img-firstview03.png)}
.first-view.recruit{background-image: url(../img/recruit/img-firstview04.png)}
.first-view.sales{background-image: url(../img/recruit/img-firstview05.png)}
.first-view.develop{background-image: url(../img/recruit/img-firstview06.png)}
.first-view.management{background-image: url(../img/recruit/img-firstview07.png)}
.first-view.partstaff{background-image: url(../img/recruit/img-firstview08.png)}
.first-view.servicemain{background-image: url(../img/img-firstview09.png)}
.first-view div{text-align: center;}
.first-view h1{font-size: 38px;font-weight: 700;color:white;}
.first-view p{font-size:28px;margin: 0;font-weight: 500;color:white;}


/*------------------------------------------
index.html
------------------------------------------*/
/*common*/
section{margin-top: 100px;}
.section-tit{font-weight: bold;font-size:28px;text-align: center;margin-bottom: 10px;}
.section-lead{text-align: center;margin-bottom: 30px;}
.more{font-size:15px;display: inline-block;padding:5px 30px 5px 15px;border-radius: 5px;color:#fff;background:#85d0da url(../img/icon-next.svg) no-repeat right 10px top 50%;background-size:10px;position: absolute;bottom:0;left:calc(50% - 68px);}
.more.purple{background-color:#ab83c9}
.more.pink{background-color:#f99ba6}
.more.yellow{background-color:#efdd77}
.more.orange{background-color:#f97f68}
/*slick*/
.slide{position: relative;}
.slide .wrap-link{position: absolute;top:0;left:0;bottom:0;right:0;margin:auto;width: 100%;height: 100%;}
.slick-dots{bottom:-45px;}
.slick-prev,.slick-next{width: 50px;height: 50px}
.slick-prev{left:-7%;}
.slick-prev:before{opacity: 1;content:'';display:block;background:#f97f68 url(../img/icon-prev.svg) no-repeat left 45% top 50%;background-size:15px;width: 50px;height: 50px;border-radius: 50%;}
.slick-next{right:-7%;}
.slick-next:before{opacity: 1;content:'';display:block;background:#f97f68 url(../img/icon-next.svg) no-repeat right 45% top 50%;background-size:15px;width: 50px;height: 50px;border-radius: 50%;}
.slick-service .slide{padding:0 10px 0px;position: relative;min-height: 370px;}
.slick-service h3{font-weight: bold;font-size: 22px;margin:10px 0 5px;}
.slick-service .slide img{width: auto;height: 165px;display: block;margin:auto;}
.slick-service .slide p{margin-bottom: 0;}
/*実績について*/
.slick-archive .slide{min-height: auto;text-align: center;padding:0 10px;}
.slick-archive .slide h3{margin-top: 15px;}
.slick-archive .more{position: relative;margin:auto;left:auto;bottom:auto;margin-top: 15px;}
/*採用について*/
.recruit-firstview{width: 1120px;display: block;margin:0 auto;}
.recruit h2{font-size:30px;border-bottom:solid 2px #8f9192;padding:0 0 15px 0px;margin-bottom: 15px;line-height: 1;}
.recruit .inner{padding-left: 20px;}
.recruit .more{font-size:1em;position: relative;left:auto;bottom:auto;background: white;color:#8f9192;border:solid 3px #f97f68;padding:8px 60px 8px 30px;position: relative;font-weight: 500;}
.recruit .more::after{position: absolute;right: 25px;top: 20%;content: '';display: block;background: #f97f68 url(../img/icon-next.svg) no-repeat left 55% top 50%;background-size: 8px;width: 25px;height: 25px;border-radius: 50%;}


/*------------------------------------------
about.html
------------------------------------------*/
table,tbody{width: 100%;margin-bottom: 40px;}
tr{border-bottom:solid 2px #e2e4e4;}
th{width: 30%;padding:10px 0;}
td{width: 70%;padding:10px 0;}
.map{padding:0 20px;}
.map h2{margin-bottom: 10px;font-size:20px;}
.map iframe{width: 100%;height: 340px;}


/*------------------------------------------
store.html
------------------------------------------*/
#store h2{margin-bottom: 20px;}
#store img{margin-bottom: 20px;}
.info p{margin-bottom: 5px;}


/*------------------------------------------
recruit.html
------------------------------------------*/
.recruit-mtg{margin: 50px auto 0;max-width: 720px;}
main h2{margin-top: 40px;}
.list-left{padding-right: 10px;margin-bottom: 20px;text-align: center;}
.list-right{padding-left: 10px;margin-bottom: 20px;text-align: center;}
.type-btn{border-radius: 5px;border:solid 3px #f97f67;padding:15px 0 20px;position: relative;margin:0 10px;}
.type-btn .btn-wrap{position: absolute;width: 100%;height: 100%;top:0;left:0;bottom:0;right:0;margin:auto;margin:auto;display: block;}
.type-btn .tit{margin-bottom: 5px;font-weight: bold;font-size:1.1em;position: relative;display: inline-block;}
.type-btn .tit::after{position: absolute;right: -40px;top: 10%;content: '';display: block;background: #f97f68 url(../img/icon-next.svg) no-repeat left 55% top 50%;background-size: 8px;width: 25px;height: 25px;border-radius: 50%;}
.type-btn .lead{font-size:0.8em;text-align: center;margin-bottom: 0px;}
.omoi {overflow: hidden;}
.omoi .mita,.omoi a{float:left;}
.omoi small{display: block;margin-bottom: 5px;}
.part{border:solid 3px #85d0da;}
.type-btn.part .tit::after{background-color: #85d0da;}
.thumb{padding-right: 20px;}
.thumb.right{padding-left: 20px;}
.thumb p{font-weight: bold;font-size:20px;text-align: center;}
.employment{display: flex;justify-content: space-between;}
.flow{background: #c2dfe4;width: 100%;text-align: center;padding:20px 0;position: relative;z-index: 1;}
.flow img{max-width: 45%;}
.flow:nth-child(1) img{max-width: 35%;}
.flow:nth-child(2) img{max-width: 30%;}
.flow:nth-child(4) img{max-width: 35%;}
.flow p{color:white;font-weight: bold;font-size:24px;}
.flow p:first-child{font-size:17px;margin-bottom: 0px;}
.flow span{z-index: 10;position: absolute;top:calc(50% - 20px);left:0px;content:"";width: 0;height: 0;border-left: 30px solid black;border-top: 30px solid transparent;border-bottom: 30px solid transparent;}
.employment .flow:nth-child(2) span{border-left-color: #c2dfe4}
.employment .flow:nth-child(3) span{border-left-color: #aad7dd}
.employment .flow:nth-child(4) span{border-left-color: #96d5dd}
.employment .flow:nth-child(5) span{border-left-color: #7bd4df}
.employment .flow:nth-child(1){background: #c2dfe4}
.employment .flow:nth-child(2){background: #aad7dd}
.employment .flow:nth-child(3){background: #96d5dd}
.employment .flow:nth-child(4){background: #7bd4df}
.employment .flow:nth-child(5){background: #63d0df}
.feature{overflow:hidden;}
.point{text-align: center;width: 25%;float:left;}
.point p{font-weight: bold;font-size:17px;margin-top: 10px;}
.point img{max-width: 84px;}
img.point5{width: 30%;}
.btn-tit{text-align: center;font-size: 24px;margin: 100px 0 40px;}
.bussiness__ttl{text-align: center;}
.bussiness__ttl span{font-size: 3.2rem;font-style: italic;margin-right: 8px;color:#85d0da;}
.bussiness__des{margin-top: 24px;padding: 0 8px}
.graph{max-width:640px;margin:auto;}
.graph img{border:solid 3px #edeeee;}
.graph + *{margin-top: 24px;}
.bnr-career-step{max-width: 480px;margin:40px auto;}
.career-hero{margin-top: 100px;}
.career-hero .pc{display: block;}
.career-hero .sp{display: none;}
@media (max-width: 768px){
  .career-hero .pc{display: none;}
  .career-hero .sp{display: block;}  
}
.case{border:solid 2px #ddd;padding: 30px;margin-top: 40px;}
.case dt{font-size: 1.4rem;width: auto;position: relative;width: 15%;}
.case dt::before{content: "";background-color:#85d0da;position: absolute;left: -22px;width: 10px;height: 2px;top: 10px;}
.case dd{font-size: 1.4rem;}
.case dl{padding-left: 20px;margin-left: 10px;border-left:solid 2px #85d0da;}
.case dl > div{display: flex;padding: 8px 0;}
.case .position{width: 100%;display: block;position: relative;}
.case .position{margin-top: 16px;color: #85d0da;}
.case .position::before{content: "";border-radius: 50%;background:#85d0da url(../img/icon-check.svg) no-repeat center center / 14px;border:solid 2px #85d0da;position: absolute;left: -33px;width: 24px;height: 24px;}

/*sales.html*/
main li{position: relative;padding:5px 0 5px 10px;}
main li::after{content:"";width: 5px;height: 5px;background: #f97f67;position: absolute;left:0px;top:calc(50% - 2.5px);border-radius: 50%;}
.flow-week{width: 80%;display: block;margin:auto;}

/*------------------------------------------
service.html
------------------------------------------*/
#section-service .container{margin-bottom: 50px;}
.service-wrap{display: flex;}
.service-wrap .img{text-align: center;}
.service{width: 400px;padding-right:50px;}
.service img{width: auto;height:161px;}
.service h2{font-size:24px;text-align: center;line-height: 1;margin:10px 0;}
.service .mail{position: relative;top:0;left:0;font-weight: 600;}
.btn-border{border-top:solid 1px #ccc;padding-top: 20px;}
.points{width: 660px;}
.points h3{font-size:24px;text-align: center;margin:10px 0;}
.points img{width: auto;height:160px;}
.points div{width: 50%;float:left;padding:0 10px;margin-bottom: 40px;min-height: 315px;}

/*------------------------------------------
footer
------------------------------------------*/
.copyright{text-align: center;font-size:12px;margin-top: 50px;}
footer{margin-top: 150px;background: #edeeee;padding:50px 0 30px;}
footer .site-logo{margin-bottom: 10px}
.address{font-size:14px;}
footer nav{display: flex;justify-content: space-between;}
footer nav ul li{font-size:14px;}
footer nav ul li:first-child{font-weight: bold;font-size:18px;margin-bottom: 5px;}


/*------------------------------------------
ブラウザサイズ毎のCSS
------------------------------------------*/
@media screen and (max-width:980px){
  .container{padding:0 10px;}
  #section-service {margin-top: 0;}
  #section-service .container{margin-bottom: 0px;padding-top: 50px;}
  .points div{min-height: 295px;}
  .header-container{padding:0 10px;}
  .slick-prev{left: -9%;}
	.slick-dotted.slick-slider {width: 85%;margin:0 auto 30px;}
  .service-wrap{display: block;}
}
@media screen and (max-width:768px){
  .recruit-firstview{margin-top: 80px;}
  .wrap-mobile-nav{position: fixed;top:0;left:0;width: 100%;display: block}
  .sticky-nav{display: flex;justify-content: space-between;padding:10px;transition:all .3s;}
  .sticky-nav .site-logo{margin:0;width: 155px;}
  .sticky-nav .icon{width: 30px;height: 30px;}
	.header-container.pc{display: none;}
  .site-logo{margin:auto;width: 180px;}
  .header-container.mobile{display: none;flex-direction: column;text-align: center;background: #edeeee;padding:0px 0 10px;margin-top: 0;position: relative;z-index: 2;}
  .header-container.mobile{transform: translate(0, 30px);transition: all 0.2s ease-in-out 0s;opacity: 0;}
  .header-container.mobile.active{transform: translate(0, 0px);opacity: 1;}
  .header-container ul{flex-direction: column;margin-top: 0px;}
  .header-container ul li a{color:#8f9192;font-size:18px;padding:5px 0 0;}
  .header-container ul li:first-child{font-weight: bold;color:#f97f67;}
  .header-container ul li:first-child a{color:#f97f67;font-size:20px;}
  .first-view{padding:10px;height: 250px;}
  .first-view h1{font-size:28px;}
  .first-view p{font-size:16px;}
  section{margin-top: 50px;}
  .section-lead{margin-bottom: 10px;}
  .slick-dotted.slick-slider{width: 75%;}
  .slick-next:before{width: 30px;height: 30px;background-size: 10px;}
  .slick-prev:before{width: 30px;height: 30px;background-size: 10px;}
  .slick-next{right: -15%;width: 30px;height: 30px;}
  .slick-prev{left: -15%;width: 30px;height: 30px;}
  .slick-service .slide{padding:0 0px;min-height: auto;}
  .more{position: relative;margin-top: 10px;}
  .slick-dots{bottom:-40px;}
  .slick-dots li{margin:0;}
  .slick-archive .slide{padding:0;}
  .recruit .inner{padding:0;}
  .recruit h2{margin:10px 0;font-size: 28px;padding-bottom: 10px;}
  .recruit .more{display: block;width: 180px;margin: auto;padding:8px 40px 8px 30px;}
  .recruit .more::after{top:22%;right:15px;}
  footer{margin-top: 60px;}
  .address{text-align: center;}
  .copyright{font-size:10px;margin-top: 20px;}

  /*about.html*/
  th,td{font-size:14px;}
  .map{padding:0;}
  .map iframe{height: 300px;}

  /*recruit.html*/
  .list-left,.list-right{padding:0;}
  .type-btn .tit{font-size: 17px;}
  .type-btn .tit::after{background-size: 6px;width: 20px;height: 20px;right:-35px;top:16%}
  .type-btn .lead{font-size: 12px;}
  .thumb,.thumb.right{padding:0;text-align: center;}
  .thumb img{width: 60%;}
  .omoi .mita{max-width: 35%;}
  .omoi a{width: 65%;}
  .flow{padding:10px 0;width: 20%;}
  .flow p{margin-bottom: 10px;font-size: 12px;}
  .flow p:first-child{font-size: 12px;}
  .flow img{width: 45%;}
  .flow span {top: calc(50% - 10px);border-left: 10px solid black;border-top: 10px solid transparent;border-bottom: 10px solid transparent;}
  .employment .flow:nth-child(2) img{width: 35%;}
  .career-hero{margin-top: 40px;}
  .case{padding: 0 16px;}
  .case dl > div{display: block;width;}
  .case dt{width: auto;}
  /*.flow span{top:0;left:calc(50% - 30px);border-top: 20px solid black;border-right: 30px solid transparent;border-left: 30px solid transparent;}
  .employment .flow:nth-child(2) span{border-left-color:transparent;border-top-color:#c2dfe4;}
  .employment .flow:nth-child(3) span{border-left-color:transparent;border-top-color:#aad7dd}
  .employment .flow:nth-child(4) span{border-left-color:transparent;border-top-color:#96d5dd}
  .employment .flow:nth-child(5) span{border-left-color:transparent;border-top-color:#7bd4df}
  */
  .point img{width: 40%;}
  .btn-tit{margin:50px 0 20px;}

  .flow-week{width: 100%;}

  .service{padding-right:0;width:100%;margin-bottom: 50px;}
  .service img{width: auto;height:180px;}
  .points{width: 100%;}
  .points p{margin-bottom: 0;}
  .points div{padding:0 5px;margin-bottom: 20px;}
  .points h3{font-size:17px;}
  .btn-border {
    text-align: center;
    padding-top: 10px;
  }

}

@media screen and (max-width:480px){
  .point{
    text-align: center;width: 50%;float:left;
  }
}