@charset "UTF-8";

.lh-15 {
  line-height: 1.5em;
}

.lh-20 {
  line-height: 2em;
}

.mt-20 {
  margin-top: 20px;
}

/*-------------------------------------------------------

メインビジュアル

----------------------------------------------------------*/
.h2-img-ttl {
  padding-top: calc(623 / 1366 * 100%);
  background: url(/recruit/images/people/interviewer01_mv.png) top center /
    cover no-repeat;
}

@media screen and (max-width: 767px) {
  .h2-img-ttl {
    padding-top: calc(340 / 375 * 100%);
    background: url(/recruit/images/people/interviewer01_mv_sp.png) top center /
      cover no-repeat;
  }
}

.posi-rel {
  position: relative;
}

/**
.mv-subttl_inline {
  max-width: 1070px;
  margin-left: auto;
  margin-right: auto;
}

.mv-subttl {
  width: 322px;
  height: 95px;
  padding-top: 20px;
  padding-left: 34px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}

.mv-subttl01 {
  font-size: 26px;
  font-weight: bold;
  color: #000;
}

.mv-subttl02 {
  font-weight: bold;
  color: #000;
}

.initial_gold {
  font-weight: bold;
  color: #bdb843;
}

@media screen and (max-width: 767px) {
  .mv-subttl {
    position: relative;
    bottom: 0;
    font-size: 12px;
    line-height: 1.25;
    background-color: #f4f2d7;
    padding-top: 26px;
    padding-left: 20px;
    width: 100%;
  }

  .mv-subttl01 {
    font-size: 22px;
  }
}**/

.mv-txt {
  display: inline-block;
  color: #fff;
  background-color: #ebb912;
  padding: 40px 86px 21px 43px;
  position: absolute;
  right: 0;
  bottom: -97px;
  -webkit-font-smoothing: subpixel-antialiased;
}

.mv-txt span {
  margin-left: 13px;
  font-weight: 700;
}

.mv-txt__wrapper {
  display: flex;
}

@media screen and (max-width: 767px) {
  .mv-txt {
    padding: 24px 10vw 18px 8vw;
    bottom: -159px;
  }

  .mv-txt__wrapper {
    flex-direction: column;
  }
}

.mv-txt img {
  padding-bottom: 12px;
}

.mv-txt_ttl {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3333;
}

.mv-txt__occupation {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  padding-top: 13px;
  margin-top: 23px;
  border-top: 1px solid #fff;
}

