@charset "UTF-8";
@media  only screen and (max-width: 1100px) and (min-width: 1001px){  
  .header-logo { width: 200px;}  
  .header-nav-list{ gap: 2.0rem;}
}
@media  only screen and (max-width: 1000px){  
:root { 
  --section-inner: 70px;
  --section-inner-top: 50px;
  --section-inner2: 140px;
  --section-inner-offset: -70px;
}  
/*  header
-------------------------------------------------------  */
.header-container{
  padding-inline: 0;
}
.header-menu-button { 
  display: block;
}
.header-menu-container {
  margin: 120px 8% 60px;
  display: block;
}
.header-logo {
  margin-left: 3%;
  width: 230px;
  z-index: 3;
}
.header-nav{
  width: 100%;
}
.header-nav-list {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}
.header-nav-list .header-nav-item { 
  border-bottom: 1px solid #C4D9EA;
}
.header-nav-link {
  display: block;
  padding: 2.0rem 0;
  color: #18168D;
}
.header-nav-link:hover::before{
  right: 10px;
}
.header-nav-link:hover::after{
  right: 10px;
  width: 14px;
}
.header-nav-link:hover{
  opacity: .6;
}
.header-sub-link{
  display: block;
  margin-top: 3.0rem;
}
.header-sub-link ul{
  display: flex;
  gap: 3.0rem;
}
.header-sub .header-sub-list{
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-top: 30px;
}
.header-sub-item.tel{
  display: block;
  width: 100%;
}
.header-sub-item.tel a{
  color: #18168D;
  justify-content: center;
  font-size: 3.2rem;
}
.header-sub-item.tel a img{
  width: 30px;
}
.header-sub-item.tel p{
  color: #18168D;
  padding-top: 5px;
}
.header-sub-item.button a{
  padding: 15px 80px;
}
.header-nav-item.external a::after{
  display: none;
}
.header-nav-item.external a span{
  position: relative;
}
.header-nav-item.external a span::after{
  position: absolute;
  content:'';
  background: url(../images/icon/btn_external_blue.svg) no-repeat center;
  background-size: contain;
  width: 12px;
  height: 10px;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.header-assist{
  margin-top: 3.0rem;
  background: #fff;
  padding: 2.0rem;
  border-radius: 1.0rem;
}
.header-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: none;
  background-color: #EAF3F8;
}
.header-nav{
  gap: 0;
  display: block;
  margin-top: 20px;
}
.header-nav .header-nav-list{
  width: 100%;
  gap: 0;
}
.header.is-scroll .header-nav-link,
.header.is-scroll .header-sub-item.tel p,
.header.is-scroll .header-sub-item.tel a{
  color: #18168D !important;
}

/*  kv-img
-------------------------------------------------------  */
.kv-txt .h1-ttl{
  font-size: 4.8rem;
}
.kv-txt .h1-ttl span{
  font-size: 1.8rem;
}
/*  ttl
-------------------------------------------------------  */
.ttl-box{
  margin-bottom: 3.0rem;
}
.ttl-box-min{
  margin-bottom: 1.5rem;
}
.sub-ttl .en{
  font-size: 7.2rem;
}
.h2-ttl{
  font-size: 1.8rem;
}
.h3-ttl{
  font-size: 2.4rem;
}
.h4-ttl{
  font-size: 1.8rem;
}
.c-txt-18{
  line-height: 1.6em;
}
.c-txt-20{
  font-size: 1.8rem;
}
.c-txt-24{
  font-size: 1.8rem;
}
/*  button
-------------------------------------------------------  */
.button a {
  max-width: 270px;
  padding: 16px 20px;
  font-size: 1.4rem;
}
.txt-button a {
  font-size: 1.4rem;
}
/* acc
-------------------------------------------------------  */
.acc-ttl {
  font-size: 1.6rem;
}
/* reasons
-------------------------------------------------------  */
.flex-box-item{
  gap: 5%;
}
.flex-box-item .flex-box-img{
  width: 48%;
}
.flex-box-item .flex-box-txt .num{
  left: 3%;
  font-size: 8.0rem;
  line-height: 4rem;
}
.flex-box-item:nth-child(even) .flex-box-txt .num{
  left: auto;
  right: 3%;
}
.flex-box-item:not(:first-child){
  margin-top: 50px;
}
/* service
-------------------------------------------------------  */
#service .bg-icon-service{
  top: -20px;
  right: -5%;
  width: 230px;
  height: 230px;  
}
#service .ttl-box-min{
  margin-bottom: 0;
}
.service-item .service-ttl span{
  font-size: 1.4rem;
  padding: 8px 16px;
}
.service-item .service-img{
  height: 80px;
  margin-top: 25px;
}  
.service-item .service-txt{
  padding-top: 16px;
}
.issue-list li{
  padding-left: 20px;
  font-size: 1.2rem;
}
.issue-list li::before{
  width: 14px;
  height: 14px;
}
.service-item .issue-list{
  margin-top: 18px;
  min-height: 82px;
}
.service-item:nth-child(4) .issue-list,
.service-item:nth-child(5) .issue-list{
  min-height: 72px;
}

