@charset "UTF-8";
/* ==========================================================================//
//
// 社員を知る 扉ページ
//
// ========================================================================== */
/* セクションタイトル */
.sec_ttl {
  position: relative;
  z-index: 1;
  text-align: center;
  --width: 240px;
}
@media all and (max-width: 750px) {
  .sec_ttl {
    margin-bottom: 40px;
  }
}
@media all and (min-width: 751px) {
  .sec_ttl {
    --width: 300px;
  }
}
.sec_ttl .jp {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.2em;
}
@media all and (min-width: 1000px) {
  .sec_ttl .jp {
    font-size: 21px;
  }
}
.sec_ttl .en {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: var(--width);
  width: 100%;
  z-index: -1;
}
@media all and (min-width: 751px) {
  .sec_ttl .en {
    width: var(--width);
  }
}

/* interview
---------------------------------------------------------- */
section.interview {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: repeating-linear-gradient(0, #ddf0f9, #ddf0f9 10px, #fff 10px, #fff 20px);
  padding: 56px 0;
}
@media all and (min-width: 751px) {
  section.interview {
    padding: 100px 0;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.interview {
    padding: 60px 0;
  }
}
section.interview .container {
  position: relative;
}
@media all and (min-width: 751px) {
  section.interview .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}
section.interview .sec_ttl {
  --width: 240px;
}
@media all and (max-width: 750px) {
  section.interview .splide_wrap {
    margin: 0 calc(50% - 50vw) 40px;
  }
}
section.interview .splide_wrap .splide__track {
  overflow: visible;
}
@media all and (min-width: 751px) {
  section.interview .splide_wrap .splide__list .splide__slide {
    width: 29.8%;
  }
}
section.interview .splide_wrap .splide__list .splide__slide a {
  position: relative;
  display: block;
}
section.interview .splide_wrap .splide__list .splide__slide a .profile {
  position: absolute;
  bottom: 0;
  left: -10px;
  background-color: #595757;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  padding: 0.8em 1.5em;
}
@media all and (min-width: 1000px) {
  section.interview .splide_wrap .splide__list .splide__slide a .profile {
    left: -20px;
    font-size: 14px;
  }
}
section.interview .splide_wrap .splide__list .splide__slide a .profile .position {
  margin-bottom: 0.2em;
}
section.interview .splide_wrap .splide__list .splide__slide a .profile .name {
  font-size: 1.3em;
}
@media all and (min-width: 751px) {
  section.interview .splide_wrap .splide__list .splide__slide a .profile .name {
    font-size: 1.42em;
  }
}
@media (hover: hover) {
  section.interview .splide_wrap .splide__list .splide__slide a {
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
  }
  section.interview .splide_wrap .splide__list .splide__slide a:hover {
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }
}
@media all and (min-width: 751px) {
  section.interview .splide_wrap .splide.is-initialized:not(.is-active) .splide__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5.2%;
  }
}
section.interview .bg_img {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: min(462px, 123%);
  height: 100%;
  mix-blend-mode: multiply;
}
@media all and (min-width: 501px) {
  section.interview .bg_img {
    top: 53%;
    left: 54%;
    width: min(1413px, 101%);
    height: 105%;
  }
}
section.interview .bg_img img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

/* crosstalk
---------------------------------------------------------- */
section.crosstalk {
  background-color: #4AB9A2;
  background-image: url(../../images/interview/crosstalk_bg_sp.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media all and (min-width: 751px) {
  section.crosstalk {
    background-image: url(../../images/interview/crosstalk_bg_pc.svg);
  }
}
@media all and (min-width: 751px) {
  section.crosstalk {
    --inner_padding: 40;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.crosstalk .inner {
    padding: 0 40px;
  }
}
section.crosstalk .container {
  position: relative;
  padding: 56px 0;
}
@media all and (min-width: 751px) {
  section.crosstalk .container {
    padding: 145px 0 100px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.crosstalk .container {
    padding: 120px 0 80px;
  }
}
section.crosstalk .sec_ttl {
  --width: 276px;
}
@media all and (min-width: 751px) {
  section.crosstalk .sec_ttl {
    --width: 345px;
    position: absolute;
    top: 8%;
    left: 12.3%;
  }
}
@media all and (min-width: 751px) and (max-width: 1200px) {
  section.crosstalk .sec_ttl {
    --width: 240px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.crosstalk .sec_ttl {
    --width: 200px;
  }
}
section.crosstalk .image_wrap {
  position: relative;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.26, 1, 0.69, 1.24);
  transition: -webkit-transform 0.4s cubic-bezier(0.26, 1, 0.69, 1.24);
  transition: transform 0.4s cubic-bezier(0.26, 1, 0.69, 1.24);
  transition: transform 0.4s cubic-bezier(0.26, 1, 0.69, 1.24), -webkit-transform 0.4s cubic-bezier(0.26, 1, 0.69, 1.24);
}
@media all and (min-width: 751px) {
  section.crosstalk .image_wrap {
    width: min(752px, 57%);
    margin-inline: auto;
  }
}
section.crosstalk .image_wrap p {
  position: absolute;
  top: -10%;
  right: 0;
  -webkit-transform: rotate(14deg);
          transform: rotate(14deg);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.16em;
  font-size: 18px;
  pointer-events: none;
}
@media all and (min-width: 751px) {
  section.crosstalk .image_wrap p {
    top: -45px;
    right: -3.9%;
    -webkit-transform: translateX(100%) rotate(14deg);
            transform: translateX(100%) rotate(14deg);
    font-size: 2.4vw;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.crosstalk .image_wrap p {
    top: -20px;
    right: 10px;
  }
}
@media all and (min-width: 1401px) {
  section.crosstalk .image_wrap p {
    font-size: 34px;
  }
}
@media (hover: hover) {
  section.crosstalk .image_wrap a .image {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  section.crosstalk .image_wrap a:hover .image {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
section.crosstalk .image_wrap.animated {
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media all and (max-width: 750px) {
  section.crosstalk .staff_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 40px 14px;
    margin-top: 5px;
    margin-bottom: 40px;
  }
}
section.crosstalk .staff_list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media all and (max-width: 750px) {
  section.crosstalk .staff_list > li {
    width: calc((100% - 14px) / 2);
  }
  section.crosstalk .staff_list > li:nth-child(odd) {
    margin-top: -12%;
  }
  section.crosstalk .staff_list > li.staff01 {
    width: 41%;
  }
  section.crosstalk .staff_list > li.staff04 {
    padding: 0 6% 0 5%;
  }
  section.crosstalk .staff_list > li.staff03 {
    padding-right: 12%;
  }
}
@media all and (min-width: 751px) {
  section.crosstalk .staff_list > li {
    position: absolute;
  }
  section.crosstalk .staff_list > li.staff01 {
    width: 11%;
    top: 23.4%;
    left: 0;
  }
  section.crosstalk .staff_list > li.staff02 {
    width: 12%;
    bottom: 5.8%;
    left: 12.1%;
  }
  section.crosstalk .staff_list > li.staff02 .profile {
    position: absolute;
    bottom: 0;
    right: -8px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  section.crosstalk .staff_list > li.staff04 {
    width: 9%;
    top: 33.7%;
    right: 0;
  }
  section.crosstalk .staff_list > li.staff03 {
    width: 9.3%;
    bottom: 28px;
    right: 11.5%;
  }
  section.crosstalk .staff_list > li.staff03 .profile {
    position: absolute;
    bottom: 0;
    right: -8px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
section.crosstalk .staff_list > li .profile {
  white-space: nowrap;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  margin-top: 10px;
}
@media all and (min-width: 751px) {
  section.crosstalk .staff_list > li .profile {
    font-size: 14px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  section.crosstalk .staff_list > li .profile {
    font-size: 12px;
  }
}
section.crosstalk .staff_list > li .profile .position {
  margin-bottom: 0.2em;
}
section.crosstalk .staff_list > li .profile .name {
  font-size: 1.3em;
}
@media all and (min-width: 751px) {
  section.crosstalk .staff_list > li .profile .name {
    font-size: 1.42em;
  }
}