@charset "UTF-8";
/*―――――――――――――――――――――――――*
*	IT
*―――――――――――――――――――――――――*/
#it {
  background: url(../img/it/bg01.png) no-repeat right top, url(../img/it/bg02.png) no-repeat center 750px;
}
#it .under_main_visual .w1520:before {
  background: url(../img/it/img01.png) no-repeat left top/cover;
}
#it #w_service .w1520:before {
  background: url(../img/it/img03.png) no-repeat left top/100% auto;
}
#it #w_service .flex {
  display: flex;
}
#it #w_service .ttl {
  width: 340px;
}
#it #w_service .content {
  width: calc(100% - 340px);
}
#it .service_list {
  width: 100%;
  display: grid;
  gap: 30px 0;
}
#it .service_list li {
  background: #fff;
  padding: 22px 30px;
  border-radius: 4px;
}
#it .service_list li:nth-child(1) h3 {
  background: url(../img/it/ic01.svg) no-repeat left center;
}
#it .service_list li:nth-child(2) h3 {
  background: url(../img/it/ic02.svg) no-repeat left center;
}
#it .service_list li:nth-child(3) h3 {
  background: url(../img/it/ic03.svg) no-repeat left center;
}
#it .service_list li:nth-child(4) h3 {
  background: url(../img/it/ic04.png) no-repeat left center/30px auto;
}
#it .service_list .system {
  padding-right: 340px;
  background: #fff url(../img/it/img04.png) no-repeat center right 30px;
}
#it .service_list .app {
  padding-left: 246px;
  background: #fff url(../img/it/img05.png) no-repeat 30px center;
}
#it .service_list h3 {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 5px;
  padding-left: 38px;
}
#it .service_list p {
  line-height: 2;
}
#it .service_list a {
  color: var(--blue);
  border-bottom: solid 1px var(--blue);
  background: url(../img/it/link_arrow.svg) no-repeat right 7px;
  padding-right: 16px;
  margin-top: 6px;
  display: inline-block;
}
#it #faq {
  padding: 120px 0;
}
#it #works {
  background: #F5F5F5;
  padding: 140px 0;
  overflow: hidden;
}
#it #works .btn {
  color: var(--blue);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 60px;
  border-radius: 50px;
  background: #fff;
  border: solid 1px var(--blue);
  margin: 40px auto 0;
}
#it #works_slide {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
}
#it #works_slide:before, #it #works_slide:after {
  z-index: 5;
  content: "";
  display: block;
  position: absolute;
  background: #F5F5F5;
  width: 20px;
  height: 100%;
  top: 0;
}
#it #works_slide:before {
  left: 0;
}
#it #works_slide:after {
  right: 0;
}
#it #works_slide .slide {
  margin: 0 20px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
#it #works_slide .slick-arrow {
  z-index: 30;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 28px 28px 0 0;
}
#it #works_slide .slick-prev {
  background: url(../img/it/prev.svg) no-repeat left top/100% auto;
  left: -28px;
}
#it #works_slide .slick-next {
  background: url(../img/it/next.svg) no-repeat left top/100% auto;
  right: -28px;
}
#it #works_slide .w_text {
  padding: 18px 20px 22px;
}
#it #works_slide .label {
  font-size: 14px;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
#it #works_slide .label.charm {
  background: var(--charm);
}
#it #works_slide .label.blue {
  background: var(--blue);
}
#it #works_slide .ttl {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4444444444;
  margin-bottom: 10px;
}
#it #works_slide .company_name {
  font-size: 14px;
  font-weight: 300;
}

