@charset "UTF-8";

/*
	##### OGIS #####
	interviews/assets/css/interview_pc.css
*/



/* --------------------------------------------------
interview index
-------------------------------------------------- */

.intro.lead {
  margin-top: 150px;
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
  color: var(--color-3);
  text-align: center;

  @media (width > 1400px) {
    font-size: calc(16 / 1400 * 100vw);
  }
}

.interview-cards-area {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 90px auto 120px;

  .card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 340px));
    grid-auto-rows: 530px;
    column-gap: 40px;
    row-gap: 60px;

    @media (width < 1100px) {
      grid-auto-rows: calc(530 / 1100 * 100vw);
    }

    .card {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
      position: relative;

      .img-box {
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;

        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          opacity: .2;
          background-color: rgb(96, 147, 194);
          mix-blend-mode: multiply;
          position: absolute;
          top: 0;
          left: 0
        }
      }
      @media (hover: hover) {
        & .img-box {

          &::after {
            transition: opacity .3s ease 
          }

          img {
            scale: 1;
            transition: scale .3s ease;
          }
        }
        &:hover .img-box {

          &::after {
            opacity: 0;
          }
          img {
            scale: 1.1
          }
        }
      }
    }

    a {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      position: relative;
      text-decoration: none;

      .label {
        text-align: right;

        mark {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 150px;
          height: 36px;
          border-radius: 0 0 0 10px;
          padding: 0 1.5em;
          font-size: 15px;
          font-weight: 700;
          background-color: var(--color-3);
          color: #fff;
        }
      }
      @media (hover: hover) {
        & .label mark {
          transition: background-color .1s ease;
        }
        &:hover .label mark {
          background-color: var(--color-4);
        }
      }
      dl {
        display: flex;
        flex-direction: column-reverse;
        background-color: var(--bg-col);
        background-image: radial-gradient(closest-side, rgba(255, 255, 255, .5) 30%, transparent 0);
        background-size: 6px 6px;
        min-height: 250px;
        padding: 38px 10px 18px 30px;
        clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 28%);
      }
      .catch {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.5555555555555556;
        margin-bottom: .4em;

        p + p {
          margin-top: 5px;
        }
      }
      dt {
        color: #595757;

        .segment {
          font-weight: 500;
          font-size: 13.5px;
          line-height: 1.4285714285714286;
        }
        .name {
          display: block;
          font-weight: 700;
          font-size: 30px;
          letter-spacing: .08em;
          padding-top: .25em;
          
          .sir {
            font-size: 40%
          }
        }
      }
    }
  }

  @media (width > 1400px) {
    max-width: calc(1100 / 1400 * 100vw);
    margin: calc(90 / 1400 * 100vw) auto calc(120 / 1400 * 100vw);
  
    .card-list {
      grid-template-columns: repeat(3, calc(340 / 1400 * 100vw));
      grid-auto-rows: calc(530 / 1400 * 100vw);
      column-gap: calc(40 / 1400 * 100vw);
      row-gap: calc(60 / 1400 * 100vw);
  
      .card {
        border-radius: calc(10 / 1400 * 100vw);
      }
  
      a {  
        .label {
          mark {
            min-width: calc(150 / 1400 * 100vw);
            height: calc(36 / 1400 * 100vw);
            border-radius: 0 0 0 calc(10 / 1400 * 100vw);
            font-size: calc(15 / 1400 * 100vw);
          }
        }
        dl {
          background-size: calc(6 / 1400 * 100vw) calc(6 / 1400 * 100vw);
          min-height: calc(250 / 1400 * 100vw);
          padding: calc(38 / 1400 * 100vw) calc(10 / 1400 * 100vw) calc(18 / 1400 * 100vw) calc(30 / 1400 * 100vw);
        }
        .catch {
          font-size: calc(18 / 1400 * 100vw);

          p + p {
            margin-top: calc(5 / 1400 * 100vw);
          }
        }
        dt {
          .segment {
            font-size: calc(13.5 / 1400 * 100vw);
          }
          .name {
            font-size: calc(30 / 1400 * 100vw);
          }
        }
      }
    }
  }
  @media (width < 1100px) {
    max-width: none;
    margin: calc(90 / 1100 * 100vw) auto calc(120 / 1100 * 100vw);
  
    .card-list {
      grid-template-columns: repeat(3, calc(340 / 1100 * 100vw));
      grid-auto-rows: calc(530 / 1100 * 100vw);
      column-gap: calc(40 / 1100 * 100vw);
      row-gap: calc(60 / 1100 * 100vw);
  
      .card {
        border-radius: calc(10 / 1100 * 100vw);
      }
  
      a {  
        .label {
          mark {
            min-width: calc(150 / 1100 * 100vw);
            height: calc(36 / 1100 * 100vw);
            border-radius: 0 0 0 calc(10 / 1100 * 100vw);
            font-size: calc(15 / 1100 * 100vw);
          }
        }
        dl {
          background-size: calc(6 / 1100 * 100vw) calc(6 / 1100 * 100vw);
          min-height: calc(250 / 1100 * 100vw);
          padding: calc(38 / 1100 * 100vw) 1em calc(16 / 1100 * 100vw) calc(30 / 1100 * 100vw);
        }
        .catch {
          font-size: calc(18 / 1100 * 100vw);

          p + p {
            margin-top: calc(5 / 1100 * 100vw);
          }
        }
        dt {
          .segment {
            font-size: calc(14 / 1100 * 100vw);
          }
          .name {
            font-size: calc(30 / 1100 * 100vw);
          }
        }
      }
    }
  }
}