/* solution
-------------------------------------------------------  */
.tab-nav {
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  padding: 13px 5px;
  border-bottom: solid 1px #0041AD;
}
.tab-content{
  padding-top: 40px;
}
.solution-item .solution-block{
  gap: 15px;
}
.solution-item .solution-block .solution-block-ttl{
  font-size: 1.6rem;
}
.solution-item .solution-block .solution-block-img{
  width: 55px;
  height: 55px;
}
.staffing img{
  width: 140px;
}
/* case
-------------------------------------------------------  */
.case-block-txt{
  margin-top: 0;
}
.case-block-txt .num{
  font-size: 4.0rem;
}
.case-icon span{
  font-size: 1.2rem;
}
.case-ttl-1{
  font-size: 1.6rem;
  padding-top: 20px;
}
.pc-tb-txt{
  font-size: 1.5rem;
}
.case-ttl-2{
  font-size: 1.6rem;
  padding-top: 20px;
}
.case-logo-ttl .main-ttl .jp::before{
  width: 24px;
  height: 40px;
  left: -30px;
}
.case-logo-ttl .main-ttl .jp::after{
  width: 24px;
  height: 40px;
  right: -30px;
}
.case-item .acc-ttl-box1-pc, .acc-ttl-box2-pc{
  font-size: 1.6rem;
}
.case-before::after{
  right: -7.5%;
}
/* s-edit */
.case-after .cb-cm-2 li:not(:first-child){
  margin-top: 35px;
}
.cb-ttl-1{
  font-size: 1.6rem;
}
.cb-ttl-2{
  font-size: 1.6rem;
}
/* .case-after li:not(:first-child){
  margin-top: 30px;
} */

/* flow
-------------------------------------------------------  */
.flow-ttl{
  font-size: 1.8rem;
}
.flow-inner{
  margin-bottom: 30px;
}
.flow-inner li{
  text-align: center;
}
.flow-inner li img{
  width: 90%;
}
.step-ttl span{
  font-size: 1.6rem;
}
/* faq
-------------------------------------------------------  */
#faq .bg-icon-faq{
  left: -10%;
  width: 250px;
  height: 250px;
}
/* company
-------------------------------------------------------  */
.company-movie{
  padding-bottom: 5%;
}
.company-movie iframe{
  width: 90%;
}
/* location
-------------------------------------------------------  */
.location-inner .bg-ttl{
  font-size: 1.5rem;
}
.location-inner ul li{
  width: 100%;
}
.location .map{
  width: 54%;
  top: 50%;
  right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/* contact
-------------------------------------------------------  */
.contact-inner ul li .h4-ttl{
  margin-bottom: 1.5rem; 
}
.contact-inner ul li .tel a{
  font-size: 3.2rem;
  line-height: 1;
  align-items: center;
}
.contact-inner ul li .tel a img{
  width: 2.8rem;
}
/*  footer
-------------------------------------------------------  */
.footer-logo{
  width: 200px;
}
.footer-privacy{
  width: 40px;
}
}

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

