@charset "UTF-8";
@media screen and (max-width: 1024px) {
  /* -----------------------------
      RECRUIT FLOW
  -------------------------------*/
  .recruit .stepItem {
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 896px) {
  /* -----------------------------
      RECRUIT FLOW
  -------------------------------*/
  .recruit .stepItem {
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px auto;
  }
  .recruit .stepItem .circle {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .recruit .stepItem .no {
    font-size: 35px;
  }
  .recruit .stepItem .step1::after,
  .recruit .stepItem .step2::after,
  .recruit .stepItem .step3::after,
  .recruit .stepItem .step4::after {
    top: 100%;
    left: 50%;
    height: 20px;
    border-bottom: initial;
    border-left: solid 1px #5f9ea0;
  }
  .recruit .stepItem dt {
    padding: 0 20px 10px 20px;
  }
  /* -----------------------------
      MEMBER
  -------------------------------*/
}
@media screen and (max-width: 767px) {
  h3 {
    margin-bottom: 20px;
  }
  h3 .enTit {
    font-size: 32px;
  }
  h3 small {
    padding-top: 14px;
  }
  /* two column     -------------*/
  .column2 {
    width: 100%;
    display: block;
  }
  /* lower title     -------------*/
  .pageTit {
    padding: 35px 0;
  }
  .pageTit img {
    width: 50px;
    height: auto;
    margin-bottom: 10px;
  }
  .pageTit h2 {
    font-size: 16px;
  }
  .vision .pageTit,
  .service .pageTit,
  .member .pageTit,
  .news .pageTit {
    background-position: center;
  }
  /* table     -------------*/
  dl.tableStyle dt {
    width: auto;
    float: none;
    line-height: 1;
    border-bottom: none;
    padding: 15px 15px 5px;
  }
  dl.tableStyle dd {
    margin-left: 0;
    border-bottom: 1px solid #eeeeee;
    line-height: 1.6;
    padding: 0 15px 15px;
  }
  dl.tableStyle dd.lineName span {
    display: block;
    padding-right: 0;
    white-space: unset;
  }
  dl.tableStyle dd:last-child {
    border-bottom: none;
  }
  /* contact     -------------*/
  .contactWrap {
    /* margin: 10% 0; */
  }
  /* -----------------------------
      VISION
  -------------------------------*/
  .vision .commentWrap {
    /*
    background: url('/common/img/vision/comment_bk_sp.png') no-repeat left top;
    -moz-background-size: cover;
    background-size: cover;
*/
  }
  .vision .commentWrap.commentWrap_kanemaki{
    padding-top: 17px;
  }
  .vision .commentInner {
    height: auto;
    background: none;

    flex-direction: column;
  }

  .vision .commentImg_sp {
    display: block;
  }
  
  .vision .commentImg_pc {
    display: none;
  }

  .vision .commentTxt {
    width: 100%;
    padding: 45px 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
    text-align: center;
  }
  .vision .commentWrap p.commentTit {
    padding-bottom: 30px;
  }
  .vision .commentWrap p.sign {
    text-align: center;
    padding-top: 40px;
  }
  .vision .commentWrap p.sign img {
    width: 130px;
    height: auto;
  }
  .vision .accessWrap {
    width: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-direction: column-reverse; /* Safari */
    flex-direction: column-reverse;
  }
  .vision .mapWrap #map_canvas {
    height: 224px;
  }
  .vision .accessDit {
    padding: 10px 0 30px 0;
  }
  .vision .accessDit h3 {
    font-size: 15px;
    margin-bottom: 20px;
  }

  /* -----------------------------
      SERVICE
  -------------------------------*/
  /* ancor links    -------------*/
  .ancListWrap {
    display: none;
  }
  #infra,
  #itd,
  #design,
  #itadmin,
  #mad,
  #bpr {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-direction: column-reverse; /* Safari */
    flex-direction: column-reverse;
  }
  .service .tit {
    font-size: 14px;
    padding: 40px 0;
  }
  .service .tit img {
    display: none;
  }
  .service .shr .tit .enTit {
    margin-top: 0;
  }
  .service .dit {
    height: auto;
  }
  .service .dit ul {
    font-size: 16px;
  }
  .service .tit {
    position: relative;
  }
  .service .tit:after {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
    border: 18px solid transparent;
    top: 100%;
    left: 50%;
    margin-left: -18px;
  }
  .service .app .tit:after {
    border-top-color: #f7f0dc;
  }
  .service .infra .tit:after {
    border-top-color: #fbe0da;
  }
  .service .dataservice .tit:after {
    border-top-color: #d4f6e1;
  }
  .service .itd .tit:after {
    border-top-color: #f1f2c8;
  }
  .service .uxdesign .tit:after {
    border-top-color: #dfebfa;
  }
  .service .design .tit:after {
    border-top-color: #d2f0f7;
  }
  .service .qa .tit:after {
    border-top-color: #e3f5cc;
  }
  .service .itadmin .tit:after {
    border-top-color: #eee2f7;
  }
  .service .mad .tit:after {
    border-top-color: #f7f0dc;
  }
  .service .at .tit:after {
    border-top-color: #fbe0da;
  }
  .service .bpr .tit:after {
    border-top-color: #d4f6e1;
  }
  .service .shr .tit:after {
    border-top-color: #dfebfa;
  }

  .service .tit .enTit {
    font-size: 40px;
  }
  .service .tit p {
    margin-top: 20px;
  }
  .service .dit p {
    padding: 30px 5%;
  }
  .service .dit ul {
    padding: 0 5% 40px;
  }
  .service .env {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .service .env dd {
    white-space: normal;
  }
  /* -----------------------------
      MEMBER
  -------------------------------*/

  .member .panel .head {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .member .panel .head .imgWrap {
    display: block;
    width: 100%;
    height: auto;
    max-height: auto;
    overflow: hidden;
    font-size: 0;
  }
  .member .head .title {
    display: block;
    width: 100%;
    max-height: auto;
    /* height: 250px; */
  }
  .member .head .title h3 {
    padding: 4%;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    /* top: 300px; */
    /* margin-top: 0; */
    /* margin-bottom: 0; */
    padding: 5px;
  }
  .member .head .title .num {
    font-size: 45px;
  }
  .member .head .title .txt {
    line-height: 1.6;
    font-size: 20px;
    font-weight: 700;
  }
  .member .head .title .name {
    font-size: 12px;
  }
  .member .panel section h4 {
    font-size: 20px;
  }
  .member .panel section img {
    float: none;
    width: 100%;
    margin: 20px 0 0 0;
  }
  /*
  .member .panel section .leftWrap {
    width: 100%;
    float: none;
    padding-bottom: 15px;
  }
  */
  .member .panel .columnReverse {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-direction: column-reverse; /* Safari */
    flex-direction: column-reverse;
  }

  .member .panel .memFooter .rightWrap p {
    padding-top: 16px;
  }
  .member .panel .memFooter td img {
    padding: 0;
  }

  @media (max-width: 767px) {
    .member .rightElements {
      max-width: 725px;
      width: 95%;
    }
    /* 22/2/2追加 掲載年月の表記 */
    .member .rightElements .publicationDate {
      font-size: 12px;
    }
    /* 2021/1/21追加 過去記事リンクある人のみ適応 */
    .member .rightElements .oldInterviewLink {
      margin-bottom: 90px;
      margin-left: 0;
    }
    .member .rightElements .oldInterviewLink p {
      font-size: 14px;
    }
  }
  .member .memberList {
    max-width: 767px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .member .memberListWrap {
    padding: 0;
  }
  .member .memberList li {
    width: 50%;
    max-width: 270px;
    padding: 0;
    margin: 0;
  }
  .memberHover figcaption {
    height: auto;
  }
  .member .memberList li p.name {
    font-size: 16px;
    padding: 0 0 5% 0;
  }
  .member .memberList li p.dep {
    font-size: 11px;
    padding-bottom: 3%;
    min-height: 15%;
    line-height: 1.1;
  }

  .member .memberList li img {
    height: 100%;
    filter: none;
    -webkit-filter: grayscale(0%);
  }
  .memberHover a figcaption {
    opacity: 1;
    top: 72%;
    padding-top: 5%;
  }
  .member .head .title {
    height: auto;
  }
  .member .head .title .name {
    position: relative;
    margin-top: 5%;
    left: 0;
    bottom: 0;
  }
  .member .navLinks.top,
  .member .navLinks.bottom .before,
  .member .navLinks.bottom .next {
    display: none;
  }
  .member .navLinks.bottom .return {
    width: 100%;
  }
  .member .navLinks.bottom .return a {
    display: block;
    margin: 20px auto 40px auto;
    border: 1px solid #0950a0;
    font-size: 14px;
    padding: 15px 0;
    text-align: center;
    -webkit-transition: all 0.1s ease 0s;
    -moz-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
    -ms-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
    width: 90%;
  }
  .member .navLinks.bottom .return a:hover {
    color: #ffffff;
    background: #0950a0;
  }
  .member .navLinks.bottom .return a span {
    padding: 0;
  }

  .member .panel .head .imgWrap img {
    width: 100%;
    height: auto;
  }
  /* -----------------------------
      RECRUIT
  -------------------------------*/
  .recruit .pageTit {
    background-position: right center;
  }
  .recruit .commentWrap {
    background-position: right;
    padding: 50px 0;
  }
  .recruit .commentWrap p.innerTxt {
    font-size: 16px;
  }
  .recruit .requirementsWrap {
    margin-top: 8%;
  }
  .recruit .requirementsWrap h3 {
    font-size: 5vw;
  }
  .recruit .oiwaikin img {
    left: 70%;
  }
  .recruit .flowWrap {
    margin-top: 50px;
  }
  .recruit .flowWrap h3 {
    margin-bottom: 20px;
  }
  .recruit .flow p {
    padding-top: initial;
    font-size: 10px;
  }
  .recruit .apply {
    margin-top: 50px;
  }
  .recruit .msg {
    font-size: 16px;
  }
  .recruit .submsg {
    font-size: 12px;
  }
  .recruit .apply .mailLink {
    margin-top: 30px;
  }
  .recruit .contactList {
    padding: 50px 0;
  }
  .recruit .contactList ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 20px 0;
    display: block;
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  }
  .recruit .contactList ul li img {
    width: 55px;
    height: auto;
  }
  .recruit .contactList ul li .campanyName {
    padding: 0;
  }
  .recruit .contactList ul li .tel {
    font-size: 18px;
    padding: 0;
  }
  .recruit .contactList ul li .mail {
    padding: 0;
  }

  /* -----------------------------
      NEWS
  -------------------------------*/
  .news .lowerNewsWrap li .txt {
    width: 100%;
    padding-left: 2%;
  }
  .memberlist-mini {
    max-width: 767px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .memberlist-mini li {
    width: 50%;
    max-width: 270px;
    padding: 0;
    margin: 0;
  }
  .memberlist-mini li a img {
    width: 100%;
  }

  /* -----------------------------
		CONTACT
  -------------------------------*/
  .form dl {
    display: block;
  }
  
  .form dt,
  .form dd {
    padding: 20px 10px;
    width: calc(100% - 30px)
  }
  .form dd {
    border-bottom: none;
    margin-bottom: 40px;
  }
  .form input[type=text] {
    width: 40%;
  }
  .form input[type=email], .form input[type=tel] {
    width: 80%;
  }
  .form dl dd .radioWrap {
    display: block;
  }
  .form textarea {
    width: calc(100% - 30px);
  }
  .form .checkArea p {
    text-align: left;
  }
}


/* -----------------------------
      FOOTER
  -------------------------------*/
@media (max-width: 425px) {
  dl.txtStyle01 dd,
  .txtStyle02 li,
  .txtStyle02 .txtStyle02_inner ol li,
  .txtStyle02 .txtStyle02_inner ol li ol li,
  .txtStyle02 .txtStyle02_inner ol li ol p,
  .txtStyle02 .txtStyle02_inner .txtStyle02_inner_indent p {
    font-size: 12px;
    line-height: 1.5;
  }
  .txtStyle02 .ruleSetDate,
  .txtStyle02 .ceoName {
    font-size: 12px;
    line-height: 1.5;
  }
}