@media screen and (max-width: 575px) {

:root {

    --font-size-m: 16px;
    --font-size-l: 30px;
    --font-size-s: 14px;

    --font-size-l1: 24px;
    --font-size-l2: 85px;
    --font-size-l3: 35px;
    --font-size-l4: 40px;

    --font-size-title: 16px;
    --font-size-subtitle: 22px;
    --font-size-strong: 18px;
    --font-size-form: 20px;
    --font-size-docment: 16px;


    
}



/* common
===================================*/
html {
    min-width:auto;

}

main {
    padding-top:30px;

}

.pcOnly {
    display:none;
}
.spOnly {
    display: block;
}

.wrapperA {
    margin:0 30px 50px;
    width:auto;
}

.paddingA {
    padding: 60px 0 40px;
}
.tableStyleA {
    display: block;
}
.tableStyleA th {
    border-bottom:none;
    
    padding:1.6em 0 0.5em;
    display: block;
    width: auto;

}
.tableStyleA td {
    display: block;

    font-weight: var(--font-weight-Regular);
    padding:0 0 1em 0;
    width: auto;

}

.imgWidthHalf{
    width:100%;
}

.pageInLink .separatorA {
    margin:0;
}

.formStyleA {
  padding:0 0;
}


/* navi
===================================*/

header {

    padding: 15px 20px;
}

header #siteLogo {
    width:180px;
    z-index: 11;

}
header nav {
   
    position: absolute;
    top:0;
    left:0;
    
    
    z-index: 10;
}
header nav ul {
    display: block;
    position: fixed;
    visibility: hidden;
    pointer-events: inherit;
    height:100vh;
    width:100vw;
    background-color: var(--color-bg);
    gap:0;
    font-size: var(--font-size-m);
    flex-wrap: wrap;
    padding:80px 40px;
   
   
    transition: all .8s ease-in-out;
    clip-path: circle(0px at 95% 0);
}
header nav ul li {
    width:100%;
    height:auto;
    font-size:var(--font-size-title);

}

header nav ul li.child {
    width:100%;
    font-size:var(--font-size-m);
}

header nav ul li.child a {
    padding-left:4em;
    position: relative;
}

header nav ul li.child a::after {
    content:'';
    display: block;
    position: absolute;
    width:20px;
    height:1px;
    background-color: var(--color-sub2);
    top:50%;
    left:2em;
}

header nav ul li.btn {
    width:auto !important;
    margin:0 0;
}
header nav ul li.btn a,
header nav ul li.btn a:hover
 {
    padding:1em 3em;
    margin-top:1em;
    display: inline-block;
    transform: translateX(1em);

    
}

header nav ul li a {
    display: block;
    white-space: nowrap;
    padding:1.5em 0;
    border-bottom:1px solid var(--color-sub2);
    padding-left:2em;

}
header nav ul li a:hover {
    transform: translateX(1em);
}
header nav ul li a:before {
    content:none;
}


.navActive nav ul {
    visibility: visible;
    clip-path: circle(150vh at 100% 0);
    
   
   

}


.navActive #spNav > * {
    display:none;
}

.navActive #spNav > .spNavBtn {
    display:block;
}
.navActive #spNav > .spNavBtn .text::before {
    content:"CLOSE";
}



#spNav {
    z-index: 12;

    display: flex;
    align-items: center;
    gap:0 23px;
    color:var(--color-main1);
}


#spNav .spNavBtn {
    font-family: var(--font-sub);
    font-weight: var(--font-weight-Regular);
    font-size:var(--font-size-s);
    width:40px;
}
#spNav > * {
    width:50px;
    height:50px;

}
#spNav .spNavBtn .text {
    display: block;
    text-align: center;
    line-height: 1.0;
    
}
#spNav .spNavBtn .text::before {

content:"MENU";
}


.flex {
    flex-wrap: wrap;
}

.flex > * {
    width:100% !important;
}



/* top
===================================*/
#secFv {

}

#secFv .copy {
    top:20vw;
    left:0%;

}

#secFv .slider li img:first-child {
}



#secFv #btn {
    position:absolute;
    bottom:-150px;
    left:50%;
    transform: translateX(-50%);
    z-index: 10;

}

