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

main,
.mv_wrap {
  letter-spacing: 0.13em;
  font-family: "Josefin Sans", "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo,
    Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p {
  line-height: 2.3;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

.btnWrap {
  width: 370px;
  margin: 0 auto;
}
.recBtn {
  border-radius: 30px;
  border: 1px solid #fff;
  text-align: center;
  padding: 16px 20px 13px;
  position: relative;
  display: block;
  color: #fff;
  transition: 0.3s;
}
.recBtn::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url(/recruit/img/btn_arrow.png);
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  transition: 0.3s;
}
.recBtn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: rgb(0, 171, 235);
}
.recBtn:hover::after {
  background: url(/recruit/img/btn_arrow_blue.png);
  transform: translateX(5px);
}
.recBtn.blue {
  background: #00abeb;
  border: none;
  font-weight: bold;
}
.recBtn .yel {
  color: #fff94b;
  margin-left: 5px;
}
.recBtn.blue:hover {
  background: #fff;
}
.recBtn.blue:hover .yel {
  color: #00abeb;
}

@media screen and (max-width: 768px) {
  main {
    letter-spacing: 0.1em;
  }
  p {
    font-size: 14px;
    line-height: 1.8;
  }
  a {
    font-size: 14px;
  }
  .btnWrap {
    width: 250px;
  }
  .recBtn {
    padding: 12px 15px 9px;
  }
  .recBtn::after {
    top: 14px;
  }
}

