@charset "UTF-8";
/*

 先輩ドライバーの声
----------------------------------------------- */
/* ページタイトル英語画像 */
@media (width > 768px) {
  .page_header .en {
    width: 5.9210526316vw;
  }
}
@media (width <= 768px) {
  .page_header .title .ja {
    font-size: min(5.7446808511vw, 20px);
  }
  .page_header .en {
    width: 15.9574468085vw;
  }
}

/* Interview */
@media (width > 768px) {
  .interview {
    padding-inline: 8.0409356725vw;
  }
}
@media (width <= 768px) {
  .interview {
    padding-inline: 5.3191489362vw;
  }
}
.interview {
  background-color: #fff;
  position: relative;
}
@media (width > 768px) {
  .interview {
    margin-top: 6.5789473684vw;
    padding-block: 7.3099415205vw 28.8011695906vw;
  }
}
@media (width <= 768px) {
  .interview {
    margin-top: 13.2978723404vw;
    padding-block: 15.9574468085vw 47.8723404255vw;
  }
}
@media (width > 768px) {
  .interview h3 {
    margin-bottom: 2.1929824561vw;
  }
}
@media (width <= 768px) {
  .interview h3 {
    margin-bottom: 5.3191489362vw;
  }
}
@media (width > 768px) {
  .interview h3 img {
    width: 8.4795321637vw;
  }
}
@media (width <= 768px) {
  .interview h3 img {
    width: 27.9255319149vw;
  }
}
.interview .lead {
  font-weight: 500;
}
.interview h4 {
  border-left: solid;
  font-weight: 700;
  line-height: 1.2;
}
@media (width > 768px) {
  .interview h4 {
    margin-bottom: 2.1929824561vw;
    border-width: 0.5116959064vw;
    padding-left: 1.0964912281vw;
    margin-bottom: 1.8274853801vw;
    font-size: clamp(12px, 1.7543859649vw, 20px);
  }
}
@media (width <= 768px) {
  .interview h4 {
    margin-bottom: 5.3191489362vw;
    border-width: 1.329787234vw;
    padding-left: 2.6595744681vw;
    margin-bottom: 5.3191489362vw;
    font-size: min(5.3191489362vw, 20px);
  }
}
@media (width > 768px) {
  .interview-taxi {
    margin-top: 3.2894736842vw;
  }
}
@media (width <= 768px) {
  .interview-taxi {
    margin-top: 7.9787234043vw;
  }
}
.interview-taxi h4 {
  border-color: var(--color-blue);
}
@media (width > 768px) {
  .interview-bus {
    margin-top: 4.3859649123vw;
  }
}
@media (width <= 768px) {
  .interview-bus {
    margin-top: 13.2978723404vw;
  }
}
.interview-bus h4 {
  border-color: var(--color-red);
}
.interview-content {
  display: grid;
  align-items: start;
}
@media (width > 768px) {
  .interview-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.7543859649vw;
  }
}
@media (width <= 768px) {
  .interview-content {
    gap: 7.9787234043vw;
  }
}
.interview .card {
  border: solid #000;
  background-color: #fff;
  overflow: hidden;
}
.interview .card summary {
  list-style-type: none;
  position: relative;
  cursor: pointer;
}
.interview .card summary::-webkit-details-marker {
  display: none;
}
@media (width > 768px) {
  .interview .card {
    border-width: 0.0365497076vw;
    border-radius: 0.8771929825vw;
    padding: 1.4619883041vw;
  }
}
@media (width <= 768px) {
  .interview .card {
    border-width: 0.1329787234vw;
    border-radius: 2.6595744681vw;
    padding: 3.9893617021vw;
  }
}
.interview .card-header {
  display: grid;
  align-items: center;
}
.interview .card-header::before, .interview .card-header::after {
  font-family: "Font Awesome 7 Free";
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  text-rendering: auto;
  flex-shrink: 0;
}
.interview .card-header:hover img {
  scale: 1.1;
}
@media (width > 768px) {
  .interview .card-header {
    grid-template-columns: 9.0643274854vw 1fr;
    gap: 1.4619883041vw 0.730994152vw;
  }
}
@media (width <= 768px) {
  .interview .card-header {
    grid-template-columns: 25.2659574468vw 1fr;
    gap: 5.3191489362vw 2.6595744681vw;
  }
}
.interview .card-header::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "+";
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-blue);
  border-radius: 50%;
  color: #fff;
  aspect-ratio: 1;
}
@media (width > 768px) {
  .interview .card-header::before {
    width: 1.7543859649vw;
    font-size: clamp(12px, 1.0964912281vw, 20px);
  }
}
@media (width <= 768px) {
  .interview .card-header::before {
    width: 5.3191489362vw;
    font-size: min(3.1914893617vw, 20px);
  }
}
.interview .card-header::after {
  grid-column: 1/-1;
  content: "";
  border-top: solid #707070;
}
@media (width > 768px) {
  .interview .card-header::after {
    border-width: 0.0365497076vw;
    height: 2.9239766082vw;
  }
}
@media (width <= 768px) {
  .interview .card-header::after {
    border-width: 0.1329787234vw;
    height: 9.8404255319vw;
  }
}
.interview .card[open] .card-header::before {
  content: "\f068";
}
.interview .card[open] .card-header img {
  scale: 1;
}
@media (width > 768px) {
  .interview .card .detailsContent {
    padding-inline: 1.4619883041vw;
  }
}
@media (width <= 768px) {
  .interview .card .detailsContent {
    padding-inline: 3.9893617021vw;
  }
}
.interview .card .comment {
  color: var(--color-blue);
  font-weight: bold;
  line-height: 1.33;
  text-align: center;
}
@media (width > 768px) {
  .interview .card .comment {
    font-size: clamp(12px, 1.3157894737vw, 20px);
  }
}
@media (width <= 768px) {
  .interview .card .comment {
    font-size: min(4.2553191489vw, 20px);
  }
}
.interview .card .driver {
  font-weight: 500;
  text-align: center;
}
.interview .card-body p {
  line-height: 1.5;
}
@media (width > 768px) {
  .interview .card-body p {
    padding-block: 2.1929824561vw 3.6549707602vw;
  }
}
@media (width <= 768px) {
  .interview .card-body p {
    padding-block: 5.3191489362vw 7.9787234043vw;
  }
}
@media (width > 768px) {
  .interview .card-body figure {
    margin-bottom: 2.9239766082vw;
  }
}
@media (width <= 768px) {
  .interview .card-body figure {
    margin-bottom: 5.3191489362vw;
  }
}
.interview .avatar {
  overflow: hidden;
  border-radius: 50%;
}
.interview .avatar img {
  transition: 0.4s;
}
.interview .entry-btn {
  text-align: center;
}
@media (width > 768px) {
  .interview .entry-btn {
    margin-top: 5.8479532164vw;
  }
}
@media (width <= 768px) {
  .interview .entry-btn {
    margin-top: 10.6382978723vw;
  }
}
.interview .entry-btn .button {
  max-width: 100%;
}
.interview .entry-btn .button img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.interview .entry-btn .button span {
  mask-image: url(../img/recruit_days/label-entry.svg);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  background-color: #fff;
}
.interview .entry-btn .button small {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  transition: 0.2s;
}
.interview .entry-btn .button:hover span {
  background-color: var(--color-red);
}
.interview .entry-btn .button:hover small {
  color: var(--color-red);
}
@media (width > 768px) {
  .interview .entry-btn .button {
    width: 45.3216374269vw;
    height: 4.7514619883vw;
    font-size: clamp(12px, 0.730994152vw, 20px);
  }
  .interview .entry-btn .button .taxi {
    left: 2.485380117vw;
    width: 3.3625730994vw;
  }
  .interview .entry-btn .button .bus {
    left: 6.8713450292vw;
    width: 3.3625730994vw;
  }
  .interview .entry-btn .button span {
    width: 7.3099415205vw;
    height: 1.5350877193vw;
  }
  .interview .entry-btn .button small {
    left: calc(50% + 4.0204678363vw);
  }
}
@media (width <= 768px) {
  .interview .entry-btn .button {
    width: 106.3829787234vw;
    height: 15.9574468085vw;
    font-size: min(2.6595744681vw, 20px);
  }
  .interview .entry-btn .button .taxi {
    left: 5.3191489362vw;
    width: 9.3085106383vw;
  }
  .interview .entry-btn .button .bus {
    left: 17.2872340426vw;
    width: 9.3085106383vw;
  }
  .interview .entry-btn .button span {
    width: 21.2765957447vw;
    height: 4.5212765957vw;
  }
  .interview .entry-btn .button small {
    left: calc(50% + 11.9680851064vw);
  }
}
.interview .bg-video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
@media (width > 768px) {
  .interview .bg-video {
    height: 22.9532163743vw;
  }
}
@media (width <= 768px) {
  .interview .bg-video {
    height: 37.2340425532vw;
  }
}

/* エントリーボタン */
.btn-entry {
  position: fixed;
  z-index: 2;
}
@media (width > 768px) {
  .btn-entry {
    width: 10.5994152047vw;
    right: 0.730994152vw;
    bottom: 0.730994152vw;
  }
}
@media (width <= 768px) {
  .btn-entry {
    width: 21.2765957447vw;
    right: 1.329787234vw;
    bottom: 19.9468085106vw;
  }
}