#secFv #btn {
    width:320px;

}

.slick-dots {
    
}


#secService {
    margin-top:150px;
    position: relative;
}

#secService .flex {
    display: block;
    position: relative;
}
#secService .text {
    width:100%;
    z-index: 10;
    margin-bottom:50vw;
}
#secService .img {
    position: absolute;
    left:0;
    bottom:-40vw;
    width:calc(100vw - 30px) !important;
    overflow-x: hidden;
}

#secService .img img {
   position: relative;
    top:inherit;
    left:0;
    bottom:0;
    

}
#secService02 #serviceList {
    display: flex;
    gap:20px;
}

#secService02 #serviceList li {
    width:100%;
    padding:1.5em 0 1em 1.5em;
    display: flex;
    gap:10px;

    
}
#secService02 #serviceList li > * {
    width:60%;
    
}

#secService02 #serviceList li > img {
    width:40%;
    
}

#secRecruit #secRecruit02 {
    gap:0px;
}

#secRecruit {
    background-position: 75% 0;
    padding-bottom:1px;
}

#secRecruit #secRecruit02 a{
    margin-top:2em;


}



#secInterview #secInterview01 {
    flex-wrap: nowrap;
}
#secWorks #secWorksSlider li > a {
  padding:1em;
}
#secWorks #secWorksSlider li > a img {
    width:100%;
}

#secWorks #secWorksSlider .slick-prev {
    top:-40px;
    right:100px;

}

#secWorks #secWorksSlider .slick-next {
    top:-40px;

    right:40px;
}

#secWorks #secWorksSlider .slick-track {
  display: flex;
  align-items: stretch;
}
#secWorks #secWorksSlider .slick-slide {
  height: auto !important;
}

#secWorks #secWorksSlider .slick-slide a {
  height: 100% !important;
}

/* service
===================================*/
#serviceSec01 .img {
    width: auto;
}
#serviceSec01 .iso {
    flex-wrap: nowrap;
    gap: 1em;
    align-items: flex-start;
}

#serviceSec01 .iso img {
    width: 40% !important;
}

#serviceSec02_flowSlider .slick-track {
    display: flex;
  }
#serviceSec02_flowSlider .slick-slide {
    height: auto !important;
  }
#serviceSec02_flowSlider .slick-track li {
    width: 200px;
    margin-right: 2px;
    background-color: var(--color-white);
    padding: 1em 1.5em 2em;
}

#serviceSec02_flowSlider .slick-prev {
    top:-40px;
    right:100px;
}

#serviceSec02_flowSlider .slick-next {
    top:-40px;
    right:40px;
}
.serviceSec03_detail .serviceSec03_detailList {
    padding-left: 0em;
    margin-top: 2em;
}

.serviceSec03_detail .serviceSec03_detailList .imgList img {
    width: calc(50% - 1px) !important;

}

/* company
===================================*/
#companySec03_flexTable {
    flex-wrap: nowrap;
    gap:2em;
}

/* recruit
===================================*/
#recruitSec01  {
    padding-bottom:0px;
}

#recruitSec01 .text {
    min-width: auto;
    width: auto;
    z-index: 2;

}

#recruitSec01 .img {
    display: block;
    transform: translateX(30px);
    margin-right:0;
    margin-top:-50vw;
    z-index: 1;
    padding-left:30%;

}
#recruitSec01 .img img {
}

#recruitSec02 .list {
}

#recruitSec02 .list a {
    width:calc(50% - 10px) !important;
}

#recruitSec03 {
    padding-top:0;
    padding-bottom:0;
}
#recruitSec03 > div {
    gap: 20px;
    padding-top:0;
}

#recruitSec03 .modelcase {
    margin: 0 0 2em 0;
    border: 6px solid var(--color-sub2);
    padding: 2em;
    width: auto;
}
#recruitSec03 .modelcase .name {
    flex-wrap: nowrap;
    gap:0 1em;
    justify-content: flex-start;
}
#recruitSec03 .modelcase .name img {
    width: 30% !important;

}

.btnRecruit01 {
    padding:2em;
    border:4px solid var(--color-main3);
    background-color: var(--color-main1) !important;
    background-size: 50%;
    background-position: right top;

}

