/* screens smaller than 1366---------------------------------------------------------- */
@media only screen and (max-width:1365px) {

  /*company*/
  /*------------------------------------------------------------------------------*/
  .company_box01 .vehicle01 {
    left: auto;
    right: -21vw;
    width: clamp(140px, 107.847px + 10.048vw, 245px);
  }

  .company_box01 .vehicle02 {
    left: auto;
    right: -37vw;
    width: clamp(100px, 89.895px + 3.158vw, 133px);
  }

  .company_box01 .vehicle03 {
    left: auto;
    right: -30vw;
    width: clamp(160px, 126.316px + 10.526vw, 270px);
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/
/* screens smaller than 1341---------------------------------------------------- */
@media only screen and (max-width:1340px) {

  /*page_title*/
  /*------------------------------------------------------------------------------*/
  #page_title {
    width: calc(100% - 56px);
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/

/* screens smaller than 1100---------------------------------------------------- */
@media only screen and (max-width:1099px) {

  /*------------------------------------------------------------------------------*/
  /* screens smaller than 1100---------------------------------------------------------- */
  .inner02 {
    width: 92%;
  }

  /*recruitment*/
  /*------------------------------------------------------------------------------*/
  #page_title_recruitment .txt_box {
    width: 51%;
  }

  #page_title_recruitment #pan {
    margin-bottom: clamp(30px, 21.795px + 2.564vw, 50px);
  }

  #page_title_recruitment .img_box {
    width: 48%;
    display: flex;
    align-items: center;
  }

  .recruitment_box02 .right_box .in {
    width: 33vw;
    height: 33vw;
  }

  .recruitment_box02 .right_box .in_txt {
    width: 33vw;
    font-size: clamp(19px, -11.202px + 3.927vw, 32px);
  }

  .recruitment_box05 .box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .recruitment_box05 .txt_box {
    width: 66%;
  }

  .recruitment_box05 .img_box {
    width: 30%;
    margin-bottom: 0;
  }

  /*recruitment_about*/
  /*------------------------------------------------------------------------------*/
  .recruitment_list {
    padding: clamp(70px, 41.429px + 7.143vw, 120px) 0 clamp(50px, 32.857px + 4.286vw, 80px);
    margin-bottom: clamp(40px, 20.000px + 5vw, 70px);
  }

  .recruitment_list_item {
    gap: 2.72vw;
    padding: clamp(50px, 32.857px + 4.286vw, 80px) clamp(5px, 2.143px + 0.714vw, 10px) clamp(50px, 32.857px + 4.286vw, 80px) clamp(20px, 8.571px + 2.857vw, 40px);
  }

  .recruitment_related {
    padding: clamp(65px, 36.429px + 7.143vw, 115px) 0 clamp(90px, 44.286px + 11.429vw, 170px);
  }

  .recruitment_related .title01 {
    margin-bottom: clamp(30px, 18.571px + 2.857vw, 50px);
  }

  .related_item {
    gap: 1.82vw;
  }

  .related_item .box {
    width: 17.18vw;
    height: 19.91vw;
    flex: 0 0 auto;
  }


  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/
/* screens smaller than 1000---------------------------------------------------------- */
@media only screen and (max-width:999px) {

  /*page_title*/
  /*------------------------------------------------------------------------------*/
  #page_title {
    width: 95%;
    padding: 0;
  }

  /*pan*/
  /*------------------------------------------------------------------------------*/
  #pan {
    width: 92%;
    padding: 0;
  }

  /*company*/
  /*------------------------------------------------------------------------------*/
  .company_box01 .inner01 {
    flex-direction: column;
  }

  .company_box01 .inner01::before {
    width: 100%;
    height: clamp(200px, 84.667px + 28.833vw, 373px);
    background: url(../image/bg_name.png) no-repeat;
    background-size: contain;
    position: inherit;
    left: auto;
    display: block;
    margin-bottom: clamp(0px, -20.000px + 5vw, 30px);
  }

  .company_box01 .title02 {
    padding-top: 0;
  }

  .company_box01 .text_box {
    width: 100%;
  }

  .company_box01 .img_box {
    position: absolute;
    top: clamp(0px, -26.667px + 6.667vw, 40px);
    right: 0;
  }

  .company_box01 .img_box img {
    margin-top: auto;
    width: clamp(196px, 120.235px + 23.676vw, 357px);
  }

  .company_box01 .icon_area {
    padding: clamp(64px, 9.412px + 17.059vw, 180px) 0 clamp(50px, 21.765px + 8.824vw, 110px);
  }

  .company_box01 .vehicle01 {
    left: clamp(10px, -79.412px + 27.941vw, 200px);
    top: clamp(-35px, -42.059px + -2.206vw, -20px);
  }

  .company_box01 .vehicle02 {
    left: clamp(170px, 14.706px + 48.529vw, 500px);
    top: clamp(-25px, -60.294px + 11.029vw, 50px);
  }

  .company_box01 .vehicle03 {
    left: auto;
    right: 34px;
    top: auto;
    bottom: clamp(-80px, -70.588px + -2.941vw, -100px);
  }

  /*service*/
  /*------------------------------------------------------------------------------*/
  #service_box01 .inner01 {
    gap: 2.9vw;
    padding: clamp(60px, 34.667px + 6.333vw, 98px) 0;
  }

  #service_box01 .img_box img {
    margin-bottom: clamp(-110px, -76.000px + -8.5vw, -161px);
  }

  #service_box02 {
    padding-top: clamp(60px, 20.000px + 10vw, 120px);
  }

  #service_box02 .text_box {
    padding-right: 0;
    margin-bottom: 30px;
  }

  #service_box02 .seat {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
  }

  #service_box02 .seat01,
  #service_box02 .seat02,
  #service_box02 .seat03 {
    position: inherit;
    width: auto;
  }

  #service_box03 .card_box .item .sub {
    margin-left: clamp(0px, -42.353px + 13.235vw, 90px);
  }

  .service_item01_wrap {
    padding: clamp(60px, 6.667px + 13.333vw, 140px) 0 clamp(20px, 6.667px + 3.333vw, 40px);
  }

  .service_item01 {
    flex-direction: column;
    margin-bottom: clamp(50px, 16.667px + 8.333vw, 100px);
  }

  #service_box04 .service_item01 {
    padding-bottom: clamp(40px, 6.667px + 8.333vw, 90px);
  }

  .service_item01 .left_box {
    flex: 1;
    flex-direction: row;
    padding-top: 0;
    align-items: center;
  }

  .service_item01 .left_box .box {
    flex: 1;
    justify-content: flex-end;
  }

  .service_item01 .left_box .box img {
    margin-top: 0;
  }

  .service_item01 .service01 img {
    width: 18.2vw;
  }

  .service_item01 .service02 img {
    width: 26.3vw;
  }

  .service_item01 .service03 img {
    width: 27.7vw;
  }

  .service_item01 .service04 img {
    width: 22.3vw;
  }

  .service_item01 .left_box .title .font01 {
    font-size: clamp(22px, 6.667px + 3.833vw, 45px);
  }

  .service_item01 .left_box .title .sub {
    font-size: clamp(11px, 9.000px + 0.5vw, 14px);
  }

  .service_item01 .right_box {
    width: 100%;
  }

  .service_item01 .right_box .box {
    margin-bottom: clamp(30px, 18.667px + 2.833vw, 47px);
    text-align: center;
  }

  .service_item01 .right_box .title {
    font-size: clamp(20px, 12.000px + 2vw, 32px);
    line-height: clamp(30px, 10.000px + 5vw, 60px);
  }

  /*service_automotive*/
  /*------------------------------------------------------------------------------*/
  .service_item02 {
    padding-bottom: clamp(35px, 19.667px + 3.833vw, 58px);
    margin-bottom: clamp(40px, 20.000px + 5vw, 70px);
    flex-direction: column;
  }

  .service_item02 .left_box {
    max-width: auto;
    max-width: initial;
  }

  .service_item02 .left_box .subtitle {
    font-size: clamp(14px, 11.333px + 0.667vw, 18px);
  }

  .service_item02 .right_box {
    max-width: auto;
    max-width: initial;
    margin-left: 0;
    flex-direction: row;
    gap: 2%;
  }

  .service_item02 .right_box .box {
    width: 32%;
  }

  .service_item03 {
    padding: clamp(50px, 16.667px + 8.333vw, 100px) 0 clamp(60px, -33.333px + 23.333vw, 200px);
    background-size: contain;
  }

  .service_item04 {
    padding: clamp(90px, 30.000px + 15vw, 180px) 0 clamp(70px, 23.333px + 11.667vw, 140px);
    width: 92%;
  }

  .service_item04 .title01 {
    padding: 0 20px2vw;
  }

  .service_item04_in {
    gap: 6.6vw;
    padding: 0 2vw 4.4vw;
    margin-bottom: 4.8vw;
  }

  /*recruitment*/
  /*------------------------------------------------------------------------------*/
  .recruitment_box03 {
    padding-bottom: 2vw;
  }

  .recruitment_box03 .in {
    max-width: 92%;
    padding-bottom: clamp(150px, 43.529px + 17.647vw, 220px);
  }

  .recruitment_box03 .in:before {
    background-size: cover;
    width: clamp(100px, 43.529px + 17.647vw, 220px);
    height: clamp(100px, 43.529px + 17.647vw, 220px);
    left: auto;
    right: 0;
    top: -7vw;
  }

  .recruitment_box03 .in:after {
    background-size: cover;
    width: clamp(150px, 43.529px + 17.647vw, 220px);
    height: clamp(150px, 43.529px + 17.647vw, 220px);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
  }

  .recruitment_box03 .txt_icon {
    padding-bottom: clamp(180px, 70.769px + 15.385vw, 340px);
  }

  .recruitment_box03 .txt_icon:before {
    background-size: cover;
    width: clamp(150px, 43.529px + 17.647vw, 220px);
    height: clamp(150px, 43.529px + 17.647vw, 220px);
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .recruitment_box03 .txt_icon:after {
    bottom: -20px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(100px, 43.529px + 17.647vw, 220px);
    text-align: center;
    line-height: 1.2;
    font-size: clamp(8px, 7.179px + 0.256vw, 10px);
  }

  /*recruitment_about*/
  /*------------------------------------------------------------------------------*/
  .recruit_top {
    gap: 3vw;
    padding-top: clamp(70px, 16.667px + 13.333vw, 150px);
    margin-bottom: clamp(40px, 20.000px + 5vw, 70px);
  }

  .recruit_top .title02 {
    margin-top: 0;
  }

  .related_content {
    flex-direction: column;
  }

  .related_item {
    width: 100%;
    gap: 2.7vw;
    padding-right: 3vw;
  }

  .related_item .box {
    max-width: 12.89vw;
    max-height: 14.93vw;
    flex: 0 1 auto;
  }

  .related_item .text_box {
    display: flex;
  }

  .related_item .text_box .title03 {
    margin-bottom: 0;
  }

  .related_item .text_box .btn02 {
    margin-left: auto;
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/
/* screens smaller than 769---------------------------------------------------------- */
@media only screen and (max-width:768px) {

  /*pan*/
  /*------------------------------------------------------------------------------*/
  #pan {
    width: 88%;
  }

  /*company*/
  /*------------------------------------------------------------------------------*/
  .company_box02 .flex01 {
    padding: 60px clamp(20px, -23.478px + 10.87vw, 60px) 30px;
    max-width: 640px;
  }

  .company_box02 .left_box {
    width: 100%;
  }

  .company_box02 .txt {
    line-height: 1.5;
  }

  .company_box02 .right_box {
    width: 100%;
  }

  .company_box02 .right_box img {
    max-width: 360px;
    width: 100%;
  }

  .company_box02 .btn02.sp {
    margin: 30px auto 0;
  }

  .company_box03 .btn02 {
    margin-top: 22px;
    margin-left: auto;
    margin-right: auto;
  }

  .company_box03 .txt_box {
    width: 100%;
    padding-right: 0;
    margin-bottom: 30px;
  }

  .company_box03 .img_box {
    width: 100%;
  }

  /*service*/
  /*------------------------------------------------------------------------------*/
  #service_box03 .card_box {
    flex-direction: column;
  }

  #service_box03 .card_box .item {
    width: 100%;
    height: auto;
    padding: 2em 0.5em;
  }

  /*service_automotive*/
  /*------------------------------------------------------------------------------*/
  .service_item02 .right_box {
    flex-direction: column;
    gap: 20px;
  }

  .service_item02 .right_box .box {
    width: 100%;
    text-align: center;
  }

  .service_item04 .title01 {
    padding: 0;
  }

  .service_item04_in {
    padding: 0 clamp(0px, -8.571px + 2.679vw, 12px) 4.4vw;
    gap: clamp(10px, 2.857px + 2.232vw, 20px);
  }

  .service_item04_in .icon {
    width: clamp(50px, -4.348px + 13.587vw, 100px);
    flex: 0 0 auto;
  }

  .service_item04_in .btn02 a {
    width: clamp(100px, 18.478px + 20.38vw, 175px);
    height: clamp(30px, 15.714px + 4.464vw, 50px);
    font-size: clamp(10px, 7.143px + 0.893vw, 14px);
  }

  .service_item04_in .btn02 a .text::after {
    content: none;
  }

  /*recruitment*/
  /*------------------------------------------------------------------------------*/
  #page_title_recruitment {
    margin: 40px auto 50px;
  }

  #page_title_recruitment .txt_box {
    width: 100%;
    margin-bottom: clamp(30px, 21.795px + 2.564vw, 50px);
  }

  #page_title_recruitment .title01 {
    margin-bottom: 20px;
  }

  #page_title_recruitment .sub_txt {
    padding-top: 0;
  }

  #page_title_recruitment .txt01 {
    padding-bottom: 0;
  }

  #page_title_recruitment .img_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #page_title_recruitment .arrow {
    width: 25%;
  }

  #page_title_recruitment .img {
    width: 72%;
  }

  #page_title_recruitment .img img {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }

  .recruitment_box02 .left_box {
    width: 100%;
    margin-bottom: clamp(30px, 21.795px + 2.564vw, 50px);
  }

  .recruitment_box02 .right_box {
    width: 100%;
    text-align: center;
  }

  .recruitment_box02 .right_box .in {
    width: clamp(200px, 114.286px + 26.786vw, 320px);
    height: clamp(200px, 114.286px + 26.786vw, 320px);
  }

  .recruitment_box02 .right_box .in_txt {
    width: clamp(200px, 114.286px + 26.786vw, 320px);
    font-size: clamp(18px, 13.714px + 1.339vw, 24px);
  }

  .recruitment_box04 {
    padding: clamp(50px, 16.667px + 8.333vw, 100px) 0 50px;
    background-size: clamp(800px, 395.714px + 126.339vw, 1366px);
  }

  .recruitment_box04 .btn02 a {
    margin: 40px auto 0;
  }

  .recruitment_box05 .box {
    flex-direction: row-reverse;
    padding: clamp(30px, 17.692px + 3.846vw, 60px) 5%;
  }

  .recruitment_box05 .txt_box {
    width: 100%;
  }

  .recruitment_box05 .img_box {
    width: 100%;
    margin-bottom: 30px;
  }

  .voice_list a {
    width: 100%;
  }

  .recruitment_btn .box {
    width: 100%;
  }

  /*recruitment_about*/
  /*------------------------------------------------------------------------------*/
  .recruit_top {
    flex-direction: column;
  }

  .recruit_top .right_box {
    max-width: auto;
    max-width: initial;
    text-align: center;
    margin-right: auto;
  }

  .recruitment_list_item {
    flex-direction: column;
    padding: clamp(50px, 32.857px + 4.286vw, 80px) 0 clamp(50px, 32.857px + 4.286vw, 80px);
  }

  .recruitment_list_item .title02 {
    margin-top: 0;
  }

  .recruitment_list_item .right_box {
    max-width: auto;
    max-width: initial;
    width: 100%;
    flex: 1;
    text-align: center;
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------*/
/* screens smaller than 569---------------------------------------------------------- */
@media only screen and (max-width:568px) {

  /*recruitment_about*/
  /*------------------------------------------------------------------------------*/
  .related_item {
    padding-right: 5px;
  }

  .related_item .box {
    max-width: auto;
    max-width: initial;
    max-height: auto;
    max-height: initial;
    width: 120px;
    height: auto;
    flex: 1;
  }

  .related_item .text_box {
    flex-direction: column;
  }

  .related_item .text_box .title03 {
    margin-bottom: 3.52vw;
  }

  .related_item .text_box .btn02 {
    margin-left: 0;
  }

  .related_item .text_box .btn02 a {
    width: clamp(150px, 117.742px + 10.081vw, 175px);
  }

  .service_item02 .left_box .subtitle {
    font-size: clamp(6px, 10.333px + 0.667vw, 18px);
  }

  .service_item02 .left_box .subtitle {
    font-size: clamp(6px, 10.333px + 0.667vw, 18px);
  }

  .service_item02 .left_box .subtitle {
    padding: 1em 0em;
    width: 100%;
  }

  /*------------------------------------------------------------------------------*/
}

/*------------------------------------------------------------------------------*/