@charset "UTF-8";
@-webkit-keyframes transformLeftRight {
  0% {
    -webkit-transform: translate(-80%, 80%);
            transform: translate(-80%, 80%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}
@keyframes transformLeftRight {
  0% {
    -webkit-transform: translate(-80%, 80%);
            transform: translate(-80%, 80%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}
@-webkit-keyframes transformRightLeft {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(80%, -80%);
            transform: translate(80%, -80%);
    opacity: 0;
  }
}
@keyframes transformRightLeft {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(80%, -80%);
            transform: translate(80%, -80%);
    opacity: 0;
  }
}
/* ==========================================================================//
//
// インタビュー
//
// ========================================================================== */
/* 社員を知る
---------------------------------------------------------- */
#pageInterview .page_body {
  overflow: hidden;
  padding: 80px 0;
}
@media all and (max-width: 750px) {
  #pageInterview .page_body {
    padding: 0 0 60px;
  }
}

.sec_interview .interview_list {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
@media all and (min-width: 751px) {
  .sec_interview .interview_list {
    padding: 0 20px;
  }
}
.sec_interview .interview_list ul.slider {
  z-index: 1;
  position: relative;
}
@media all and (min-width: 751px) {
  .sec_interview .interview_list ul.slider {
    margin: 40px auto 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
  }
}
.sec_interview .interview_list ul.slider li {
  border-radius: 20px;
  overflow: hidden;
}
@media all and (max-width: 750px) {
  .sec_interview .interview_list ul.slider li {
    margin: 30px 10px;
  }
}
.sec_interview .interview_list ul.slider li a .interview_image {
  position: relative;
}
.sec_interview .interview_list ul.slider li a .interview_image .image {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.sec_interview .interview_list ul.slider li a:hover .interview_image .image {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sec_interview .interview_list ul.slider li .interview_text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
  padding: 20px;
  color: #fff;
}
.sec_interview .interview_list ul.slider li .interview_text .catch {
  width: 100%;
  margin: 12px 0 10px;
}
.sec_interview .interview_list ul.slider li .interview_text span {
  font-size: 12px;
}
.sec_interview .interview_list ul.slider li .interview_text h3 {
  font-size: 24px;
  line-height: 1;
}
.sec_interview .interview_list ul.slider li:nth-child(odd) {
  bottom: -20px;
  position: relative;
}
.sec_interview .interview_list ul.slider li.staff01 .interview_text {
  background-image: url(../../images/top/interview01_bg.png);
}
.sec_interview .interview_list ul.slider li.staff02 .interview_text {
  background-image: url(../../images/top/interview02_bg.png);
}
.sec_interview .interview_list ul.slider li.staff03 .interview_text {
  background-image: url(../../images/top/interview03_bg.png);
}
.sec_interview .interview_list ul.slider li.staff04 .interview_text {
  background-image: url(../../images/top/interview04_bg.png);
}
.sec_interview .interview_image {
  position: relative;
}
.sec_interview .stone.green {
  margin: 21% auto auto -5%;
  width: 6.2vw;
  height: 6vw;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.green {
    margin: 85% auto auto -7%;
    width: 20.2vw;
    height: 16vw;
  }
}
.sec_interview .stone.emerald {
  margin: -10% auto auto 23%;
  width: 9.6vw;
  height: 10vw;
  z-index: -1;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.emerald {
    margin: -7% auto auto 15%;
    width: 26.6vw;
    height: 27vw;
  }
}
.sec_interview .stone.purple {
  margin: 2% auto auto 91%;
  width: 13.6vw;
  height: 12vw;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.purple {
    margin: 64% auto auto 83%;
    width: 42.6vw;
    height: 37vw;
  }
}
.sec_interview .stone.orange {
  margin: 32% auto auto 59%;
  width: 9.68vw;
  height: 9vw;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.orange {
    margin: 85% auto auto 72%;
    width: 25.7vw;
    height: 24vw;
  }
}

/* インタビュー
---------------------------------------------------------- */
@media all and (min-width: 751px) {
  #pageInterview01 .page_body,
  #pageInterview02 .page_body,
  #pageInterview03 .page_body,
  #pageInterview04 .page_body {
    padding: 100px 0;
  }
}
@media all and (max-width: 750px) {
  #pageInterview01 .sec_ttl,
  #pageInterview02 .sec_ttl,
  #pageInterview03 .sec_ttl,
  #pageInterview04 .sec_ttl {
    margin: 30px 0;
  }
}
#pageInterview01 .interview_name,
#pageInterview02 .interview_name,
#pageInterview03 .interview_name,
#pageInterview04 .interview_name {
  position: relative;
  padding: 190px 0 0;
  z-index: 1;
  width: 45%;
}
@media screen and (min-width: 1151px) {
  #pageInterview01 .interview_name,
  #pageInterview02 .interview_name,
  #pageInterview03 .interview_name,
  #pageInterview04 .interview_name {
    width: 30%;
  }
}
@media all and (min-width: 751px) {
  #pageInterview01 .interview_name,
  #pageInterview02 .interview_name,
  #pageInterview03 .interview_name,
  #pageInterview04 .interview_name {
    padding: 140px 0 0;
  }
}
#pageInterview01 .interview_name .catch,
#pageInterview02 .interview_name .catch,
#pageInterview03 .interview_name .catch,
#pageInterview04 .interview_name .catch {
  position: absolute;
  top: 110px;
  height: 62px;
  left: 20px;
}
@media all and (min-width: 751px) {
  #pageInterview01 .interview_name .catch,
  #pageInterview02 .interview_name .catch,
  #pageInterview03 .interview_name .catch,
  #pageInterview04 .interview_name .catch {
    left: 0;
    top: 20px;
    height: 96px;
  }
}
#pageInterview01 .interview_name .catch img,
#pageInterview02 .interview_name .catch img,
#pageInterview03 .interview_name .catch img,
#pageInterview04 .interview_name .catch img {
  height: 100%;
  width: auto;
}
#pageInterview01 .interview_name h1,
#pageInterview02 .interview_name h1,
#pageInterview03 .interview_name h1,
#pageInterview04 .interview_name h1 {
  width: unset;
}
#pageInterview01 .interview_name .interview_unit,
#pageInterview02 .interview_name .interview_unit,
#pageInterview03 .interview_name .interview_unit,
#pageInterview04 .interview_name .interview_unit {
  font-size: 10px;
}
@media all and (min-width: 751px) {
  #pageInterview01 .interview_name .interview_unit,
  #pageInterview02 .interview_name .interview_unit,
  #pageInterview03 .interview_name .interview_unit,
  #pageInterview04 .interview_name .interview_unit {
    font-size: 12px;
  }
}
#pageInterview01 .interview_name .initial_name,
#pageInterview02 .interview_name .initial_name,
#pageInterview03 .interview_name .initial_name,
#pageInterview04 .interview_name .initial_name {
  font-size: 16px;
}
@media all and (min-width: 751px) {
  #pageInterview01 .interview_name .initial_name,
  #pageInterview02 .interview_name .initial_name,
  #pageInterview03 .interview_name .initial_name,
  #pageInterview04 .interview_name .initial_name {
    font-size: 24px;
  }
}
#pageInterview01 .profile_wrap,
#pageInterview02 .profile_wrap,
#pageInterview03 .profile_wrap,
#pageInterview04 .profile_wrap {
  padding: 0 0 40px;
}
#pageInterview01 .profile_wrap .profile_name,
#pageInterview02 .profile_wrap .profile_name,
#pageInterview03 .profile_wrap .profile_name,
#pageInterview04 .profile_wrap .profile_name {
  font-size: 16px;
}
@media all and (max-width: 750px) {
  #pageInterview01 .profile_wrap .profile_name,
  #pageInterview02 .profile_wrap .profile_name,
  #pageInterview03 .profile_wrap .profile_name,
  #pageInterview04 .profile_wrap .profile_name {
    margin: 0 0 10px;
  }
}
#pageInterview01 .profile_wrap .profile_name span,
#pageInterview02 .profile_wrap .profile_name span,
#pageInterview03 .profile_wrap .profile_name span,
#pageInterview04 .profile_wrap .profile_name span {
  display: block;
  font-size: 10px;
}
@media all and (min-width: 751px) {
  #pageInterview01 .profile_wrap .profile_name,
  #pageInterview02 .profile_wrap .profile_name,
  #pageInterview03 .profile_wrap .profile_name,
  #pageInterview04 .profile_wrap .profile_name {
    font-size: 24px;
    margin: 0 0 20px;
  }
  #pageInterview01 .profile_wrap .profile_name span,
  #pageInterview02 .profile_wrap .profile_name span,
  #pageInterview03 .profile_wrap .profile_name span,
  #pageInterview04 .profile_wrap .profile_name span {
    font-size: 12px;
  }
}
@media all and (min-width: 751px) {
  #pageInterview01 .profile_wrap,
  #pageInterview02 .profile_wrap,
  #pageInterview03 .profile_wrap,
  #pageInterview04 .profile_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
            flex-flow: row-reverse;
  }
  #pageInterview01 .profile_wrap .profile_text,
  #pageInterview02 .profile_wrap .profile_text,
  #pageInterview03 .profile_wrap .profile_text,
  #pageInterview04 .profile_wrap .profile_text {
    width: calc(100% - 460px);
  }
  #pageInterview01 .profile_wrap .profile_image,
  #pageInterview02 .profile_wrap .profile_image,
  #pageInterview03 .profile_wrap .profile_image,
  #pageInterview04 .profile_wrap .profile_image {
    width: 500px;
  }
}
@media all and (max-width: 750px) {
  #pageInterview01 .profile_wrap,
  #pageInterview02 .profile_wrap,
  #pageInterview03 .profile_wrap,
  #pageInterview04 .profile_wrap {
    padding: 0 0 40px;
  }
  #pageInterview01 .profile_wrap .profile_image,
  #pageInterview02 .profile_wrap .profile_image,
  #pageInterview03 .profile_wrap .profile_image,
  #pageInterview04 .profile_wrap .profile_image {
    margin: 0px 0 20px;
  }
}
@media all and (max-width: 750px) {
  #pageInterview01 .over_container_text,
  #pageInterview02 .over_container_text,
  #pageInterview03 .over_container_text,
  #pageInterview04 .over_container_text {
    padding: 0 20px 40px;
  }
}
#pageInterview01 .sec_profile01,
#pageInterview01 .sec_profile02,
#pageInterview01 .sec_profile03,
#pageInterview01 .sec_profile04,
#pageInterview02 .sec_profile01,
#pageInterview02 .sec_profile02,
#pageInterview02 .sec_profile03,
#pageInterview02 .sec_profile04,
#pageInterview03 .sec_profile01,
#pageInterview03 .sec_profile02,
#pageInterview03 .sec_profile03,
#pageInterview03 .sec_profile04,
#pageInterview04 .sec_profile01,
#pageInterview04 .sec_profile02,
#pageInterview04 .sec_profile03,
#pageInterview04 .sec_profile04 {
  padding: 40px 0 0;
}
#pageInterview01 .sec_profile03,
#pageInterview02 .sec_profile03,
#pageInterview03 .sec_profile03,
#pageInterview04 .sec_profile03 {
  padding: 40px 0 0;
}
@media all and (min-width: 751px) {
  #pageInterview01 .sec_profile03,
  #pageInterview02 .sec_profile03,
  #pageInterview03 .sec_profile03,
  #pageInterview04 .sec_profile03 {
    padding: 60px 0 0;
  }
}
#pageInterview01 .btn,
#pageInterview02 .btn,
#pageInterview03 .btn,
#pageInterview04 .btn {
  padding: 0 20px 60px;
}
@media all and (min-width: 751px) {
  #pageInterview01 .btn,
  #pageInterview02 .btn,
  #pageInterview03 .btn,
  #pageInterview04 .btn {
    padding: 0 20px 0px;
  }
}