@charset "UTF-8";
/* =====================
  社員を知る 一覧
===================== */
.people .article[data-id='1'] {
  position: relative;
  padding-top: 87px;
  padding-bottom: 120px;
  .inner {
    & > ul {
      margin-top: 65px;
      padding-inline: 32px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 95px;
      row-gap: 63px;
      & > li {
        & > a {
          display: block;
          width: 100%;
          height: 100%;
          .comment {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            width: 490px;
            height: 490px;
            padding-top: 324px;
            & > span {
              display: inline-block;
              font-size: 20px;
              font-weight: 500;
              line-height: 1;
              color: #fff;
              padding: 12px 14px;
              border-radius: 6px;
              background-color: #2fa371;
              & + span {
                margin-top: 15px;
              }
            }
          }
          .ini_wrap {
            display: flex;
            align-items: flex-end;
            gap: 18px;
            padding-bottom: 16px;
            border-bottom: solid 1px #9e9e9e;
            margin-top: 16px;
            .ini {
              font-family: var(--lexend);
              font-size: 50px;
              font-weight: 500;
              line-height: 1;
              color: #24845b;
            }
            .haizoku {
              color: #9e9e9e;
            }
          }
          .occ {
            font-size: 18px;
            line-height: 1;
            margin-top: 20px;
          }
        }
        &[data-id='1'] {
          .comment {
            background-image: url('../../img/recruit/people/01.png');
          }
        }
        &[data-id='2'] {
          .comment {
            background-image: url('../../img/recruit/people/02.png');
          }
        }
        &[data-id='3'] {
          .comment {
            background-image: url('../../img/recruit/people/03.png');
          }
        }
        &[data-id='4'] {
          .comment {
            background-image: url('../../img/recruit/people/04.png');
          }
        }
        &[data-id='5'] {
          .comment {
            background-image: url('../../img/recruit/people/05.png');
          }
        }
        &[data-id='6'] {
          .comment {
            background-image: url('../../img/recruit/people/06.png');
          }
        }
        &[data-id='7'] {
          .comment {
            background-image: url('../../img/recruit/people/07.png');
          }
        }
        &[data-id='8'] {
          .comment {
            background-image: url('../../img/recruit/people/08.png');
          }
        }
        &[data-id='9'] {
          .comment {
            background-image: url('../../img/recruit/people/09.png');
          }
        }
      }
    }
  }
}
/* =====================
  インタビュー 個別
===================== */
.interview {
  .recruit_mv {
    .mv-title_wrap {
      column-gap: 80px;
      .interview_mv {
        grid-area: mv;
        position: relative;
        width: 708px;
        .comment {
          position: relative;
          margin-top: 64px;
          & > span {
            display: block;
            width: fit-content;
            font-size: 20px;
            font-weight: 500;
            line-height: 1;
            color: #fff;
            padding: 12px 14px;
            border-radius: 6px;
            background-color: #2fa371;
            & + span {
              margin-top: 15px;
            }
          }
        }
        &::before {
          content: '';
          display: block;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          width: 440px;
          height: 440px;
          position: absolute;
          bottom: 0;
          right: 0;
        }
        .ini_wrap {
          width: 318px;
          position: relative;
          display: flex;
          align-items: flex-end;
          gap: 18px;
          padding-bottom: 18px;
          border-bottom: solid 1px #9e9e9e;
          margin-top: 56px;
          .ini {
            font-family: var(--lexend);
            font-size: 40px;
            font-weight: 500;
            line-height: 1;
            color: #24845b;
          }
          .age {
            font-family: var(--noto);
            font-size: 16px;
            font-weight: normal;
            line-height: 1.6;
            color: #9e9e9e;
          }
        }
        .occ {
          font-size: 16px;
          line-height: 1;
          margin-top: 21px;
        }
        .haizoku {
          font-size: 14px;
          line-height: 1.6;
          color: #9e9e9e;
          margin-top: 12px;
        }
      }
    }
  }
  .bread {
    margin-top: 111px;
  }
}

.interview .article[data-id='1'] {
  position: relative;
  padding-top: 104px;
  padding-bottom: 120px;
  .inner {
    & > ol {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      & > li {
        padding-inline: 40px;
        padding-block: 32px 39px;
        border-radius: 20px;
        &::before {
          border-radius: 18px;
        }
        .question {
          position: relative;
          display: flex;
          align-items: center;
          gap: 20px;
          font-size: 20px;
          font-weight: 500;
          line-height: 1.6;
          color: #24845b;
          .no {
            display: grid;
            place-content: center;
            font-family: var(--lexend);
            font-size: 24px;
            font-weight: 500;
            line-height: 1;
            text-align: center;
            color: #fff;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../../img/recruit/people/deco.png');
            width: 76px;
            height: 86px;
            padding-bottom: 12px;
          }
        }
        .answer {
          position: relative;
          line-height: 2;
          margin-top: 21px;
        }
        &[data-id='7'] {
          grid-column: 1/3;
        }
      }
    }
    .link-btn {
      width: 309px;
      margin-inline: auto;
      margin-top: 80px;
      .link-anchor {
        padding-block: 26px;
      }
    }
  }
}
.interview01 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/01.png');
        }
      }
    }
  }
}
.interview02 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/02.png');
        }
      }
    }
  }
}
.interview03 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/03.png');
        }
      }
    }
  }
}
.interview04 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/04.png');
        }
      }
    }
  }
}
.interview05 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/05.png');
        }
      }
    }
  }
}
.interview06 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/06.png');
        }
      }
    }
  }
}
.interview07 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/07.png');
        }
      }
    }
  }
}
.interview08 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/08.png');
        }
      }
    }
  }
}
.interview09 {
  .recruit_mv {
    .mv-title_wrap {
      .interview_mv {
        &::before {
          background-image: url('../../img/recruit/people/mv/09.png');
        }
      }
    }
  }
}