/**
 * interview.scss
 */
/* reset
--------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  border: none;
}

/* img */
img,
div, p, blockquote,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
form, fieldset, textarea,
address,
article, aside, dialog, figure, footer, header, hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  text-decoration: none;
  list-style-type: none;
}

/* html5 */
article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
}

/* heading */
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

/* table */
table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
  vertical-align: top;
}

/* a */
a, a:focus, a:hover, a:active {
  outline: none;
}

/* img */
img {
  vertical-align: top;
}

/* commonStyle
--------------------------------------------------*/
.interviewTitle {
  padding-top: 25px;
  position: relative;
}
.interviewTitle .interviewTitleEn {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 324px;
  height: 117px;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(/contents/interview/img/interview-title.svg) no-repeat center center;
  background-size: contain;
}

.sectionTitle {
  margin-bottom: 25px;
}

.switchingBtn {
  top: 235px;
  width: 56px;
  box-sizing: border-box;
  height: 328px;
  border: 1px solid #000;
  border-right: none;
  border-radius: 20px 0 0 20px;
  right: 0;
  background: #fff;
  position: absolute;
  z-index: 10;
}
.switchingBtn.is-fixed {
  position: fixed;
  top: 56px;
}
.switchingBtn.off {
  display: none;
}
.switchingBtn .icon {
  position: absolute;
  left: 50%;
  margin-left: -12px;
  width: 24px;
  height: 24px;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(/jobfind-pc/original/images/common/icon-good.svg) no-repeat center center;
  background-size: contain;
}
.switchingBtn .ttl {
  position: absolute;
  width: 16px;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  left: 50%;
  margin-left: -8px;
}
.switchingBtn:before {
  position: absolute;
  right: 0;
  bottom: 55px;
  content: "";
  width: 100%;
  height: 1px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 2 50%, color-stop(0%, #000000), color-stop(50%, #000000), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left, #000000, #000000 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px);
  background-image: -webkit-linear-gradient(left, #000000, #000000 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px);
  background-image: linear-gradient(to right, #000000, #000000 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px);
  background-size: 3px 1px;
  background-position: top;
  background-repeat: repeat-x;
}
.switchingBtn:after {
  position: absolute;
  right: 15px;
  bottom: 25px;
  content: "";
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 18px;
  height: 8px;
  background: url(/jobfind-pc/original/images/common/arw01-r_b.svg) no-repeat center center;
  background-size: contain;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.switchingBtn.nextBtn .icon {
  top: 20px;
}
.switchingBtn.nextBtn .ttl {
  top: 58px;
  height: 158px;
  background: url(/contents/interview/img/txt_dispatch.svg) no-repeat center center;
  background-size: contain;
}
.switchingBtn.prevBtn .icon {
  top: 20px;
}
.switchingBtn.prevBtn .ttl {
  top: 58px;
  height: 196px;
  background: url(/contents/interview/img/txt_direct.svg) no-repeat center center;
  background-size: contain;
}
.noTouch .switchingBtn:hover {
  cursor: pointer;
}
.noTouch .switchingBtn:hover:after {
  -moz-animation: arw 1s cubic-bezier(0.78, 0.07, 0, 1) normal;
  -webkit-animation: arw 1s cubic-bezier(0.78, 0.07, 0, 1) normal;
  animation: arw 1s cubic-bezier(0.78, 0.07, 0, 1) normal;
}

@media only screen and (min-width: 767px) and (max-height: 470px) {
  .switchingBtn.is-fixed {
    position: absolute;
    top: 235px;
  }
}
#switching {
  position: relative;
}

.staff + .staff {
  margin-top: 120px;
}
.staff .staffTitleImg {
  margin-bottom: 70px;
  position: relative;
  height: 400px;
  border-radius: 120px 0 112px 0;
  border-top: 1px solid #fff;
}
.staff .staffTitleImg:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: url(/jobfind-pc/original/images/common/bg.svg);
  top: 10px;
  left: 10px;
  position: absolute;
  z-index: -1;
  border-radius: 120px 0 120px 0;
}
.staff .staffTitleImg .txtArea {
  position: absolute;
  top: 60px;
  right: 45px;
  width: 480px;
}
.staff .staffTitleImg .txtArea .copy {
  margin-bottom: 40px;
}
.staff .staffTitleImg .txtArea .copy span {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  text-indent: -6000px;
}
.staff .staffTitleImg .txtArea .staffData .name {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}
.staff .staffTitleImg .txtArea .staffData .name span {
  color: #f3ce00;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: normal;
  font-size: 20px;
  padding-left: 28px;
}
.staff .staffTitleImg .txtArea .staffData .data {
  font-size: 12px;
  color: #666666;
  font-weight: 700;
}
.staff#staff01 .staffTitleImg {
  background: url(/contents/interview/img/staff01-img01.jpg) no-repeat center center;
  background-size: cover;
}
.staff#staff01 .txtArea .copy span {
  width: 472px;
  height: 148px;
  background: url(/contents/interview/img/staff01-copy.svg) no-repeat center center;
  background-size: contain;
}
.staff#staff02 .staffTitleImg {
  background: url(/contents/interview/img/staff02-img01.jpg) no-repeat center center;
  background-size: cover;
}
.staff#staff02 .txtArea .copy span {
  width: 404px;
  height: 148px;
  background: url(/contents/interview/img/staff02-copy.svg) no-repeat center center;
  background-size: contain;
}
.staff#staff03 .staffTitleImg {
  background: url(/contents/interview/img/staff03-img01.jpg) no-repeat center center;
  background-size: cover;
}
.staff#staff03 .txtArea .copy span {
  width: 436px;
  height: 148px;
  background: url(/contents/interview/img/staff03-copy.svg) no-repeat center center;
  background-size: contain;
}
.staff#staff03 .txtArea .staffData .name {
  color: #fff;
}
.staff#staff03 .txtArea .staffData .data {
  color: #fff;
}
.staff .staffWrap {
  max-width: 970px;
  margin: 0 auto;
}
.staff .staffWrap p {
  line-height: 2;
}
.staff .staffWrap p + p {
  margin-top: 10px;
}
.staff .staffWrap .leadArea {
  margin-bottom: 80px;
}
.staff .staffWrap .boxLayout {
  zoom: 1;
  position: relative;
}
.staff .staffWrap .boxLayout:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
.staff .staffWrap .boxLayout + .boxLayout {
  margin-top: 80px;
}
.staff .staffWrap .boxLayout .img {
  position: absolute;
  top: 0;
  overflow: hidden;
}
.staff .staffWrap .boxLayout .img img {
  max-width: 100%;
  height: auto;
}
.staff .staffWrap .boxLayout .txtArea {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}
.staff .staffWrap .boxLayout .txtArea .inner {
  background: #fff;
}
.staff .staffWrap .boxLayout.left .img {
  border-radius: 60px 0 0 0;
}
.staff .staffWrap .boxLayout.left .txtArea {
  float: right;
  width: 470px;
}
.staff .staffWrap .boxLayout.left .txtArea .inner {
  border-radius: 60px 0 0 0;
  padding: 40px 0 0 40px;
}
.staff .staffWrap .boxLayout.right .img {
  right: 0;
  border-radius: 0 60px 0 0;
}
.staff .staffWrap .boxLayout.right .txtArea {
  width: 520px;
}
.staff .staffWrap .boxLayout.right .txtArea .inner {
  border-radius: 0 60px 0 0;
  padding: 40px 40px 0 40px;
}