.interviewLayoutA .head {
    margin-top: 60px;
    padding-bottom: 80px;
}
.interviewLayoutA .faq {
    margin-top: -200px;
}
/* footer
===================================*/
footer {
 padding:20px 0 1px;
}

footer #footerLogo {
    width:200px;
}
footer #footerNav {
    flex-wrap: wrap;
    gap:0 3em;
    padding-top:1em;
    padding-right:50vw;
}

footer #footerNav a {
    margin:1em 0 1em;
    display: inline-block;
    width: auto !important;

}

/* blog
===================================*/
.categoryLink .cat-list {
    flex-wrap: wrap;
    
}

.categoryLink .cat-list a {
    display: inline-block;
    padding:0.4em 1em;
    border:1px solid var(--color-main1);
    border-radius: 100px;;
}

#introductionSec01 ul {
    gap:50px 20px;

}
#introductionSec01 ul li {
    width:calc(50% - 10px) !important;
}

#introductionSec01 ul li > a {
    padding: 0;
}

#newsSec01 ul {
    gap:50px 20px;

}
#newsSec01 ul li {
    width:calc(50% - 10px) !important;
}

#newsSec01 ul li > a {
    padding: 0;
}


.pagination ul {
   
}

.pagination .show-prev a {
    height: 70px;
    width: 70px;
}
.pagination .show-next a {
    height: 70px;
    width: 70px;
}
.pagination li li {
    padding: 0 0.4em;
}
.pagination li li a{
    display: block;
    padding: 0;
}



}


/*=============================
#humberger
=============================*/
.btn-trigger {
    position: relative;
    width: 40px;
    height: 29px;
    cursor: pointer;
    padding-top:2px;
    
  }
  .btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--color-main1);
    border-radius: 2px;
  }
  .btn-trigger, .btn-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
  }
  .btn-trigger span:nth-of-type(1) {
    top: 0;
  }
  .btn-trigger span:nth-of-type(2) {
    top: 12px;
  }
  .btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }

#humberger span:nth-of-type(1) {
    -webkit-animation: humberger-bar01 .75s forwards;
    animation: humberger-bar01 .75s forwards;
  }
  @-webkit-keyframes humberger-bar01 {
    0% {
      -webkit-transform: translateY(16px) rotate(45deg);
    }
    50% {
      -webkit-transform: translateY(16px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes humberger-bar01 {
    0% {
      transform: translateY(16px) rotate(45deg);
    }
    50% {
      transform: translateY(16px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  #humberger span:nth-of-type(2) {
    transition: all .25s .25s;
    opacity: 1;
  }
  #humberger span:nth-of-type(3) {
    -webkit-animation: humberger-bar03 .75s forwards;
    animation: humberger-bar03 .75s forwards;
  }
  @-webkit-keyframes humberger-bar03 {
    0% {
      -webkit-transform: translateY(-12px) rotate(-45deg);
    }
    50% {
      -webkit-transform: translateY(-12px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes humberger-bar03 {
    0% {
      transform: translateY(-12px) rotate(-45deg);
    }
    50% {
      transform: translateY(-12px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  #humberger.active span:nth-of-type(1) {
    -webkit-animation: active-humberger-bar01 .75s forwards;
    animation: active-humberger-bar01 .75s forwards;
  }
  @-webkit-keyframes active-humberger-bar01 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(12px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(12px) rotate(45deg);
    }
  }
  @keyframes active-humberger-bar01 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(12px) rotate(0);
    }
    100% {
      transform: translateY(12px) rotate(45deg);
    }
  }
  #humberger.active span:nth-of-type(2) {
    opacity: 0;
  }
  #humberger.active span:nth-of-type(3) {
    -webkit-animation: active-humberger-bar03 .75s forwards;
    animation: active-humberger-bar03 .75s forwards;
  }
  @-webkit-keyframes active-humberger-bar03 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(-12px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(-12px) rotate(-45deg);
    }
  }
  @keyframes active-humberger-bar03 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(-12px) rotate(0);
    }
    100% {
      transform: translateY(-12px) rotate(-45deg);
    }
  }