.mv_wrap {
  position: relative;
  overflow: hidden;
}
.mv {
}
.mv_pc {
  height: 100%;
}
.mv_personList {
  display: flex;
  width: 100%;
  height: 800px;
}
.mv_personList > li {
  width: calc(100% / 5);
  position: relative;
  overflow: hidden;
}
.mv_personList > li > div:first-child {
  background-repeat: no-repeat;
  height: 100%;
  opacity: 0;
}
.mv_person01 {
  background-image: url("/recruit/img/mv_person01.jpg");
  background-position: 69.5% 0;
}
.mv_person02 {
  background-image: url("/recruit/img/mv_person02.jpg");
  background-position: 23% 0;
}
.mv_person03 {
  background-image: url("/recruit/img/mv_person03.jpg");
  background-position: top;
}
.mv_person04 {
  background-image: url("/recruit/img/mv_person04.jpg");
  background-position: 56% 0;
}
.mv_person05 {
  background-image: url("/recruit/img/mv_person05.jpg");
  background-position: calc(50% + 320px) 0;
}
.mv_person06 {
  background-image: url("/recruit/img/mv_person06.jpg");
  background-position: 20% 4%;
}
.mv_person07 {
  background-image: url("/recruit/img/mv_person07.jpg");
  background-position: 69% 0;
}
.mv_person08 {
  background-image: url("/recruit/img/mv_person08.jpg");
  background-position: 69% 0;
}
.slick-list {
  position: relative;
}
.slick-slide img {
  opacity: 1 !important;
}
.slick-dots {
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}
.slick-dots > li + li {
  margin-left: 15px;
}
.slick-dots li button {
  position: relative;
  text-indent: -9999px;
}
.slick-dots li button::before {
  background-color: rgba(0, 171, 235, 0.3);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  border-radius: 50%;
  cursor: pointer;
  height: 13.5px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 13.5px;
}
.slick-dots li.slick-active button::before {
  background-color: #003b89;
}
.slick-dots li button {
  background: none;
  border: none;
  outline: none;
  padding: 0 7px;
}
.mvInner {
  max-width: 1220px;
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.mvCnt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 54%;
  opacity: 0;
}
.mvCnt_ttl {
  margin-bottom: 40px;
}
.mvCnt_ttl img {
}
.mvCnt_btn {
  max-width: 370px;
}
@media screen and (max-width: 1340px) {
  .mvInner {
    padding: 20px 100px;
  }
}
@media screen and (max-width: 1200px) {
  .mv_person05,
  .mv_person06,
  .mv_person07 {
    background-size: cover;
  }
  .mv_person05 {
    background-position: 32% 0;
  }
}
@media screen and (max-width: 1024px) {
  .mv_wrap {
    padding-top: 62px;
  }
  .mv_personList {
    height: calc(100vh - 60px);
  }
  .mv_person01,
  .mv_person02,
  .mv_person03,
  .mv_person04,
  .mv_person08
  {
    background-size: cover;
  }
  .mv_person01 {
    background-position: 68.5% 0;
  }
  .mv_person02 {
    background-position: 25% 0;
  }
  .mv_person03 {
    background-position: top;
  }
  .mv_person04 {
    background-position: 56% 0;
  }
  .mv_person08 {
    background-position:  67% 0;
  }

  .mvInner {
    margin-top: 62px;
    height: calc(100% - 62px);
  }
}
@media screen and (max-width: 768px) {
  .mvCnt {
    opacity: 1;
  }
  .mv_personList > li > div:first-child {
    opacity: 1;
  }
  .mvInner {
    z-index: 10;
  }
  .mvCnt_btn {
    width: 86%;
    max-width: 370px;
    margin: -25px auto 0;
    z-index: 7;
  }
  .mvCnt_btn a {
    padding: 15px 15px 11px;
    font-size: 16px;
    z-index: 12;
  }
  .mvCnt_btn .recBtn::after {
    top: 18px;
  }
  .mv_personList {
    position: relative;
    overflow: hidden;
    height: calc(100vh - 150px);
    flex-direction: column;
  }
  .mv_personList > li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mv_personList > li > div {
    height: calc(100% + 100px);
    width: 100%;
  }
  .mv_personList > li.mv_person_sp01 {
    z-index: 10;
    background-position: 78.5% 0;
  }
  .mv_personList > li.mv_person_sp02 {
    z-index: 9;
  }
  .mv_personList > li.mv_person_sp03 {
    z-index: 8;
  }
  .mv_personList > li.mv_person_sp04 {
    z-index: 7;
  }
  .mv_personList > li.mv_person_sp05 {
    z-index: 6;
  }
  .mv_personList > li.mv_person_sp06 {
    z-index: 5;
  }
  .mv_personList > li.mv_person_sp07 {
    z-index: 4;
  }
  .mv_personList > li.mv_person_sp08 {
    z-index: 3;
  }
  .mv_personList > li.mv_person_sp09 {
    z-index: 2;
  }
  .mv_personList > li.mv_person_sp10 {
    z-index: 1;
  }
  .mv_person01 {
    background-position: 75.5% 0;
  }

  /*.mv_personList > li {
    width: 100%;
    height: 40%;
    overflow: hidden;
    position: absolute;
  }
  .mv_personList > li:nth-child(2) {
    transform: skewY(6deg);
    top: 20%;
  }
  .mv_personList > li:nth-child(3) {
    transform: skewY(-7deg);
    top: 40%;
  }
  .mv_personList > li:nth-child(4) {
    transform: skewY(6deg);
    top: 60%;
  }
  .mv_personList > li:nth-child(5) {
    transform: skewY(-6deg);
    top: 80%;
  }
  .mv_person01 {
    top: 0;
    background-position: 50% 18%;
    background-size: calc(100vw + 30%);
  }
  .mv_person02 {
    transform: translateY(-12.5%) skewY(-6deg);
    top: -40%;
    background-position: top 18% left 40%;
    background-size: calc(100vw + 40%);
  }
  .mv_person03 {
    transform: translateY(-12.5%) skewY(7deg);
    top: -40%;
    height: 150%;
    background-size: calc(100vw + 20%);
    background-position: top 10% left 10%;
  }
  .mv_person04 {
    transform: translateY(-12.5%) skewY(-6deg);
    top: -40%;
    height: 150%;
    background-size: calc(100vw + 40%);
    background-position: top 17% right;
  }
  .mv_person05 {
    transform: translateY(-12.5%) skewY(6deg);
    top: -40%;
    height: 150%;
    background-size: 100vw;
    background-position: top 9% right;
  }
  .mv_person06 {
    transform: translateY(-12.5%) skewY(-6deg);
    background-position: 50% 0;
  }
  .mv_person07 {
    top: -40%;
    height: 150%;
    background-position: 50% 0;
    background-size: 130vw;
  }
  .mv_person08 {
    transform: translateY(-12.5%) skewY(-6deg);
    top: -40%;
    height: 150%;
    background-position: 26% 25%;
    background-size: 153vw;
  }
  .mv_person09 {
    transform: translateY(-12.5%) skewY(6deg);
    top: -40%;
    height: 150%;
  }
  .mv_person10 {
    transform: translateY(-12.5%) skewY(7deg);
    top: -40%;
    height: 150%;
  }
  .mv_personList > li.mv_person_sp01 {
    top: 0;
    transform: none;
    z-index: 1;
  }
  .mv_personList > li.mv_person_sp02 {
    top: 20%;
    transform: skewY(6deg);
    z-index: 2;
  }
  .mv_personList > li.mv_person_sp03 {
    top: 40%;
    transform: skewY(-7deg);
    z-index: 3;
  }
  .mv_personList > li.mv_person_sp04 {
    top: 60%;
    transform: skewY(6deg);
    z-index: 4;
  }
  .mv_personList > li.mv_person_sp05 {
    top: 80%;
    transform: skewY(-6deg);
    z-index: 5;
  }*/
  .slick-dots {
    bottom: 30px;
  }
  .slick-dots li + li {
    margin-left: 10px;
  }
  .slick-dots li button::before {
    background-color: rgba(0, 171, 235, 0.3);
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    border-radius: 50%;
    cursor: pointer;
    height: 11px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 11px;
  }
  .mvCnt {
    width: calc(100% - 40px);
    max-width: 550px;
    z-index: 6;
  }
  .mvInner {
    padding: 0 20px;
  }
}

