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

body{
  min-width: 1350px;
}
/*---------------------
hero
----------------------*/
.hero{
  position: relative;
  width: 100%;
}
.hero video {
	width:100%;
	height:100vh;
	object-fit:cover;
}
/*動画差し込んだら不要［仮のメインビュー画像］*/
.hero img.pc {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

/*---------------------
ビデオボタン
---------------------*/  

.play_bt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  color: #FFF;
  border: 1px solid #fff;
}
.play_bt a {
  display: block;
  color: #FFF;
  padding: 10px 15px;
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}


/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}



/*---------------------
top__company内
---------------------*/

.company_box{
  position: relative;
  height: 683px;
  width: 100%;
  overflow: hidden;
}
.company_box .up_img{
  position: absolute;
  top:155px;
  left:50%;
  transform: translate(-50%);
  width: 780px;
}
.company_box img.side_box{
  position: absolute;
  top:73px;
  left:0;
  width: 100px;
}

/*スライド背景*/
.wrapper{
  overflow: hidden;
  width: 100%;
  margin-top: 107px;
}
/*右から左周り*/
.slider {
  display: flex;
  width: 13776px;
}
.slider__inner{
  display: flex;
}
/*スライド*/
.slider__inner:first-child {
  animation: loop 270s linear infinite;
}
 
.slider__inner:nth-child(2) {
  animation: loop2 270s -180s linear infinite;
}
 
.slider__inner:last-child {
  animation: loop3 270s -90s linear infinite;
}
 
 
@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}
  
@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}

/*スライド右から左周り*/
.reverse {
  display: flex;
  width: 13776px;
}
.reverse__inner{
  display: flex;
}
.reverse__inner:first-child {
  animation: loop4 270s linear infinite;
}
 
.reverse__inner:nth-child(2) {
  animation: loop5 270s -180s linear infinite;
}
 
.reverse__inner:last-child {
  animation: loop6 270s -90s linear infinite;
}
 
@keyframes loop4 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}
 
@keyframes loop5 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(100%);
  }
}
 
@keyframes loop6 {
  0% {
    transform: translateX(-300%);
  }
  to {
    transform: translateX(0%);
  }
}


.top__company .txt_inner{
  position: relative;
  height: 1854px;
}
.top__company .txt_box{
  position: absolute;
  top:573px;
  left:50px;
  background: #F8F8F8;
  width: 770px;
  padding: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
.com_img01{
  position: absolute;
  top: 0;
  left:0;
  height: 858px;
  width: 100%;
  object-fit: cover;
}
.com_img02{
  position: absolute;
  top: 1352px;
  left:50%;
  transform: translate(-50%);
  width: 780px;
}
.top__company .side_box{
  position: absolute;
  top: 1069px;
  right:0;
  width: 100px;
}

.slider__item img,
.reverse__item img{
  height: 176px;
}




/*---------------------
top__service内
---------------------*/
.top__service{
  position: relative;
  height: 2312px;
}

.top__service img.img04{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 858px;
  object-fit: cover;
}
.top__service .txt_inner {
  position: relative;
}
.top__service .service_box .txt_box{
  position: absolute;
  top:539px;
  right:0;
  background: #F8F8F8;
  width: 770px;
  padding: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
.top__service .service_box .side_box{
  position: absolute;
  top:1007px;
  left:0;
  height: 522px;
}
.top__service .img05{
  width: 441px;
  position: absolute;
  top:1506px;
  left:0;
}
.top__service .img06{
  width: 381px;
  position: absolute;
  top:1488px;
  left:500px;
}
.top__service .img07{
  width: 375px;
  position: absolute;
  top:1587px;
  left:916px;
}
.top__service .img08{
  width: 548px;
  position: absolute;
  top:1880px;
  left:643px;
}




/*---------------------
top__recruit内
---------------------*/
.top__recruit{
  background: #F8F8F8;
  text-align: center;
  padding: 100px 0;
}
.top__recruit .section_sabtitle::after {
  content: '';
  width: 114px;
  height: 1px;
  display: inline-block;
  background-color: #333333;
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translate(-50%)
}







/*---------------------
sp
---------------------*/
@media(max-width: 768px) {
  
  
/*---------------------
hero
----------------------*/
.hero img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}  

/*---------------------
section共通
----------------------*/
body .btn02 {
  display: block;
  margin: auto;
}
section .under_txt {
  letter-spacing: 0.1em;
  line-height: 2;
}
/*---------------------
top__company内
---------------------*/ 
.company_box {
    position: relative;
    height: 342px;
}
.company_box .up_img {
    position: absolute;
    top: 73px;
    left: 52%;
    transform: translate(-50%);
    width: 355px;
}
  .company_box img.side_box {
    position: absolute;
    top: 36px;
    left: 0;
    width: 30px;
}  
.company_box .wrapper {
    margin-top: 73px;
}

.top__company .txt_inner {
    position: relative;
    height: 1140px;
}
.top__company .txt_box {
    position: absolute;
    top: 184px;
    left: 0;
    background: #F8F8F8;
    width: 355px;
    height: 581px;
    padding: 30px 4%;
    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
}
.top__company .com_img02 {
    position: absolute;
    top: 874px;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}
.top__company .side_box {
    position: absolute;
    top: 805px;
    right: 0;
    width: 30px;
}
.top__company .com_img02 {
    position: absolute;
    top: 874px;
    left: 48%;
    transform: translate(-50%);
    width: 335px;
}
.slider__item img,
.reverse__item img{
  height: 102px;
  }

/*---------------------
top__service内
---------------------*/
  

.top__service {
  position: relative;
  height: 1866px;
}
.top__service img.img04 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 223px;
  object-fit: cover;
}
.top__service .service_box .txt_box {
  position: absolute;
  top: 184px;
  right: 0;
  background: #F8F8F8;
  width: 355px;
  height: 525px;
  padding: 35px 5%;
  box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
}
.top__service .service_box .side_box {
  position: absolute;
  top: 749px;
  left: 0;
  height: 295px;
}
.top__service .img05 {
  width: 65%;
  position: absolute;
  top: 762px;
  left: 20%;
}
.top__service .img05 img{
  height: 336px;
  width: 100%;
  object-fit: cover;
  object-position: 0 20%;
}
.top__service .play_bt {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: #FFF;
  border: 1px solid #fff;
  width: 143px;
}
.top__service .img06 {
  width: 69%;
  height: 166px;
  object-fit: cover;
  position: absolute;
  top: 1141px;
  right: 0;
  left: auto;
  object-position: 0 20%;
}
.top__service .img07 {
  width: 69%;
  height: 166px;
  object-fit: cover;
  position: absolute;
  top: 1347px;
  left: 0;
  object-position: 0 20%;
}
.top__service .img08 {
  width: 100%;
  height: 250px;
  object-fit: cover;
  position: absolute;
  top: 1554px;
  left: 0;
  object-position: 0 20%;
}  



  
  
  
  
  
  
  
}