@media screen and (max-width: 768px) {
body{ font-size: 1.4rem;}
.wrap,
.max-wrap{ width: 86%;}
.sp-t-l{ text-align: left !important;}
.txt{ line-height: 1.7em;}

/*  header
-------------------------------------------------------  */
.wrapper {
  padding-top: var(--fixed-header-height);
}
.header{
  background: #fff;
}
.header-logo{
  width: 45%;
  max-width: 200px;
}
.is-scroll { 
  height: 60px;
}
.header-menu-container{
  margin: 80px 8% 60px;
}
.header-nav-link{
  padding: 15px 0;
}
.header-sub .header-sub-list{
  gap: 10px;
}
.header-sub-item.tel{
  margin-bottom: 10px;
}
.header-sub-item.tel a{
  font-size: 2.8rem;
  align-items: normal;
}
.header-sub-item.tel a img{
  width: 25px;
}
.header-sub-item.tel p{
  padding-top: 0;
}
.header-sub-item.button{
  width: 48%;
  max-width: 220px;
}
.header-sub-item.button a{
  padding: 8px 10px;
  max-width: 100%;
}
.header-sub-item.button a img{
  height: 24px;
}
.header-menu-button{
  width: 60px;
  height: 60px;
  padding: 13px 15px;
}

/*  kv
-------------------------------------------------------  */
.kv{
  height: 100%;
}
.video-contents{
  position: unset;
  aspect-ratio: 1920 / 1080;
  height: 100%;
}
.video{
  position: unset;
  aspect-ratio: 1920 / 1080;
  width: 100%;
  -webkit-transform: unset;
  transform:unset;
}
.kv-txt{
  width: auto;
  max-width: 88%;
  left: 0%;
  padding-left: 6%;
  transform: translate(-0%, -50%) !important;
  -webkit-transform: translate(-0%, -50%) !important;
  -ms-transform: translate(-0%, -50%) !important;
  z-index: 1 !important;
}
.kv-txt .h1-ttl{
  font-size: calc(42/768*100vw);
}
.kv-txt .h1-ttl span{
  font-size: calc(18/768*100vw);
}
/*  ttl list button
-------------------------------------------------------  */
.sub-ttl .en{
  font-size: clamp(4.0rem, 8.333vw, 6.4rem);
}
.h2-ttl{
  font-size: 1.6rem;
}
.h3-ttl{
  font-size: 2.0rem;
}
.h4-ttl{
  font-size: 1.6rem;
}
.c-txt-18{
  font-size: 1.5rem;
}
.line-ttl:after{
  width: 50px;
  padding-top: 15px;
}
.li2 ul,
.li3 ul{
  gap: 20px;
}
.li2 ul li,
.li3 ul li{
  width: 100%;
}
.button a{
  max-width: 80%;
  font-size: 1.4rem;
}
.button-box-min{
  margin-top: 15px;
}
/* reasons
-------------------------------------------------------  */
#reasons .ttl-box{
  margin-bottom: 40px;
}
.flex-box-item .flex-box-img{
  width: 80%;
  margin: 0 auto;
}
.flex-box-item .flex-box-img::after{
  top: -20px;
  width: 320px;
  height: 100px;  
}
.flex-box-item:nth-child(even) .flex-box-img::after{
  bottom: auto;
  top: -20px;
}
.flex-box-item .flex-box-txt{
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.flex-box-item .flex-box-txt .num,
.flex-box-item:nth-child(even) .flex-box-txt .num{
  top: -3%;
  left: auto;
  right: 0;
  font-size: 5.6rem;
}
/*  service
-------------------------------------------------------  */
.bg-service{
  background-size: cover;
}
#service .section-inner{
  margin-top: calc(-60/768*100vw);
  padding-top: calc(120/768*100vw);
}
#service .bg-icon-service{
  width: 160px;
  height: 160px;
  top: 0;
  right: -12%;
}
.bg-service{
  background: url(../images/bg_service_sp.webp) no-repeat top center;
  overflow: hidden;
}
.service-list{
  margin-top: 10px;
}
.service-item{
  width: 100%;
  padding: 30px 20px 25px 20px;
  margin-top: 20px;
}
.service-item .service-ttl span{
  font-size: 1.5rem;
  padding: 8px 30px;
}
.service-item .service-img{
  height: unset;
  margin-top: 20px;
}
.service-item .service-img img{
  width: 30%;
  max-width: 80px;
}
.service-item .service-txt{
  margin-top: 10px;
  padding-top: 20px;
}
.service-item .issue-list{
  min-height: auto;
  margin-top: 15px;
}
.service-item:nth-child(4) .issue-list,
.service-item:nth-child(5) .issue-list{
  min-height: auto;
}
/*  solution
-------------------------------------------------------  */
.tab-nav{
  width: 49%;
  margin-left: 2%;
  padding: calc(15/768*100vw) 0px;
  font-size: clamp(1.0rem, 2.083vw, 1.6rem);
  border-bottom: solid 2px #F0F4F5;
  border-radius: 5px;
}
.first-tab-nav,
.third-tab-nav{
  margin-left: 0%;
}
.third-tab-nav,
.fourth-tab-nav{
  margin-top: 2%;
}
.tab-nav img{
  height: 23px;
}
input:checked + .tab-nav{
  border-bottom: solid 2px #0041AD;
}
.tab-content{
  border-top: unset;
  padding-top: 30px;
  top: 0;
}
.solution-item{
  width: 100%;
  margin-top: 30px;
}
.solution-item .solution-block .solution-block-ttl{
  font-size: 1.6rem;
}
.solution-item:not(:first-child){
  margin-top: 20px;
}
.flex-container{
  display: block;
}
.staffing{
  margin-top: 30px;
}
.staffing .staffing-ttl{
  margin-bottom: 10px;
  font-size: 1.6rem;
}
.staffing-txt{
  margin-top: 10px;
}
.staffing img{
  width: 120px;
}
/*  case
-------------------------------------------------------  */
.case-item{
  padding: 20px 20px 0 20px;
}
.case-item .acc-container{
  padding-top: 40px;
}
.case-item .acc-ttl{
  top: -45px;
  width: 100px;
}
.case-item .acc-ttl-box1-sp, .acc-ttl-box2-sp{
  padding: 14px 16px;
  font-size: 1.5rem;
}
.acc-contents{
  margin-top: 20px;
}
.case-block{
  flex-wrap: wrap;
  gap: 20px;
}
.case-block-img,
.case-block-txt{
  width: 100%;
}
.case-block-txt .num{
  right: 10px;
}
.case-ttl{
  font-size: 1.6rem;
  padding-top: 15px;
}
.case-txt{
  padding-bottom: 20px;
}
.case-icon span{
  padding: 5px 10px;
}
.acc-contents{
  flex-wrap: wrap;
  gap: 25px;
}
.case-item:not(:first-child){
  margin-top: 20px;
}
/**/
.acc-ttl-box1-sp,
.acc-ttl-box2-sp{
  width: 100%;
}
.case-box{
  padding: 20px;
  width: 100%;
}
.case-before li, 
.case-after li{
  padding-left: 22px;
}
.case-before::after{
  background: url(../images/icon/icon_bottomarrow2.svg) no-repeat center;
  top: auto;
  bottom: -23px;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.case-before li::before,
.case-after li::before{
  width: 16px;
  height: 16px;
  background-size: contain;
}
.case-logo-ttl{
  margin-bottom: 20px;
}
.case-logo-ttl .main-ttl .jp::before{
  width: 20x;
  height: 32px;
  left: -25px;
}
.case-logo-ttl .main-ttl .jp::after{
  width: 20x;
  height: 32px;
  right: -25px;
}
#client .section-inner{
  padding: 50px 0 30px;
}
.client-item {
  width: 140px;
}
/* s-edit */
.case-before .cb-cm-1 li:not(:first-child){
  margin-top: 10px;
}
.case-after .cb-cm-2 li:not(:first-child){
  margin-top: 10px;
}
.case-before .cb-cm-3 li:not(:first-child){
  margin-top: 10px;
}
.iks{
  font-size: 17px;
}
.cb-ttl-1, .cb-ttl-2{
  padding-bottom: 30px;
}