/*  acoutus  */
.cntInner {
  max-width: 1220px;
  padding: 0 10px;
  margin: 0 auto;
}
.cntWindeInner {
  max-width: 1900px;
  padding: 0 10px;
  margin: 0 auto;
}
.aboutus {
  margin-top: 90px;
  padding-top: 110px;
  background: url(/recruit/img/bg_aspc.png) no-repeat;
  background-position: calc(50% - 480px) 0;
}
.aboutus_lead {
  max-width: 845px;
  border-radius: 10px;
  margin: 0 0 0 auto;
  text-align: center;
  padding: 80px 0 60px;
  background: linear-gradient(
    -45deg,
    rgb(39, 114, 213) 0%,
    rgba(0, 171, 235, 0.9) 50%,
    rgb(39, 114, 213) 100%
  );
}
.aboutus_lead_ttl {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 19px 0;
  margin-bottom: 15px;
  background: url(/recruit/img/bg_aboutus_txt.png) no-repeat center;
}
.aboutus_lead_ttl .big {
  font-size: 34px;
  letter-spacing: 0.08em;
}
.aboutus_lead_txt {
  margin-bottom: 50px;
  color: #fff;
}
@media screen and (max-width: 900px) {
  .aboutus {
    background-position: -170px 0;
  }
  .aboutus_lead_ttl {
    background-size: 70%;
  }
}
@media screen and (max-width: 768px) {
  .aboutus {
    margin-top: 40px;
    background-size: 680px;
    background-position: top right 70px;
    padding-top: 70px;
  }
  .aboutus_lead_ttl {
    background-size: 60%;
    padding: 14px 0 5px;
    margin-bottom: 15px;
  }
  .aboutus_lead {
    padding: 40px 15px 30px;
  }
  .aboutus_lead_ttl {
    font-size: 14px;
  }
  .aboutus_lead_ttl .big {
    font-size: 20px;
  }
  .aboutus_lead_txt {
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 480px) {
  .aboutus {
    background-size: 560px;
    background-position: top right 40px;
    padding-top: 40px;
  }
  .aboutus_lead_ttl {
    background-size: 270px;
  }
}

/*  panel  */
.panel {
  margin-top: 60px;
}
.panel_list {
  display: flex;
  justify-content: space-between;
}
.panel_list li {
  width: calc((100% / 3) - 6.5px);
  border-radius: 10px;
  height: 308px;
}
.panel_list a {
  display: flex;
  height: 100%;
  align-self: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: 0.3s;
}
.panel_list a:hover {
  background: rgb(0, 64, 141, 0.9);
}
.panel_list .business {
  background: url(/recruit/img/bg_panel_01.png) no-repeat;
  background-position: center;
  background-size: cover;
}
.panel_list .job {
  background: url(/recruit/img/bg_panel_02.png) no-repeat;
  background-position: center;
  background-size: cover;
}
.panel_list .message {
  background: url(/recruit/img/bg_panel_03.png) no-repeat;
  background-position: center;
  background-size: cover;
}
.panel_list_en {
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  line-height: 1.2;
  font-size: 20px;
  color: #fff;
}
.panel_list_ttl {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 45px;
  line-height: 1.2;
  color: #fff;
}
.panel_list_txt {
  line-height: 1.2;
  color: #fff;
}
@media screen and (max-width: 900px) {
  .panel_list li {
    height: 250px;
  }
  .panel_list_en {
    font-size: 14px;
  }
  .panel_list_ttl {
    font-size: 24px;
  }
  .panel_list_txt {
    font-size: 14px;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .panel {
    margin-top: 40px;
  }
  .panel_list {
    flex-direction: column;
  }
  .panel_list li {
    width: 100%;
    background-size: cover;
    height: 150px;
  }
  .panel_list li + li {
    margin-top: 20px;
  }
  .panel_list .message {
    background-position: 0 -80px;
  }
  .panel_list_ttl {
    margin-bottom: 25px;
    font-size: 20px;
  }
  .panel_list_en {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px) {
  .panel {
    margin-top: 30px;
  }
  .panel_list li + li {
    margin-top: 10px;
  }
  .panel_list .message {
    background-position: 0px -40px;
    background-size: 110%;
  }
}

/*  number  */
.number {
  margin-top: 60px;
}
.number_bl {
  border-radius: 10px;
  border: 1px solid #00abeb;
  background: url(/recruit/img/bg_number_01.png) no-repeat,
    url(/recruit/img/bg_number_02.png) no-repeat right;
  background-position: left 13% top 2%, right 18% top 7%;
  background-color: #f5fcff;
  padding: 60px 50px 50px;
  text-align: center;
}
.number_ttl {
  font-size: 26px;
  color: #003b89;
  font-weight: bold;
  margin-bottom: 35px;
}
.number_ttl .blue {
  color: #00abeb;
}
.number_txt {
  margin-bottom: 30px;
}
.number_sliderWrap {
  margin: 0 auto 38px;
  position: relative;
  max-width: 1200px;
}
.number_slider {
  /*display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 980px;*/
  margin: 0 auto;
  padding: 0 65px;
}
.number_slider li {
  width: calc((100% - 105px) / 4);
  border: 1px solid #00abeb;
  margin: 0 17px;
}
.number_slider li img {
  max-width: 100%;
}
.number_slidePrev,
.number_slideNext {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #00abeb;
  background: #fff;
  position: absolute;
  top: calc(50% - 29px);
  cursor: pointer;
}
.number_slidePrev {
  left: 0;
}
.number_slideNext {
  right: 0;
}
.number_slidePrev::before,
.number_slideNext::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid #00abeb;
  border-top: 2px solid #00abeb;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 3px);
}
.number_slidePrev::before {
  transform: rotate(-45deg);
  left: calc(50% - 3px);
}
.number_slideNext::before {
  transform: rotate(135deg);
  left: calc(50% - 6px);
}
.number .recBtn {
  border: 1px solid #00abeb;
  color: #00abeb;
}
.number .recBtn::after {
  background: url(/recruit/img/btn_arrow_blue.png);
}
@media screen and (max-width: 768px) {
  .number {
    margin-top: 40px;
  }
  .number_bl {
    padding: 35px 20px;
    background-position: left 6% top 4%, right 4% top 10%;
    background-size: 25%;
  }
  .number_slider {
    padding: 0 50px;
  }
  .number_slidePrev,
  .number_slideNext {
    width: 42px;
    height: 42px;
    top: calc(50% - 20px);
  }
  .number_slidePrev::before,
  .number_slideNext::before {
    width: 6px;
    height: 6px;
    top: calc(50% - 4px);
  }
  .number_slideNext::before {
    left: calc(50% - 5px);
  }
  .number_slider li {
    margin: 0 5px;
  }
  .number_ttl {
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 1.5;
  }
  .number_txt {
    margin-bottom: 25px;
  }
  .number_sliderWrap {
    margin-bottom: 25px;
  }
  .number_ttl .blue {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .number {
    margin-top: 30px;
  }
  .number_bl {
    padding: 30px 10px;
  }
}

/*  jobCtegory   */
.jobCategory {
  padding: 80px 0 125px;
  margin-top: 135px;
  background: linear-gradient(
    -45deg,
    rgba(113, 139, 253, 0.54) 4%,
    rgba(0, 171, 235, 0.54) 48%,
    rgba(113, 139, 253, 0.54) 81%
  );
}
.jobCategory_ttl {
  background: url(/recruit/img/bg_jobctegory_txt.png) no-repeat top;
  padding: 37px 0 22px;
  margin-bottom: 22px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}
.jobCategory_txt {
  margin-bottom: 55px;
  text-align: center;
}
.jobCategory_list_wrap {
  display: flex;
  overflow: hidden;
}
.jobCategory_list {
  display: flex;
  /*max-height: 468px;*/
  animation: jobCate-slide 30s infinite linear 0.5s both;
}
.jobCategory_list li {
  position: relative;
  margin-left: 12px;
  min-width: 394px;
  max-width: 394px;
}
.jobCategory_list li a {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.jobCategory_list li a:hover .jobCategory_list_hov {
  opacity: 1;
}
.jobCategory_list_hov {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 59, 137, 0.3);
  padding: 0 40px;
  transition: 0.2s;
}
.jobCategory_list_hov::before {
  content: "INTERVIEW";
  position: absolute;
  font-size: 26px;
  font-weight: bold;
  top: 20px;
  color: #fff;
  left: 22px;
}
.jobCategory_list_hov_txt {
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "游ゴシック", YuGothic;
}
.jobCategory_list_hov_btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  margin-top: 10px;
}
.jobCategory_list_hov_btn::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(/recruit/img/btn_arrow_blue.png) no-repeat center;
}
.jobCategory_list_cap {
  width: 275px;
  padding: 23px 30px 10px;
  border-radius: 10px;
  background: linear-gradient(
    -45deg,
    rgba(0, 59, 137, 0.8) 10%,
    rgba(0, 171, 235, 0.8) 80%
  );
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.jobCategory_list_sec {
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
}
.jobCategory_list_name {
  color: #fff;
  display: flex;
  align-items: center;
}
.jobCategory_list_name_year {
  font-size: 12px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "游ゴシック", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
}
.jobCategory_list_name_ini {
  line-height: 1;
  font-size: 14px;
  margin-left: 10px;
}
.jobCategory_list_name_ini .big {
  font-weight: bold;
  font-size: 34px;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 900px) {
  .jobCategory_ttl {
    background-size: 94%;
    padding: 20px 0 12px;
  }
  /*.jobCategory_list {
    max-height: 296px;
  }*/
  .jobCategory_list li {
    max-width: 260px;
    min-width: 260px;
  }
  .jobCategory_list_cap {
    width: 220px;
    padding: 17px 15px 8px;
  }
  .jobCategory_list_sec {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .jobCategory_list_name_ini {
    font-size: 10px;
  }
  .jobCategory_list_name_ini .big {
    font-size: 25px;
  }
  .jobCategory_list_hov {
    padding: 0 15px;
  }
  .jobCategory_list_hov::before {
    font-size: 16px;
    left: 16px;
  }
  .jobCategory_list_hov_txt {
    font-size: 18px;
    line-height: 1.4;
  }
  .jobCategory_list_hov_btn {
    width: 36px;
    height: 36px;
    margin-top: 5px;
  }
  .jobCategory_list_hov_btn::before {
    width: 36px;
    height: 36px;
  }
}
@media screen and (max-width: 768px) {
  .jobCategory {
    margin-top: 60px;
    padding: 50px 0 40px;
  }
  .jobCategory_ttl {
    background-size: 80%;
    padding: 14px 0 10px;
    font-size: 20px;
    margin-bottom: 15px;
  }
  .jobCategory_txt {
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 480px) {
  .jobCategory_ttl {
    background-size: 100%;
    padding: 4px 0;
  }
}
@keyframes jobCate-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*  customer  */
.customer {
  margin: 110px 0 140px;
}
.customer_mapInner {
  background-image: url(/recruit/img/bg_customer.png);
  background-repeat: no-repeat;
  background-position: right top 60px;
  max-width: 1330px;
  margin: 0 auto;
}
.customer.show .customer_mapInner {
  background-image: url(/recruit/img/bg_customer_arrow.gif),
    url(/recruit/img/bg_customer.png);
}
.customer_ttl {
  font-size: 30px;
  padding: 37px 0 22px;
  margin-bottom: 80px;
  color: #00abeb;
  text-align: center;
  font-weight: bold;
  background: url(/recruit/img/bg_customer_txt.png) no-repeat top;
}
.customer_inner {
  max-width: 1000px;
  margin: 0 auto;
}
.customer_txt {
  color: #003b89;
}
.customer_txt:last-of-type {
  margin-top: 30px;
  margin-bottom: 50px;
}
.customer .btnWrap {
  margin-left: 0;
}
.customer .recBtn {
  border: 1px solid #003b89;
  color: #003b89;
}
.customer .recBtn::after {
  background: url(/recruit/img/btn_arrow_blue02.png);
}
.customer .recBtn:hover {
  background: #003b89;
  color: #fff;
}
.customer .recBtn:hover::after {
  background: url(/recruit/img/btn_arrow.png);
}
.customerGraph_wrap {
  margin-top: 195px;
}
@media screen and (max-width: 900px) {
  .customer_ttl {
    background-size: 71%;
    padding: 20px 0 0px;
  }
  .customer_mapInner {
    background-position: right -100px top 60px;
  }
}
@media screen and (max-width: 768px) {
  .customer {
    margin: 50px 0 40px;
  }
  .customer_ttl {
    font-size: 20px;
    margin-bottom: 35px;
  }
  .customer_mapInner {
    background-size: 600px;
    background-position: right -80px top 150px;
  }
  .customer_txt:last-of-type {
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .customerGraph_wrap {
    margin-top: 330px;
  }
}
@media screen and (max-width: 450px) {
  .customer_ttl {
    background-size: 270px;
    padding: 2px 0 0;
    margin-bottom: 25px;
  }
  .customer_mapInner {
    background-size: 120vw;
    background-position: right -70px top 300px;
  }
  .customerGraph_wrap {
    margin-top: 91vw;
  }
}

/*  environment  */
.environment {
  background: #eaf3ff;
  padding: 85px 0 110px;
}
.environment_ttl {
  padding: 37px 0 5px;
  margin-bottom: 65px;
  color: #00abeb;
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  background: url(/recruit/img/bg_environment_txt.png) no-repeat top;
}
.environment_list {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}
.environment_list li {
  width: calc((100% - 20px) / 3);
}
.environment_list li img {
  max-width: 100%;
}
.environment .recBtn {
  border: 1px solid #00abeb;
  color: #00abeb;
}
.environment .recBtn::after {
  background: url(/recruit/img/btn_arrow_blue.png);
}
@media screen and (max-width: 900px) {
  .environment_ttl {
    background-size: 88%;
    padding: 20px 0 0px;
  }
}
@media screen and (max-width: 768px) {
  .environment {
    padding: 50px 0 40px;
  }
  .environment_ttl {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .environment_list {
    flex-wrap: wrap;
    justify-content: center;
  }
  .environment_list li {
    width: 90%;
    text-align: center;
  }
  .environment_list li + li {
    margin-top: 14px;
  }
}
@media screen and (max-width: 480px) {
  .environment_ttl {
    background-size: contain;
    padding: 3px 0 0;
    margin-bottom: 25px;
  }
  .environment_list {
    margin-bottom: 30px;
  }
}

/*  slick  */
.slick-slide {
  outline: none;
}

/*  inview  */
.js-inview {
  opacity: 0;
  transition: 0.6s ease-out 0.3s;
  transform: translateY(30px);
}
.js-inview.show {
  opacity: 1;
  transform: translateY(0);
}

/*   circle graph   */
.customer_graph {
}
.customerGraph_list {
  display: flex;
  justify-content: space-between;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.customerGraph_list > li {
  width: 22%;
  max-width: 235px;
}
.c01 {
  color: #0f4b7d;
}
.c02 {
  color: #00a0b7;
}
.c03 {
  color: #0089b7;
}
.customerGraph {
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  background: #eee;
  position: relative;
}
.c01 .customerGraph {
  background: #0f4b7d;
}
.c02 .customerGraph {
  background: #00a0b7;
}
.c03 .customerGraph {
  background: #0089b7;
}

/*.customerGraph.over50p {
  background-image: linear-gradient(to right, transparent 50%, #0089b7 0);
  position: relative;
} 
.c01 .over50p {
  background-image: linear-gradient(to right, transparent 50%, #0f4b7d 0);
} 
.c02 .over50p {
  background-image: linear-gradient(to right, transparent 50%, #00a0b7 0);
} 
.c03 .over50p {
  background-image: linear-gradient(to right, transparent 50%, #0089b7 0);
} */
.customerGraph_pie_l {
  left: -1px;
  border-radius: 100% 0 0 100% / 50%;
  transform-origin: right;
}
.customerGraph_pie_r {
  right: -1px;
  border-radius: 0 100% 100% 0 / 50%;
  transform-origin: left;
}
.customerGraph_pie_l,
.customerGraph_pie_r {
  content: "";
  position: absolute;
  display: block;
  height: calc(100% + 2px);
  width: calc(50% + 1px);
  top: -1px;
  background: #eee;
}
.customerGraph_data {
  position: absolute;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.customerGraph_data .percentage {
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}
.percentage span {
  font-size: 2em;
  font-weight: bold;
}
.customerGraph_data .caption {
  display: flex;
  flex-direction: column;
  line-height: 1.8;
  margin-top: 5px;
  letter-spacing: 0.1em;
}
.customerGraph_data .caption > span {
  padding: 0 5px;
}
.c01 .caption > span + span {
  border-top: 1px solid #0f4b7d;
}
.c02 .caption > span + span {
  border-top: 1px solid #00a0b7;
}
.c03 .caption > span + span {
  border-top: 1px solid #0089b7;
}
.approximately{
  margin-right: 6em;
  line-height: 1em;
}
.customerGraph_name {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
  line-height: 1.5;
}
@media screen and (max-width: 900px) {
  .customerGraph_list {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .customerGraph_list > li {
    width: 35%;
    max-width: 290px;
  }
  .customerGraph_list > li:nth-child(n + 3) {
    margin-top: 30px;
  }
  .approximately{
    margin-right: 4.8em;
  }
}
@media screen and (max-width: 768px) {
  .customerGraph_data .percentage {
    font-size: 20px;
  }
  .customerGraph_name {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .customerGraph_list > li {
    width: 40%;
    max-width: 290px;
  }
  .customerGraph_data {
    height: calc(100% - 16px);
    width: calc(100% - 16px);
  }
  .customerGraph_data .caption {
    margin-top: 0;
    font-size: 12px;
  }
  .customerGraph_data .percentage {
    font-size: 18px;
  }
  .approximately{
    margin-right: 4em;
  }
}

/* mv curtain  */
.mv_personList li:nth-child(1) .curtain {
  background-color: #37bfff;
}
.mv_personList li:nth-child(2) .curtain {
  background-color: #ff8ec2;
}
.mv_personList li:nth-child(3) .curtain {
  background-color: #08c79d;
}
.mv_personList li:nth-child(4) .curtain {
  background-color: #ffdf00;
}
.mv_personList li:nth-child(5) .curtain {
  background-color: #b899f7;
}

/*  mv  */