/* --------------------------------------------------
interviews
-------------------------------------------------- */

.line {
  all: unset;
  display: block;
  height: 1px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background-color: var(--color-5);

  @media (width > 1400px) {
    max-width: calc(1100 / 1400 * 100vw);
  }
}

.intrvw .main-image-area {
  display: block;
  width: 100%;
  max-width: calc(1280 / 1400 * 100vw);
  height: calc(500 / 1400 * 100vw);
  margin: 0 auto;
  overflow: hidden;
  position: relative;

  .img-box {
    width: 100%;
    height: 100%;
  }
  .txt-box {
    display: grid;
    grid-template-columns: calc(675 / 1400 * 100vw) calc(605 / 1400 * 100vw);
    grid-template-rows: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;

    .catch-box {
      display: block;
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      background-color: var(--color-6);
      clip-path: polygon(100% 100%, 0 100%, 40.661157% 0, 100% 0);
      color: #fff;
      position: relative;

      .catch {
        font-weight: 700;
        font-size: calc(36 / 1400 * 100vw);
        letter-spacing: .08em;
        line-height: 1.6111111111111112;
        position: relative;
        top: 50%;
        translate: 0 -50%;
        padding-inline: 32.2314% 0;

        span {
          display: block;

          .unique & + & {
            margin-top: calc(10 / 1400 * 100vw);
          }
        }

        &.six-lines {
          padding-inline-start: 39%;
        }
        &.five-lines {
          padding-inline-start: 35%;
        }
      }
      .p-num {
        font-weight: 300;
        font-size: calc(60 / 1400 * 100vw);
        position: absolute;
        inset: auto calc(10 / 1400 * 100vw) calc(35 / 1400 * 100vw) auto;

        &::before {
          content: '';
          display: inline-block;
          width: 1px;
          height: calc(103 / 1400 * 100vw);
          background-color: #fff;
          margin-right: calc(40 / 1400 * 100vw);
          margin-bottom: calc(-10 / 1400 * 100vw);
          rotate: 30deg;
          transform-origin: center bottom;
        }
      }
    }
    .plate-box {
      display: flex;
      align-items: flex-end;
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      padding: calc(40 / 1400 * 100vw);

      .plate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 17px;
        background-color: rgba(255, 255, 255, .85);
        box-shadow: 0 0 5px rgba(0, 80, 158, .45);
        min-width: calc(230 / 1400 * 100vw);
        min-height: calc(330 / 1400 * 100vw);
        padding: 0 calc(30 / 1400 * 100vw);

        .name-and-ttl {
          align-self: stretch;
        }

        .segment {
          font-size: calc(14 / 1400 * 100vw);
          font-weight: 600;
          line-height: 1.4285714285714286;
          margin-bottom: .5em;
        }
        .name {
          font-weight: 700;
          font-size: calc(27 / 1400 * 100vw);
          letter-spacing: .08em;

          .small {
            font-size: calc(14 / 1400 * 100vw);
          }
        }
        .job-change-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          row-gap: calc(32 / 1400 * 100vw);
          width: 100%;
          min-width: calc(170 / 1400 * 100vw);

          .job-from,
          .job-now {
            display: block;
            width: 100%;

            dl {
              display: flex;
              flex-direction: column;
              width: 100%;
              height: 100%;
              border-radius: calc(3 / 1400 * 100vw);
              overflow: hidden;

              dt {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                flex: 0 0 calc(22 / 1400 * 100vw);
                text-align: center;
                font-size: calc(13 / 1400 * 100vw);
                background-color: #fff;
                overflow: hidden;
              }
              dd {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                font-weight: 700;
                letter-spacing: .08em;
                text-align: center;
                padding-block: .3em;
                flex: 1 1 auto;
              }
            }
          }

          .job-from {
            flex-basis: calc(55 / 1400 * 100vw);

            dl {
              border: solid 1px #979797;

              dd {
                font-size: calc(12 / 1400 * 100vw);
                line-height: 1.1;
                background-color: #979797;
              }
            }
          }
          .job-now {
            flex-basis: calc(65 / 1400 * 100vw);
            position: relative;

            dl {
              border: solid 1px #e60039;

              dd {
                font-size: calc(18 / 1400 * 100vw);
                color: #fff;
                background-color: #e60039;
              }
            }
            &::before {
              content: '';
              display: block;
              width: 100%;
              height: calc(32 / 1400 * 100vw);
              position: absolute;
              bottom: 100%;
              left: 0;
              background: url(../images/arrw-change_pc.svg) no-repeat center / calc(5 / 1400 * 100vw) auto;
            }
          }
        }
      }
    }
  }
}

