/*=====================================================
  mainTitle
=====================================================*/
.mainTitle {
  background-color: var(--color-interview);
  background-image: url(/recruit/images/interview/main_title_bg_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right 0 center;
}
@media print, screen and (min-width: 768px) {
  .mainTitle {
    background-image: url(/recruit/images/interview/main_title_bg.png);
  }
}
.mainTitle h1 {
  color: var(--base-font-color);
  text-shadow: none;
}

.indexList .indexList__title {
  background-color: var(--color-interview);
}

h2 {
  border-top-color: var(--color-interview);
}

h3::before {
  background-color: var(--color-interview);
}

/*=====================================================
  interviewList
=====================================================*/
.interviewList {
  width: 320px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 0;
}
@media print, screen and (min-width: 768px) {
  .interviewList {
    width: 100%;
    gap: 32px;
  }
}
@media print, screen and (min-width: 1280px) {
  .interviewList {
    gap: 48px;
  }
}
.interviewList li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  grid-column: span 12;
}
@media print, screen and (min-width: 768px) {
  .interviewList li {
    grid-column: span 6;
  }
}
.interviewList li a {
  width: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li a:hover .interviewList__thumb img {
    transform: scale(1.05);
    filter: grayscale(0%);
  }
  .interviewList li a:hover .interviewList__dep,
  .interviewList li a:hover .interviewList__name {
    background-color: var(--black);
  }
  .interviewList li a:hover .interviewList__lead {
    background-color: var(--base-color);
  }
  .interviewList li a:hover .interviewList__dep::before,
  .interviewList li a:hover .interviewList__name::before {
    border-right-color: #333;
  }
}
.interviewList li .interviewList__thumb {
  width: 100%;
  margin: 0;
  position: relative;
  background-color: var(--color-interview);
  background-image: url(/recruit/images/interview/thumb_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  overflow: hidden;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__thumb {
    transition: all 0.2s;
  }
}
.interviewList li .interviewList__thumb img {
  filter: grayscale(100%);
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__thumb img {
    transition: all 0.2s;
  }
}
.interviewList li .interviewList__dep {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  color: var(--white);
  font-size: 13px;
  font-size: 0.7222222222rem;
  font-weight: 700;
  display: block;
  background-color: var(--base-color);
  position: absolute;
  top: 94px;
  left: -10px;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__dep {
    padding: 12px 16px;
    font-size: 20px;
    font-size: 1.1111111111rem;
    top: 220px;
    left: -20px;
    transition: all 0.2s;
  }
}
.interviewList li .interviewList__dep::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 10px #891019;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__dep::before {
    border-right-width: 20px;
  }
}
.interviewList li .interviewList__name {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  display: block;
  background-color: var(--base-color);
  position: absolute;
  left: -10px;
  top: 130px;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__name {
    padding: 12px 16px;
    font-size: 32px;
    font-size: 1.7777777778rem;
    top: 270px;
    left: -20px;
    transition: all 0.2s;
  }
}
.interviewList li .interviewList__name::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 10px #891019;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__name::before {
    border-right-width: 20px;
  }
}
.interviewList li .interviewList__lead {
  width: 100%;
  margin: 0;
  padding: 16px 30px 16px 16px;
  font-size: 14px;
  font-size: 0.7777777778rem;
  color: var(--white);
  line-height: 1.6;
  font-weight: 700;
  background-color: var(--black);
  background-image: url("/recruit/images/icon_arrow_white_s_right.svg");
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: right 16px center;
}
@media print, screen and (min-width: 1280px) {
  .interviewList li .interviewList__lead {
    padding: 24px 30px 24px 24px;
    font-size: 18px;
    font-size: 1rem;
    transition: all 0.2s;
  }
}

/*=====================================================
  interviewVi
=====================================================*/
.interviewVi {
  width: 100%;
  height: calc(100svh - 60px);
  margin: 0;
  padding: 0;
  position: relative;
  background-color: var(--color-interview);
  background-size: cover;
  background-position: center 0;
}
@media print, screen and (min-width: 768px) {
  .interviewVi {
    height: 400px;
  }
}
@media print, screen and (min-width: 1280px) {
  .interviewVi {
    height: calc(100vh - 64px);
  }
}
.interviewVi.interviewVi__profile--ts {
  background-image: url(/recruit/images/interview/ts/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--ts {
    background-image: url(/recruit/images/interview/ts/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--it {
  background-image: url(/recruit/images/interview/it/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--it {
    background-image: url(/recruit/images/interview/it/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--yn {
  background-image: url(/recruit/images/interview/yn/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--yn {
    background-image: url(/recruit/images/interview/yn/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--ks {
  background-image: url(/recruit/images/interview/ks/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--ks {
    background-image: url(/recruit/images/interview/ks/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--ms {
  background-image: url(/recruit/images/interview/ms/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--ms {
    background-image: url(/recruit/images/interview/ms/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--sh {
  background-image: url(/recruit/images/interview/sh/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--sh {
    background-image: url(/recruit/images/interview/sh/vi.jpg);
  }
}
.interviewVi.interviewVi__profile--mm {
  background-image: url(/recruit/images/interview/mm/vi_sp.jpg);
}
@media print, screen and (min-width: 768px) {
  .interviewVi.interviewVi__profile--mm {
    background-image: url(/recruit/images/interview/mm/vi.jpg);
  }
}
.interviewVi .interviewVi__profile {
  max-width: 80%;
  margin: 0;
  padding: 20px;
  line-height: 1;
  position: absolute;
  left: 0;
  bottom: 20px;
  background-color: var(--color-interview);
}
@media print, screen and (min-width: 1280px) {
  .interviewVi .interviewVi__profile {
    width: 400px;
    padding: 40px;
    bottom: 60px;
  }
}
.interviewVi .interviewVi__profile .interviewVi__dep {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 14px;
  font-size: 0.7777777778rem;
  font-weight: 700;
}
@media print, screen and (min-width: 1280px) {
  .interviewVi .interviewVi__profile .interviewVi__dep {
    margin-bottom: 16px;
    font-size: 18px;
    font-size: 1rem;
  }
}
.interviewVi .interviewVi__profile .interviewVi__name {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 24px;
  font-size: 1.3333333333rem;
  font-weight: 700;
}
@media print, screen and (min-width: 1280px) {
  .interviewVi .interviewVi__profile .interviewVi__name {
    margin-bottom: 16px;
    font-size: 42px;
    font-size: 2.3333333333rem;
  }
}
.interviewVi .interviewVi__profile .interviewVi__year {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 14px;
  font-size: 0.7777777778rem;
  font-weight: 700;
}
@media print, screen and (min-width: 1280px) {
  .interviewVi .interviewVi__profile .interviewVi__year {
    margin-bottom: 16px;
    font-size: 16px;
    font-size: 0.8888888889rem;
  }
}
.interviewVi .interviewVi__profile .interviewVi__school {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-size: 0.7777777778rem;
  font-weight: 700;
}
@media print, screen and (min-width: 1280px) {
  .interviewVi .interviewVi__profile .interviewVi__school {
    font-size: 16px;
    font-size: 0.8888888889rem;
  }
}