@media only screen and (min-width: 900px) and (max-width: 1540px) {
  #it {
    background: url(../img/it/bg01.png) no-repeat right top/32.4175824176vw auto, url(../img/it/bg02.png) no-repeat center 42.8571428571vw/100% auto;
  }
  #it #w_service .ttl {
    width: 18.6813186813vw;
  }
  #it #w_service .content {
    width: calc(100% - 18.6813186813vw);
  }
  #it .service_list {
    gap: 1.6483516484vw 0;
  }
  #it .service_list li {
    padding: 1.2087912088vw 1.6483516484vw;
    border-radius: 0.2197802198vw;
  }
  #it .service_list li:nth-child(1) h3 {
    background: url(../img/it/ic01.svg) no-repeat left center/1.5384615385vw auto;
  }
  #it .service_list li:nth-child(2) h3 {
    background: url(../img/it/ic02.svg) no-repeat left center/1.5384615385vw auto;
  }
  #it .service_list li:nth-child(3) h3 {
    background: url(../img/it/ic03.svg) no-repeat left center/1.5384615385vw auto;
  }
  #it .service_list li:nth-child(4) h3 {
    background: url(../img/it/ic04.png) no-repeat left center/1.6483516484vw auto;
  }
  #it .service_list .system {
    padding-right: 18.6813186813vw;
    background: #fff url(../img/it/img04.png) no-repeat center right 1.6483516484vw/15.3846153846vw auto;
  }
  #it .service_list .app {
    padding-left: 14.2857142857vw;
    background: #fff url(../img/it/img05.png) no-repeat 1.6483516484vw center/10.989010989vw auto;
  }
  #it .service_list h3 {
    font-size: 1.0989010989vw;
    margin-bottom: 0.2747252747vw;
    padding-left: 2.0879120879vw;
  }
  #it .service_list p {
    line-height: 2;
  }
  #it .service_list a {
    background: url(../img/it/link_arrow.svg) no-repeat right 0.2747252747vw/0.4395604396vw auto;
    padding-right: 0.8791208791vw;
    margin-top: 0.3296703297vw;
  }
  #it #faq {
    padding: 6.5934065934vw 0;
  }
  #it #works {
    padding: 7.6923076923vw 0;
  }
  #it #works .btn {
    width: 16.4835164835vw;
    height: 3.2967032967vw;
    border-radius: 2.7472527473vw;
    margin-top: 2.1978021978vw;
  }
  #it #works_slide {
    margin-left: -1.0989010989vw;
    margin-right: -1.0989010989vw;
  }
  #it #works_slide:before, #it #works_slide:after {
    width: 1.0989010989vw;
  }
  #it #works_slide .slide {
    margin: 0 1.0989010989vw;
    border-radius: 0.2197802198vw;
  }
  #it #works_slide .slick-arrow {
    padding: 1.5384615385vw 1.5384615385vw 0 0;
  }
  #it #works_slide .slick-prev {
    left: -0.2747252747vw;
  }
  #it #works_slide .slick-next {
    right: -0.2747252747vw;
  }
  #it #works_slide .w_text {
    padding: 0.989010989vw 1.0989010989vw 1.2087912088vw;
  }
  #it #works_slide .label {
    font-size: 0.7692307692vw;
    border-radius: 0.2197802198vw;
    padding: 0.0549450549vw 0.3296703297vw;
    margin-bottom: 0.2197802198vw;
  }
  #it #works_slide .ttl {
    font-size: 0.989010989vw;
    margin-bottom: 0.5494505495vw;
  }
  #it #works_slide .company_name {
    font-size: 0.7692307692vw;
  }
}
@media only screen and (max-width: 899px) {
  #it {
    background: url(../img/it/bg01_sp.png) no-repeat right top/58.6666666667vw auto, url(../img/it/bg02_sp.png) no-repeat center 354.6666666667vw/100% auto;
  }
  #it .under_main_visual nav li {
    padding: 1.3333333333vw 2.4vw;
  }
  #it #w_service {
    padding-bottom: 16vw;
  }
  #it #w_service .w1520:before {
    background-image: url(../img/it/img03_sp.png);
  }
  #it #w_service .flex {
    display: block;
  }
  #it #w_service .ttl, #it #w_service .content {
    width: 100%;
  }
  #it .service_list {
    grid-template-columns: 1fr;
    gap: 2.6666666667vw 0;
  }
  #it .service_list li {
    padding: 4.2666666667vw;
    border-radius: 1.0666666667vw;
  }
  #it .service_list li:nth-child(1) h3 {
    background-size: 6.6666666667vw auto;
  }
  #it .service_list li:nth-child(2) h3 {
    background-size: 6.6666666667vw auto;
  }
  #it .service_list li:nth-child(3) h3 {
    background-size: 6.6666666667vw auto;
  }
  #it .service_list li:nth-child(4) h3 {
    background-size: 6.6666666667vw auto;
  }
  #it .service_list .system {
    padding-bottom: 65.3333333333vw;
    padding-right: 4.2666666667vw;
    background: #fff url(../img/it/img04_sp.png) no-repeat center bottom 5.3333333333vw/82.9333333333vw auto;
  }
  #it .service_list .app {
    background: #fff;
    padding-left: 4.2666666667vw;
  }
  #it .service_list .app p:before {
    content: "";
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
    background: url(../img/it/img05_sp.png) no-repeat center/cover;
    margin: 4vw 0 2.6666666667vw;
  }
  #it .service_list .app a {
    font-size: 3.2vw;
    border-bottom: none;
    background-size: 1.3333333333vw auto;
    padding-right: 3.2vw;
    background-position: right 1.3333333333vw;
    margin-top: 2.1333333333vw;
  }
  #it .service_list h3 {
    font-size: 3.7333333333vw;
    padding-left: 8vw;
  }
  #it .service_list p {
    font-size: 3.2vw;
  }
  #it #faq {
    padding: 16vw 0;
  }
  #it #works {
    padding: 16vw 0;
  }
  #it #works .btn {
    font-size: 3.2vw;
    width: 69.3333333333vw;
    height: 10.6666666667vw;
    border-radius: 13.3333333333vw;
    margin-top: 5.3333333333vw;
  }
  #it #works_slide {
    margin-left: 0;
    margin-right: 0;
  }
  #it #works_slide:before, #it #works_slide:after {
    content: none;
  }
  #it #works_slide .slide {
    margin: 0;
    border-radius: 1.0666666667vw;
  }
  #it #works_slide .slide img {
    width: 100%;
  }
  #it #works_slide .slick-arrow {
    padding: 6.4vw 6.4vw 0 0;
  }
  #it #works_slide .slick-prev {
    left: -3.7333333333vw;
  }
  #it #works_slide .slick-next {
    right: -3.7333333333vw;
  }
  #it #works_slide .w_text {
    padding: 3.7333333333vw 5.3333333333vw 5.3333333333vw;
  }
  #it #works_slide .label {
    font-size: 2.6666666667vw;
    border-radius: 1.0666666667vw;
    padding: 0.8vw 1.6vw;
    margin-bottom: 1.0666666667vw;
  }
  #it #works_slide .label.charm {
    background: var(--charm);
  }
  #it #works_slide .label.blue {
    background: var(--blue);
  }
  #it #works_slide .ttl {
    font-size: 3.7333333333vw;
    line-height: 1.5714285714;
    margin-bottom: 2.1333333333vw;
  }
  #it #works_slide .company_name {
    font-size: 3.2vw;
  }
}/*# sourceMappingURL=it.css.map */