.mv-txt__year {
  padding-top: 40px;
  margin-left: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.tb-exc {
  display: block;
}

.tb-only {
  display: none;
}

@media screen and (max-width: 1199px) {
  .mv-txt {
    bottom: -180px;
  }

  .mv-txt_ttl {
    font-size: 20px;
  }

  .tb-exc {
    display: none;
  }

  .tb-only {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .mv-txt img {
    width: 159.63px;
  }

  .mv-txt_ttl {
    font-size: 18px;
  }

  .mv-txt__occupation {
    font-size: 16px;
    margin-top: 15px;
    width: fit-content;
    padding-top: 10px;
  }

  .mv-txt__year {
    padding-top: 0;
    margin-left: 0;
  }

  .tb-exc {
    display: block;
  }

  .tb-only {
    display: none;
  }
}

/*-------------------------------------------------------

私の履歴書

----------------------------------------------------------*/
.my-resume {
  padding: 100px 20px 50px;
  background-color: #fcf5db;
}

.my-resume__wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.my-resume__ttl {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 27px;
  margin-bottom: 20px;
  color: #000000;
}

.my-resume__ttl span {
  padding: 5px 8px;
  color: #fff;
  font-weight: bold;
  background-color: #ebb912;
}

.my-resume .grid-4-12 {
  width: calc(2.064 * (100% / 12) - 12px);
}

.my-resume .grid-8-12 {
  width: calc(9.936 * (100% / 12) - 12px);
}

.font_bold {
  font-weight: bold;
}

@media screen and (max-width: 1199px) {
  .my-resume {
    padding: 220px 20px 50px;
  }
}

@media screen and (max-width: 767px) {
  .my-resume {
    padding-top: 220px;
  }

  .my-resume .grid-4-12 {
    width: 160px;
    margin: 0 auto;
  }

  .my-resume .grid-8-12 {
    width: 100%;
    padding-right: 5.334%;
    padding-left: 5.334%;
  }

  .my-resume__wrap .flex-between-wrap {
    flex-direction: column;
  }

  .my-resume__ttl {
    font-size: 14px;
    text-align: center;
  }
}

/*-------------------------------------------------------

入社のきっかけ

----------------------------------------------------------*/
.how-did {
  padding-top: 126px;
}

.how-did .flex-between-wrap {
  align-items: center;
}

.how-did__ttl {
  font-size: 18px;
  text-align: left;
  /*margin-top: 20px;*/
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

.how-did__ttl span {
  color: #ebb912;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebb912;
}

@media screen and (max-width: 767px) {
  .how-did__ttl {
    margin-top: 30px;
  }
}

.how-did__subttl {
  font-size: 30px;
  font-weight: bold;
  color: #000;
  display: inline;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
  .how-did__subttl {
    font-size: 26px;
  }
}

.pt-40 {
  padding-top: 40px;
}

.how-did-grid-right {
  width: 31vw;
  min-width: 317px;
  max-width: 418px;
  margin: 0 auto 0 6vw;
}

@media screen and (max-width: 767px) {
  .how-did {
    padding-top: 80px;
  }

  .how-did img {
    padding-right: 5.334%;
  }

  .how-did .mt-2-sp {
    margin-top: 0;
  }

  .how-did-grid-right {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 12.267%;
    padding-right: 12.267%;
  }

  .how-did .fs-16 {
    font-size: 16px;
  }
}

/*-------------------------------------------------------

印象深いエピソード

----------------------------------------------------------*/
.episode {
  padding-top: 126px;
}

.episode .flex-between-wrap {
  align-items: center;
}

.episode__ttl {
  font-size: 18px;
  text-align: left;
  /*margin-top: 20px;*/
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

.episode__ttl span {
  color: #ebb912;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebb912;
}

@media screen and (max-width: 767px) {
  .episode__ttl {
    margin-top: 30px;
  }
}

.episode__subttl {
  font-size: 30px;
  font-weight: bold;
  color: #000;
  display: inline;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
  .episode__subttl {
    font-size: 26px;
  }
}

.episode-grid-left {
  width: 31vw;
  min-width: 317px;
  max-width: 418px;
  margin: 0 6vw 0 auto;
}

@media screen and (max-width: 767px) {
  .episode {
    padding-top: 80px;
  }

  .episode img {
    padding-left: 5.334%;
  }

  .episode .mt-2-sp {
    margin-top: 0;
  }

  .episode .episode-grid-left {
    width: 100%;
    max-width: 100%;
    order: 2;
    margin: 0;
    padding-left: 12.267%;
    padding-right: 12.267%;
  }

  .episode figure {
    order: 1;
  }

  .episode .mt-20 {
    margin-top: 40px;
  }

  .episode .fs-16 {
    font-size: 16px;
  }

  .episode-grid-left {
    width: 100%;
  }
}

/*-------------------------------------------------------

これから挑戦したいこと

----------------------------------------------------------*/
.want-to-challenge {
  padding: 126px 20px;
}

.want-to-challenge__ttl {
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}

.want-to-challenge__ttl span {
  color: #ebb912;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebb912;
}

.want-to-challenge__subttl {
  margin: 0 auto;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  color: #000;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 767px) {
  .want-to-challenge__subttl {
    font-size: 26px;
  }
}

@media screen and (max-width: 767px) {
  .want-to-challenge {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 12.267%;
    padding-right: 12.267%;
  }

  .want-to-challenge__ttl {
    text-align: left;
  }

  .want-to-challenge__subttl {
    display: inline-block;
    width: unset;
    text-align: left;
  }

  .want-to-challenge .fs-16 {
    font-size: 16px;
  }
}

/*-------------------------------------------------------

1日のタイムスケジュール

----------------------------------------------------------*/
.time-schedule {
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #fcf5db;
  display: inline-block;
  width: 100%;
}

.time-schedule__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.03em;
  margin-bottom: 40px;
  color: #000;
}

.time-schedule ul {
  max-width: 980px;
  background-image: url("https://www.tocalo.co.jp/recruit/graduate/images/people/time_schedule01.svg");
  background-repeat: no-repeat;
  height: 341px;
}

.time-schedule li {
  position: relative;
  width: 315px;
  height: 134px;
  background: #ffffff;
  padding: 18px 17px 12px;
  font-size: 14px;
  letter-spacing: 0.03em;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  line-height: 1.3333;
  float: left;
}

.time-schedule li:nth-child(1) {
  top: 205px;
}

.time-schedule li:nth-child(2) {
  right: 153px;
}

.time-schedule li:nth-child(3) {
  top: 205px;
  right: 298px;
}

.time-schedule li:nth-child(4) {
  top: -135px;
  right: -498px;
}

.time-schedule li:nth-child(5) {
  top: 70px;
  right: -348px;
}

.time-schedule li:after {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(255, 255, 255, 0);
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-left-width: 10px;
  border-right-width: 10px;
}

.time-schedule li:nth-child(odd):after {
  border-bottom-color: #ffffff;
  bottom: 100%;
}

.time-schedule li:nth-child(even):after {
  border-top-color: #ffffff;
  top: 100%;
}

.time-schedule li:nth-child(1):after {
  margin-left: 8px;
}

.time-schedule li:nth-child(2):after {
  margin-left: 72px;
}

.time-schedule li:nth-child(3):after {
  margin-left: 130px;
}

.time-schedule li:nth-child(4):after {
  margin-left: 188px;
}

.time-schedule li:nth-child(5):after {
  margin-left: 252px;
}

.time-schedule__time {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #ebb912;
}

.time-schedule h4 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000;
}

@media screen and (max-width: 980px) {
  .time-schedule {
    padding-top: 80px;
  }

  .time-schedule__ttl {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .time-schedule ul {
    max-width: 75vw;
    background-image: url("https://www.tocalo.co.jp/recruit/graduate/images/people/time_schedule01_sp.svg");
    height: 720px;
  }

  .time-schedule li {
    position: relative;
    width: 61vw;
    height: 123px;
    padding: 19px 17px 12px;
    font-size: 14px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    line-height: 1.5;
    float: left;
    left: 52px;
  }

  .time-schedule li:nth-child(1) {
    top: 0;
  }

  .time-schedule li:nth-child(2) {
    right: 0;
  }

  .time-schedule li:nth-child(3) {
    top: 0;
    right: 0;
  }

  .time-schedule li:nth-child(4) {
    top: 0;
    right: 0;
  }

  .time-schedule li:nth-child(5) {
    top: 0;
    right: 0;
  }

  .time-schedule li:not(:first-child) {
    margin-top: 25px;
  }

  .time-schedule li:after {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
    border-right-width: 18px;
    border-right-color: #ffffff;
  }

  .time-schedule li:nth-child(odd):after {
    border-bottom-color: #ffffff00;
    bottom: 0;
    right: 100%;
  }

  .time-schedule li:nth-child(even):after {
    border-top-color: #ffffff00;
    top: 0;
    right: 100%;
  }

  .time-schedule li:nth-child(1):after {
    margin-left: 0px;
    margin-bottom: 67px;
  }

  .time-schedule li:nth-child(2):after {
    margin-left: 0px;
    margin-top: 30px;
  }

  .time-schedule li:nth-child(3):after {
    margin-left: 0px;
    margin-bottom: 67px;
  }

  .time-schedule li:nth-child(4):after {
    margin-left: 0px;
    margin-top: 30px;
  }

  .time-schedule li:nth-child(5):after {
    margin-left: 0px;
    margin-bottom: 67px;
  }

  .time-schedule__time {
    font-size: 14px;
    margin-bottom: 5px;
    width: 52px;
    float: left;
  }

  .time-schedule h4 {
    font-size: 18px;
    margin-bottom: 5px;
  }
}

/*-------------------------------------------------------

オフの時間の過ごし方

----------------------------------------------------------*/
.grid-32 {
  width: 32%;
}

.grid-59 {
  width: 59%;
}

.w-524 {
  width: 524px;
}

.mtb-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.day-off {
  padding-top: 80px;
  padding-bottom: 100px;
  clear: both;
}

@media screen and (max-width: 767px) {
  .day-off {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.day-off__contents {
  margin-top: 10px;
  max-width: 888px;
}

@media screen and (max-width: 767px) {
  .day-off__contents {
    display: block;
  }

  .day-off__contents figure:first-child {
    width: 200px;
    margin: 0 auto;
  }

  .day-off__contents div:nth-child(2) {
    width: 75%;
    margin: 0 auto;
    font-size: 16px;
  }

  .day-off__sp-subttl {
    width: 100%;
    text-align: center;
    padding-top: 40px;
  }
}

.day-off__ttl {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 5em;
  letter-spacing: 0.03em;
  position: relative;
  color: #000;
}

.day-off__ttl::after {
  content: url(../../images/people/offtime.png);
  position: absolute;
  bottom: -55px;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .day-off__ttl {
    font-size: 20px;
  }

  .day-off__ttl::after {
    transform: scale(0.6) translate(-83%, -15%);
  }
}

.day-off__subttl {
  font-size: 26px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0.03em;
  color: #000000;
}

@media screen and (max-width: 767px) {
  .day-off__subttl {
    font-size: 24px;
    text-align: center;
    line-height: 1.5;
  }

  .w-524 {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .day-off__text {
    width: 100%;
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/*-------------------------------------------------------

他の先輩を見る

----------------------------------------------------------*/

.other-senior {
  padding-top: 90px;
  margin-bottom: 90px;
  border-top: 1px solid #707070;
  position: relative;
}

.other-senior__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 33px;
  margin-bottom: 47.7px;
  color: #000;
}

@media screen and (max-width: 767px) {
  .other-senior__ttl {
    font-size: 20px;
  }
}

.Occupation-tag {
  width: 100px;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0.03em;
  color: #fff;
  margin-top: -15px;
  padding: 2px;
}

.Occupation-tag__color1 {
  background-color: #e06d6d;
}

.Occupation-tag__color2 {
  background-color: #ebb912;
}

.WorkLocation {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}

.WorkLocation .font-bold {
  font-size: 16px;
  font-weight: 700;
}

.other-senior .common-btn-5 {
  margin-top: 50px;
}

.other-senior .slider li {
  position: relative;
}

.other-senior .arrow-btn {
  position: absolute;
  right: 0;
}

@media screen and (max-width: 767px) {
  .other-senior {
    padding-bottom: 80px;
    margin-bottom: 46px;
  }

  .other-senior .arrow-btn {
    margin: -30px 10px auto auto;
  }
}

* 矢印用スタイル */ .prev-arrow,
.next-arrow {
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
}

.prev-arrow {
  left: -20px;
}

.next-arrow {
  right: -20px;
}