.sec-ttl {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 60px;

  .jp {
    display: inline-block;
    font-weight: 700;
    font-size: 21px;
    padding-left: 27px;
    letter-spacing: .08em;
    line-height: 1.5;
  }
  .en {
    font-weight: 300;
    font-size: 51.5px;
    line-height: .9;
    color: var(--color-3);

    &::before {
      content: '•';
      margin-right: .15em;
      vertical-align: middle;
      font-size: 1.3em;
      color: var(--color-4)
    }
  }

  @media (width > 1400px) {
    margin-bottom: calc(60 / 1400 * 100vw);

    .jp {
      font-size: calc(21 / 1400 * 100vw);
      padding-left: calc(27 / 1400 * 100vw);
    }
    .en {
      font-size: calc(51.5 / 1400 * 100vw);
    }
  }
  @media (width < 1100px) {
    margin-bottom: calc(60 / 1100 * 100vw);

    .jp {
      font-size: calc(21 / 1100 * 100vw);
      padding-left: calc(27 / 1100 * 100vw);
    }
    .en {
      font-size: calc(51.5 / 1100 * 100vw);
    }
  }
}

.sec .txt-col {
  display: block;

  .txt {
    text-align: justify;
  }
  .ttl {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 18px;
    letter-spacing: .05em;
    line-height: 1.6363636363636365;
  
    @media (width > 1400px) {
      font-size: calc(22 / 1400 * 100vw);
      margin-bottom: calc(18 / 1400 * 100vw);
    }
    @media (width < 1100px) {
      font-size: calc(22 / 1100 * 100vw);
      margin-bottom: calc(18 / 1100 * 100vw);
    }
  }
  .interview-question {
    font-weight: 700;
    margin-bottom: .5em;
  }
}

.sec.no-pix {
  display: grid;
  grid-template-columns: 29.09090909090909% 70.9090909090909%;
  align-items: self-start;
  width: 100%;
  max-width: 1160px;
  padding: 0 30px;
  margin: 0 auto 95px;

  & + .line {
    margin-bottom: 95px;
  }

  @media (width > 1400px) {
    max-width: calc(1160 / 1400 * 100vw);
    margin: 0 auto calc(95 / 1400 * 100vw);
   }
   @media (width < 1100px) {
    margin: 0 auto calc(95 / 1100 * 100vw);
   }
}