/* TB */
@media only screen and (max-width: 1100px) {
  .interviewTitle .interviewTitleEn {
    width: 200px;
  }

  .staff .staffTitleImg {
    margin-bottom: 23px;
    height: auto;
    border-radius: 0;
    background: none;
  }
  .staff .staffTitleImg:before {
    display: none;
  }
  .staff .staffTitleImg .txtArea {
    position: static;
    width: auto;
  }
  .staff .staffTitleImg .txtArea .imgSp {
    border-top: 1px solid #fff;
    position: relative;
    height: auto;
    padding-top: 40%;
    border-radius: 60px 0 52px 0;
    margin-bottom: 25px;
  }
  .staff .staffTitleImg .txtArea .imgSp:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: url(/jobfind-pc/original/images/common/bg.svg);
    top: 10px;
    left: 10px;
    position: absolute;
    z-index: -1;
    border-radius: 60px 0 60px 0;
  }
  .staff .staffTitleImg .txtArea .imgSp .copy {
    position: absolute;
    right: 20px;
    bottom: 20px;
    margin-bottom: 0;
  }
  .staff .staffTitleImg .txtArea .staffData {
    padding: 0 12px;
  }
  .staff#staff01 .staffTitleImg {
    background: none;
  }
  .staff#staff01 .staffTitleImg .txtArea .imgSp {
    background: url(/contents/interview/img/staff01-img01.jpg) no-repeat top center;
    background-size: cover;
  }
  .staff#staff01 .staffTitleImg .txtArea .imgSp .copy span {
    width: 236px;
    height: 74px;
  }
  .staff#staff02 .staffTitleImg {
    background: none;
  }
  .staff#staff02 .staffTitleImg .txtArea .imgSp {
    background: url(/contents/interview/img/staff02-img01.jpg) no-repeat top center;
    background-size: cover;
  }
  .staff#staff02 .staffTitleImg .txtArea .imgSp .copy span {
    width: 202px;
    height: 74px;
  }
  .staff#staff03 .staffTitleImg {
    background: none;
  }
  .staff#staff03 .staffTitleImg .txtArea .imgSp {
    background: url(/contents/interview/img/staff03-img01.jpg) no-repeat top center;
    background-size: cover;
  }
  .staff#staff03 .staffTitleImg .txtArea .imgSp .copy span {
    width: 218px;
    height: 74px;
  }
  .staff#staff03 .staffTitleImg .txtArea .staffData .name {
    color: #000000;
  }
  .staff#staff03 .staffTitleImg .txtArea .staffData .data {
    color: #666666;
  }
  .staff .staffWrap .leadArea {
    padding: 0 12px;
  }
  .staff .staffWrap .boxLayout .txtArea {
    padding-top: 300px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .interviewTitle {
    display: none;
  }

  .switchingBtn {
    top: 200px;
    width: 36px;
    height: 209px;
    border-radius: 10px 0 0 10px;
  }
  .switchingBtn.is-fixed {
    position: fixed;
    top: 100px;
  }
  .switchingBtn .icon {
    margin-left: -6px;
    width: 12px;
    height: 12px;
  }
  .switchingBtn .ttl {
    width: 10px;
    margin-left: -5px;
  }
  .switchingBtn:before {
    bottom: 35px;
  }
  .switchingBtn:after {
    position: absolute;
    right: 9px;
    bottom: 15px;
  }
  .switchingBtn.nextBtn .icon {
    top: 15px;
  }
  .switchingBtn.nextBtn .ttl {
    top: 33px;
    height: 100px;
  }
  .switchingBtn.prevBtn .icon {
    top: 15px;
  }
  .switchingBtn.prevBtn .ttl {
    top: 33px;
    height: 123px;
  }

  .staff + .staff {
    margin-top: 60px;
  }
  .staff .staffTitleImg .txtArea .imgSp {
    height: 200px;
    padding-top: 0;
  }
  .staff .staffTitleImg .txtArea .staffData .name {
    font-size: 26px;
    margin-bottom: 2px;
  }
  .staff .staffTitleImg .txtArea .staffData .name span {
    font-size: 16px;
    padding-left: 12px;
  }
  .staff .staffTitleImg .txtArea .staffData .data {
    font-size: 11px;
    font-weight: normal;
  }
  .staff .staffWrap .quoteTitle {
    text-align: left;
    padding-left: 0.9em;
    text-indent: -0.9em;
    letter-spacing: 0.04em;
  }
  .staff .staffWrap p {
    line-height: 1.8;
  }
  .staff .staffWrap p + p {
    margin-top: 10px;
  }
  .staff .staffWrap .leadArea {
    margin-bottom: 40px;
  }
}
/* SP */
@media only screen and (max-width: 520px) {
  .staff .staffWrap .boxLayout + .boxLayout {
    margin-top: 40px;
  }
  .staff .staffWrap .boxLayout .img {
    width: 100%;
    position: absolute;
    top: 0;
  }
  .staff .staffWrap .boxLayout .img img {
    width: 100%;
    height: auto;
  }
  .staff .staffWrap .boxLayout .txtArea {
    padding-top: 200px;
  }
  .staff .staffWrap .boxLayout.left .txtArea {
    float: right;
    width: auto;
    margin-left: 10px;
  }
  .staff .staffWrap .boxLayout.left .txtArea .inner {
    border-radius: 60px 0 0 0;
    padding: 30px 12px 0 20px;
  }
  .staff .staffWrap .boxLayout.right .img {
    right: 0;
    border-radius: 0 60px 0 0;
  }
  .staff .staffWrap .boxLayout.right .txtArea {
    width: auto;
    margin-right: 10px;
  }
  .staff .staffWrap .boxLayout.right .txtArea .inner {
    border-radius: 0 60px 0 0;
    padding: 30px 20px 0 12px;
  }
}