/*--------------- voice（page） ---------------*/
// 02_00_メンバーの声
.page-voice {
  .page-lead {
    padding: $vw60 $vw30;
    background-color: $white;
  }
  .anker {
    padding-top: $vw40;
  }
  .block-voice {
    .block-title {
      margin-bottom: $vw60;
    }
    .voice-list {
      .voice-list-item {
        margin-bottom: $vw80;
      }
    }
  }
  .block-cross-talk {
    .block-title {
      margin-bottom: $vw60;
      .block-title-jp {
        color: $text-color;
      }
    }
    .cross-talk {
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
// 02_01~08_インタビュー
.page-interview {
  // インタビュー
  .page-fv {
    .fv-message {
      margin-bottom: 0;
      color: $blue-100;
    }
  }
  .block-interview {
    .box-list-item {
      &-navy { //数字と見出しの色
        .box-list-item-number {
          color: $blue-100 !important;
        }
        .box-list-item-lead {
          color: $blue-100;
        }
      }
      &-green { //数字と見出しの色
        .box-list-item-number {
          color: $green-300 !important;
        }
        .box-list-item-lead {
          color: $green-300;
        }
      }
    }
    .box-list-item-image {
      margin: $vw80 0;
      img {
        width: 100%;
        height: auto;
      }
    }
    .box-list-triangle {
      position: relative;
      padding: $vw170 $vw70 $vw100;
      .box-list-item-number {
        font-size: $vw90;
        font-weight: $font-weight-bold;
        color: $primary;
        &:before {
          content: none;
        }
        &-navy {
          color: $blue-100;
        }
      }
      .box-list-item-top {
        margin-bottom: $vw60;
      }
      .box-list-item-lead {
        font-size: $vw36;
        font-weight: $font-weight-medium;
      }
      .box-list-item-text {
        font-weight: $font-weight-light;
        letter-spacing: 0;
      }
    }
    .box-image {
      margin-bottom: $vw80;
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
  // 1日のスケジュール
  .block-schedule {
    .schedule-wrap {
      background-color: $white;
    }
    .schedule-fv {
      margin-bottom: $vw120;
      width: 100%;
      img {
        width: 100%;
        height: auto;
      }
    }
    .schedule-detail {
      padding: $vw20;
    }
    .schedule {
      margin-bottom: $vw60;
      &::before {
        height: calc(100% + #{$vw65});
      }
      .schedule-item {
        min-height: $vw270;
        &__text {
          span {
            font-weight: $font-weight-light;
          }
        }
      }
    }
    .schedule-image {
      img {
        width: 100%;
        height: auto;
        &:not(:last-child) {
          margin-bottom: $vw60;
        }
      }
    }
  }
  // メンバーの声
  .block-member-voice {
    .member-voice-title {
      margin-bottom: $vw70;
      font-size: $vw36;
      color: $primary;
      text-align: center;
    }
  }
}
// 02_09_働き方クロストーク
.page-cross-talk {
  .block-cross-talk {
    margin-top: $vw40;
    .talk-member-list {
      margin-bottom: $vw100;
      .talk-member-list-item {
        margin-bottom: $vw30;
        &__title {
          padding-bottom: $vw20;
          font-size: $vw28;
          letter-spacing: $letter-spacing-md;
          line-height: 1.4;
          border-bottom: $vw4 solid $light-green-200;
          span {
            padding-left: $vw24;
            font-weight: $font-weight-medium;
            letter-spacing: 0;
          }
        }
        &__text {
          padding: $vw20 0;
          font-size: $vw28;
          font-weight: $font-weight-light;
          letter-spacing: $letter-spacing-md;
          line-height: 1.4;
        }
        &:not(:last-child) {
          &::after {
            content: "";
            display: block;
            width: $vw86;
            height: $vw86;
            margin: auto;
            background: url("../img/voice/ico_cross_light_green.svg") no-repeat center / $vw86;
          }
        }
      }
    }
    .box-list {
      .box-list-item {
        margin-bottom: $vw40;
        padding: $vw130 $vw20 $vw30;
      }
      .box-list-item-number {
        font-size: $vw42;
        font-weight: $font-weight-bold;
        top: $vw70;
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
        &::before {
          display: none;
        }
      }
      .box-list-item-top {
        display: flex;
        justify-content: center;
        margin-bottom: $vw80;
        .box-list-item-lead {
          position: relative;
          padding-bottom: $vw16;
          font-size: $vw28;
          letter-spacing: $letter-spacing-md;
          text-align: center;
          border-bottom: $vw5 solid $light-green-200;
          &::before {
            content: "";
            position: absolute;
            bottom: (-$vw25);
            right: 0;
            left: 0;
            height: 0;
            width: 0;
            margin: auto;
            border-right: $vw20 solid transparent;
            border-top: $vw24 solid $light-green-200;
            border-left: $vw20 solid transparent;
          }
          &::after {
            content: "";
            position: absolute;
            bottom: (-$vw20);
            right: 0;
            left: 0;
            height: 0;
            width: 0;
            margin: auto;
            border-right: $vw20 solid transparent;
            border-top: $vw24 solid $white;
            border-left: $vw20 solid transparent;
          }
        }
      }
      .talk-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: $vw70;
        &__icon {
          flex-shrink: 0;
          width: $vw190;
          margin-right: $vw40;
          img {
            width: 100%;
            height: auto;
            margin-bottom: $vw30;
          }
          figcaption {
            font-size: $vw28;
            text-align: center;
          }
        }
        &__text {
          font-size: $vw28;
          font-weight: $font-weight-light;
          line-height: 1.8;
        }
        &:nth-child(even) {
          flex-direction: row-reverse;
          .talk-item__icon {
            margin-right: 0;
            margin-left: $vw40;
          }
        }
      }
      .box-list-item-image {
        img {
          width: 100%;
          height: auto;
          margin-bottom: $vw40;
        }
      }
    }
  }
  .block-work-style-link {
    .block-title {
      margin-bottom: $vw100;
    }
    .btn {
      margin-bottom: $vw80;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

//768px〜（TAB）
@include media-breakpoint-md {
  // 02_00_メンバーの声
  .page-voice {
    .main-content {
      padding-top: 180px;
    }
    .page-lead {
      padding: 100px $container-md-padding 0;
      background-color: transparent;
      z-index: 2;
    }
    .anker {
      padding-top: 40px;
    }
    .block-voice {
      .block-title {
        margin-bottom: 40px;
      }
      .voice-list {
        margin-bottom: 0;
        .voice-list-item {
          margin-bottom: 40px;
        }
      }
    }
    .block-cross-talk {
      .block-title {
        margin-bottom: 70px;
      }
    }
  }
  // 02_01~08_インタビュー
  .page-interview {
    .page-fv__image {
      padding-left: 0;
    }
    // インタビュー
    .block-interview {
      margin-top: 165px;
      .block-inner {
        max-width: 1000px;
        margin: 0 auto;
      }
      .box-list-item-wrap {
        position: relative;
      }
      .box-list-triangle {
        padding: 160px 100px 100px;
        .box-list-item-number {
          font-size: $rem90;
        }
        .box-list-item-top {
          margin-bottom: 40px;
        }
        .box-list-item-lead {
          font-size: $rem24;
          font-weight: $letter-spacing-xl;
        }
      }
    }
    // 1日のスケジュール
    .block-schedule {
      .schedule-wrap {
        padding: 0;
      }
      .schedule-fv {
        margin-bottom: 0;
      }
      .schedule-detail {
        padding: 105px 40px;
      }
      .schedule {
        flex-shrink: 0;
        margin-bottom: 0;
        &::before {
          height: 100%;
        }
        .schedule-item {
          min-height: 174px;
          &__title {
            color: $white;
            background-color: $primary;
            &::after {
              border-left: 13px solid $primary;
            }
          }
          &__text {
            span {
              font-weight: $font-weight-light;
            }
          }
        }
      }
      .schedule-image {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        margin: 0 -2.5%;
        img {
          width: calc(50% - 5%);
          margin: 0 2.5%;
          &:not(:last-child) {
            margin-bottom: 0;
          }
        }
      }
    }
    // メンバーの声
    .block-member-voice {
      .member-voice-title {
        margin-bottom: 40px;
        font-size: $rem24;
      }
    }
  }
  // 02_09_働き方クロストーク
  .page-cross-talk {
    .block-cross-talk {
      margin-top: 30px;
      .talk-member-list {
        margin-bottom: 100px;
        .talk-member-list-item {
          position: relative;
          margin-bottom: 10px;
          &__title {
            padding-bottom: 14px;
            font-size: $rem16;
            border-bottom: 2px solid $light-green-200;
            span {
              padding-left: 10px;
              font-size: $rem14;
            }
          }
          &__text {
            padding: 14px 0;
            font-size: $rem14;
          }
          &:not(:last-child) {
            &::after {
              width: 44px;
              height: 44px;
              background: url("../img/voice/ico_cross_light_green.svg") no-repeat center / 44px;
            }
          }
        }
      }
      .box-list {
        .box-list-item {
          margin-bottom: 60px;
          padding: 150px 60px 50px;
        }
        .box-list-item-number {
          font-size: $rem36;
          top: 54px;
          left: 40px;
          text-align: left;
        }
        .box-list-item-top {
          margin-bottom: 70px;
          .box-list-item-lead {
            padding-bottom: 12px;
            font-size: $rem24;
            border-bottom: 2px solid $light-green-200;
            &::before {
              bottom: -16px;
              border-right: 12px solid transparent;
              border-top: 16px solid $light-green-200;
              border-left: 12px solid transparent;
            }
            &::after {
              bottom: -12px;
              border-right: 14px solid transparent;
              border-top: 18px solid $white;
              border-left: 14px solid transparent;
            }
          }
        }
        .talk-item {
          margin-bottom: 50px;
          &__icon {
            width: 144px;
            margin-right: 30px;
            img {
              margin-bottom: 16px;
            }
            figcaption {
              font-size: $rem18;
            }
          }
          &__text {
            padding-top: 34px;
            font-size: $rem16;
            line-height: 2;
          }
          &:nth-child(even) {
            .talk-item__icon {
              margin-left: 30px;
            }
          }
        }
        .box-list-item-image {
          img {
            width: 100%;
            height: auto;
            margin-bottom: 50px;
          }
        }
      }
    }
    .block-work-style-link {
      .block-title {
        margin-bottom: 40px;
      }
      .btn {
        margin-bottom: 40px;
      }
    }
  }
}


//992px〜（PC）
@include media-breakpoint-lg {
  // 02_01~08_インタビュー
  .page-interview {
    .page-fv__image {
      padding-left: 0;
    }
    // インタビュー
    .block-interview {
      margin-top: 165px;
      .block-inner {
        max-width: 1000px;
        margin: 0 auto;
      }
      .box-list-item-wrap {
        position: relative;
        &:nth-child(1) {
          margin-bottom: 240px;
        }
        &:nth-child(2) {
          margin-bottom: 120px;
          .box-list-item-image{
            width: 575px;
            height: 680px;
            top: -120px;
            left: -200px;
          }
        }
        &:nth-child(3) {
          margin-bottom: 420px;
          .box-list-item-image{
            width: 760px;
            height: 545px;
            bottom: -480px;
            right: -200px;
          }
        }
      }
      .box-list-triangle {
        max-width: 790px;
        padding: 160px 100px 100px;
        &:nth-child(even) {
          margin-left: auto;
        }
        .box-list-item-number {
          font-size: $rem90;
        }
        .box-list-item-top {
          margin-bottom: 40px;
        }
        .box-list-item-lead {
          font-size: $rem24;
          font-weight: $letter-spacing-xl;
        }
      }
      .box-list-item-image {
        position: absolute;
        z-index: -1;
        margin: 0;
      }
    }
    // 1日のスケジュール
    .block-schedule {
      .schedule-wrap {
        padding: 0;
      }
      .schedule-fv {
        margin-bottom: 0;
      }
      .schedule-detail {
        padding: 105px 100px 60px;
        display: flex;
        align-items: center;
      }
      .schedule {
        // width: 43%;
        flex-shrink: 0;
        margin-bottom: 0;
        &::before {
          height: 100%;
        }
        .schedule-item {
          min-height: 174px;
          &__title {
            color: $white;
            background-color: $primary;
            &::after {
              border-left: 13px solid $primary;
            }
          }
          &__text {
            span {
              font-weight: $font-weight-light;
            }
          }
        }
      }
      .schedule-image {
        width: 48%;
        flex-direction: column;
        margin: 0 0 0 auto;
        img {
          max-width: 480px;
          width: 100%;
          margin: 0;
          &:not(:last-child) {
            margin-bottom: 146px;
          }
        }
      }
    }
    // メンバーの声
    .block-member-voice {
      .member-voice-title {
        margin-bottom: 40px;
        font-size: $rem24;
      }
    }
  }
  // 02_09_働き方クロストーク
  .page-cross-talk {
    .block-cross-talk {
      margin-bottom: 180px;
      .talk-member-list {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 -34px 100px;
        .talk-member-list-item {
          max-width: 200px;
          margin: 0 34px;
          &:not(:last-child) {
            &::after {
              position: absolute;
              top: -24px;
              right: -55px;
              bottom: 0;
            }
          }
        }
      }
      .box-list {
        .box-list-item-wrap {
          position: relative;
          &:nth-child(1) {
            .box-list-item {
              margin-left: auto;
            }
            .box-list-item-image {
              img {
                &:nth-child(2) {
                  margin-top: -250px;
                  margin-left: auto;
                }
              }
            }
          }
          &:nth-child(3) {
            .box-list-item {
              margin-left: auto;
            }
            .box-list-item-image {
              img {
                &:nth-child(1) {
                  margin-top: -100px;
                  margin-left: auto;
                }
              }
            }
          }
        }
        .box-list-item {
          max-width: 790px;
          margin-bottom: 60px;
          padding: 150px 60px 50px;
        }
        .box-list-item-image {
          position: relative;
          z-index: -2;
          margin-left: calc(-50vw + 50%);
          margin-right: calc(-50vw + 50%);
          margin-bottom: -60px;
          img {
            width: 617px;
            margin-bottom: 0;
          }
        }
      }
    }
    .block-work-style-link {
      .btn-wrap {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }
      .btn {
        margin: 0 10px 20px;
      }
    }
  }
}


//1200px〜（PC Oversize）
@include media-breakpoint-xl {
  // 02_00_メンバーの声
  .page-voice {
    .anker {
      width: 1040px;
      margin: 0 auto;
    }
    .block-voice {
      .block-title {
        margin-bottom: 40px;
      }
      .voice-list {
        margin-bottom: 0;
        .voice-list-item {
          margin-bottom: 40px;
        }
      }
    }
    .block-cross-talk {
      .cross-talk {
        width: 1040px;
        margin: 0 auto;
        a {
          &:hover {
            opacity: $hover-opacity;
          }
        }
      }
    }
  }
  // 02_01~08_インタビュー
  .page-interview {
    .fv-text-left {
      left: 62%;
    }
  }
  // 02_09_働き方クロストーク
  .page-cross-talk {
    .block-cross-talk {
      .talk-member-list {
        padding-left: 200px;
      }
      .box-list {
        .box-list-item {
          max-width: 1000px;
          padding: 150px 112px 50px;
        }
      }
    }
    .block-work-style-link {
      .btn-wrap {
        flex-wrap: nowrap;
      }
      .btn {
        width: 360px;
        margin: 0 10px;
      }
    }
  }
}

@media screen and (min-width:1400px) {
  // 02_01~08_インタビュー
  .page-interview {
    .fv-text-left {
      left: 55%;
    }
  }
}