.sec.wide {
  display: grid;
  width: 100%;
  column-gap: 5.714285714285714%;
  grid-template-rows: 1fr;

  &.sec-01 {
    margin-top: 290px;
    margin-bottom: 108px;
  }
  &.sec-04 {
    margin-top: 250px;
    margin-bottom: 140px;
  }
  .txt-area {
    grid-area: text;
    padding-top: calc(60 / 1400 * 100vw);
    position: relative;

    &::before {
      content: '';
      display: block;
      height: 100%;
      width: calc(950 / 1400 * 100vw);
      position: absolute;
      top: 0;
      background-color: var(--bg-col);
      background-image: radial-gradient(closest-side, rgba(255, 255, 255, .5) 30%, transparent 0);
      background-size: 6px 6px;
      z-index: -1;
    }
    .txt-col {
      padding-left: 27px;
      padding-bottom: 65px;
    }
  }
  .img-area {
    grid-area: photo;
    position: relative;

    .img-box {
      width: 100%;
      height: auto;
      position: relative;
      top: -120px;
    }
  }
  &.left {
    grid-template-columns: 48.57142857142857% 45.714285714285715%;
    grid-template-areas: 'text photo';

    .txt-area {
      padding-left: calc(150 / 1400 * 100vw);

      &::before {
        left: 0;
      }
    }
  }
  &.right {
    grid-template-columns: 45.714285714285715% 48.57142857142857%;
    grid-template-areas: 'photo text';

    .txt-area {
      padding-right: calc(150 / 1400 * 100vw);

      &::before {
        right: 0;
      }
    }
  }

  @media (width > 1400px) {
    &.sec-01 {
      margin-top: calc(290 / 1400 * 100vw);
      margin-bottom: calc(108 / 1400 * 100vw);
    }
    &.sec-04 {
      margin-top: calc(250 / 1400 * 100vw);
      margin-bottom: calc(140 / 1400 * 100vw);
    }
    .img-area {
      .img-box {
        top: calc(-120 / 1400 * 100vw);
      }
    }

    .txt-area {
      &::before {
        background-size: calc(6 / 1400 * 100vw) calc(6 / 1400 * 100vw);
      }
      .txt-15 {
        font-size: calc(15 / 1400 * 100vw);
      }
      .txt-col {
        padding-left: calc(27 / 1400 * 100vw);
        padding-bottom: calc(65 / 1400 * 100vw);

      }
    }
  }
  @media (width < 1100px) {
    &.sec-01 {
      margin-top: calc(290 / 1100 * 100vw);
      margin-bottom: calc(108 / 1100 * 100vw);
    }
    &.sec-04 {
      margin-top: calc(250 / 1100 * 100vw);
      margin-bottom: calc(140 / 1100 * 100vw);
    }
    .img-area {
      .img-box {
        top: calc(-120 / 1100 * 100vw);
      }
    }

    .txt-area {
      .txt-col {
        padding-left: calc(27 / 1100 * 100vw);
        padding-bottom: calc(65 / 1100 * 100vw);
      }
    }
  }
}

.sec.career-table {
  display: block;
  width: 100%;
  padding: 70px;
  background-size: calc(14 / 1400 * 100vw) calc(14 / 1400 * 100vw);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) calc(1 / 1400 * 100vw), transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, .05) calc(1 / 1400 * 100vw), transparent 0);
  background-color: var(--color-3);
  margin-bottom: 90px;

  .inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    .sec-ttl {
      color: #fff;

      .en {
        color: #fff;
      }
    }

    .career-table-area {
      display: block;
      width: 100%;
      padding-bottom: 40px;
      overflow: hidden;
      overflow-x: scroll;
      scrollbar-color: var(--color-4) #fff;

      .career-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 440px;
        grid-template-rows: minmax(290px, 1fr);
        column-gap: 25px;
      }
      .career-card {
        display: block;
        width: 100%;
        height: 100%;
        padding: 30px 25px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;

        .term-ttl {
          font-size: 15px;
          line-height: 1.8;
          margin-bottom: 20px;

          .term {
            display: inline-block;
            padding: 0 1.5em;
            background-color: var(--color-6);
            border-radius: 100px;
            font-weight: 700;
            color: #fff;
          }
          .ttl {
            font-weight: 600;
            padding-left: .5em;
          }
        }
        .summary {
          font-weight: 700;
          font-size: 18px;
          line-height: 1.6666666666666667;
          color: var(--color-3);
          padding-bottom: .75em;
          border-bottom: solid 1px var(--color-5);
          margin-bottom: 1em;
        }
        .description {
          text-align: justify;
        }
      }
    }
  }
  @media (width > 1400px) {
    margin-bottom: calc(90  / 1400 * 100vw);

    .inner {
      max-width: calc(1100 / 1400 * 100vw);

      .career-table-area {
        .career-list {
        grid-auto-columns: calc(440 / 1400 * 100vw);
        column-gap: calc(25 / 1400 * 100vw);
          .career-card {
            .term-ttl {
              font-size: calc(15 / 1400 * 100vw);
              margin-bottom: calc(20 / 1400 * 100vw);
            }
            .summary {
              font-size: calc(18 / 1400 * 100vw);
            }
          }
        }
      }
    }
  }

}