/*  flow
-------------------------------------------------------  */
.flow-inner{
  margin-top: 30px;
  margin-bottom: 30px;
}
.flow-inner .li5 ul li{
  width: 90%; 
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 5%;
  margin: 0 auto;
}
.flow-inner .li5 ul li:not(:first-child){
  margin-top: 10px;
}
.flow-inner li:not(:last-child)::after{
  display: none;
}
.flow-ttl{
  font-size: 1.6rem;
}
.flow-inner li img{
  width: 30%;
  max-width: 110px;
}
.step-ttl span{
  font-size: 1.4rem;
}
/*  faq
-------------------------------------------------------  */
.faq-inner{
  display: block;
}
.faq-inner .ttl-box{
  margin-top: 0;
}
.faq-inner .h2-ttl{
  text-align: center;
}
.faq-contents{
  max-width: 100%;
}
#faq .bg-icon-faq{
  bottom: calc(-140/768*100vw);
}
.acc-container{
  margin-top: 30px;
}
.acc-q-ttl,
.acc-a-txt{
  padding-left: 35px;
}
.acc-ttl{
  padding: 20px 35px 20px 15px;
  font-size: 1.4rem;
}
.acc-ttl:before,
.acc-ttl:after{
  right: 20px;
}
.acc-txt{
  padding: 20px 15px 20px 15px;
}
.acc-q-ttl:before,
.acc-a-txt:before{
  top: -1px;
  width: 25px;
  height: 25px;
}
/*  company
-------------------------------------------------------  */
.company-movie{
  margin-bottom: 30px;
}
.radio{
  flex-wrap: wrap;
  gap: 20px;
}
audio{
  width: 260px;
}
/* location
-------------------------------------------------------  */
.location-inner .bg-ttl:not(:first-child){
  margin-top: 2rem;
}
/*  contact
-------------------------------------------------------  */
.location .map{
  width: 100%;
  max-width: 500px;
  position: unset;
  -webkit-transform: unset;
  margin: 0 auto;
}
.location-inner{
  width: 100%;
  margin-top: 20px;
  padding: 2rem;
}
.contact-inner{
  margin-top: 30px;
}
.contact-inner ul li{
  padding: 2.5rem 2rem;
}
.contact-inner ul li .h4-ttl{
  margin-bottom: 20px;
}
.contact-inner ul li .tel{
  margin-top: -10px;
}
.contact-inner ul li .tel a{
  align-items: center;
  line-height: 1.2em;
}
.contact-inner ul li .tel a img{
  max-width: 4rem;
}
.contact-inner ul li .tel p{
  padding-top: 0;
}
#contact .button a{
  width: 100%;
  max-width: 300px;
  font-size: 1.3rem;
}
/*  footer
-------------------------------------------------------  */
.footer-contents{
  flex-wrap: wrap;
  padding: 3rem 0 1.5rem;
}
.footer-logo{
  width: 180px;
  margin: 0 auto 10px;
}
.footer-nav-list{
  justify-content: center;
}
.footer-nav-item{
  font-size: 1.3rem;
}
.footer-link{
  display: block;
  width: 100%;
}
.footer-privacy{
  margin: 15px auto 0;
  width: 30px;
}
.footer-copy{
  font-size: 1.0rem;
}
/*  pagetop
-------------------------------------------------------  */
.pagetop {
  height: 40px;
  width: 40px;
  right: 15px;
  bottom: 15px;
}
.pagetop-arrow {
  height: 8px;
  width: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

}