.sec-07 {
  display: block;
  width: 100%;
  background-color: var(--color-3);

  .message-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .txt-area {
    display: block;
    width: 100%;
    max-width: 570px;
    padding: 60px 20px 0;
    justify-self: end;
    
    .sec-ttl {
      color: #fff;

      .en {
        color: #fff;
      }
    }
    .txt-col {
      padding-left: 27px;
      padding-bottom: 65px;
      color: #fff;
    }

    @media (width > 1400px) {
      max-width: calc(570 / 1400 * 100vw);
      padding: calc(60 / 1400 * 100vw) calc(20 / 1400 * 100vw) 0;

      .txt-col {
        padding-left: calc(27 / 1400 * 100vw);
        padding-bottom: calc(65 / 1400 * 100vw);
      }
    }
  }
  .img-area {
    clip-path: polygon(100% 100%, 0 100%, 45% 0, 100% 0);

    .img-box {
      width: 100%;
      height: 100%;
    }
  }
  & + .ex-note {
    display: inline-block;
    position: relative;
    top: 1.25em;
    left: 50%;
    translate: -523px 0;

    @media (width < 1140px) {
      left: 47px;
      translate: 0 0;
    }
    @media (width > 1400px) {
      translate: calc(-523 / 1400 * 100vw) 0;
    }
  }
}

.interviews-list {
  display: block;
  width: 100%;
  margin: 140px 0 75px;

  .interview-ttl {
    display: block;
    width: 100%;
    max-width: 1160px;
    padding: 0 30px;
    margin: 0 auto 35px;
    position: relative;

    &::after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 1px;
      padding: 0 30px;
      background-clip: content-box;
      background-color: var(--color-3);
      position: absolute;
      left: 0;
      top: 50%;
      z-index: -1;
    }
    .en {
      display: inline-block;
      background-color: #fff;
      padding-right: .75em;
      font-weight: 600;
      font-size: 28px;
      color: var(--color-3);
    }
  }

  @media (width > 1400px) {
    margin: calc(140 / 1400 * 100vw) 0 calc(75 / 1400 * 100vw);

    .interview-ttl {
      max-width: calc(1100 / 1400 * 100vw);
      padding: 0 calc(30 / 1400 * 100vw);
      margin-bottom: calc(35 / 1400 * 100vw);

      &::after {
        padding: 0 calc(30 / 1400 * 100vw);
      }

      .en {
        font-size: calc(28 / 1400 * 100vw);
      }
    }
  }
}

.carousel-set .slide-cut {
  display: block;
  width: calc(340 / 1400 * 100vw);
  height: calc(260 / 1400 * 100vw);
  margin: 0 calc(10 / 1400 * 100vw);
  position: relative;
  overflow: hidden;

  .img-box {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      border-bottom-color: var(--color-3);
      border-bottom-style: solid;
      border-bottom-width: 3px;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    @media (hover: hover) {
      .slide-cut & img {
        scale: 1;
        transition: scale .3s ease;
      }
      .slide-cut:hover & img {
        scale: 1.1;
      }
    }
  }

  a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;


    @media (width > 1400px) {
      border-bottom-width: calc(3 / 1400 * 100vw);

      &::after {
        height: calc(100% + calc(3 / 1400 * 100vw));
      }
    }

    dl {
      display: inline-flex;
      align-items: center;
      height: calc(35 / 1400 * 100vw);
      border-style: solid;
      border-width: 2px;

      &.job-past {
        background-color: var(--color-2);
        border-color: var(--color-2);
      }
      &.job-now {
        background-color: var(--color-3);
        border-color: var(--color-3);
        transition: border-color .6s ease, background-color .6s ease;
      }

      dt {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 1.2em 0 .5em;
        background-color: #fff;
        font-size: calc(13 / 1400 * 100vw);
        color: var(--color-2);
        clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 15px) 0);
      }
      dd {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 .75em 0 .5em;

        .job-past & {
          font-size: calc(14 / 1400 * 100vw);
        }
        .job-now & {
          font-size: calc(15 / 1400 * 100vw);
        }
      }
    }
  }
}



.slide-arrow {
  display: block;
  position: absolute;
  width: 58px;
  height: 58px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 50%;
  cursor: pointer;
  opacity: .7;

  @media (hover: hover) {
    transition: opacity .3s ease;

    &:hover {
      opacity: .3
    }
  }

  &.next-arrow {
    right: 30px;
    background-image: url(../../../assets/images/btn-next.svg);

  }
  &.prev-arrow {
    left: 30px;
    background-image: url(../../../assets/images/btn-prev.svg);
  }

  @media (width > 1400px) {
    width: calc(58 / 1400 * 100vw);
    height: calc(58 / 1400 * 100vw);

    &.next-arrow {
      right: calc(30 / 1400 * 100vw);  
    }
    &.prev-arrow {
      left: calc(30 / 1400 * 100vw);
    }
  }
}