/* ==========================================================================
   先輩ドライバーの声 / あるドライバーの一日
   ========================================================================== */

/* --- 先輩ドライバーの声 ------------------------------------------------ */

.lx-voices {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--lx-gray);
}

.lx-voices__block {
  position: relative;
  padding: 32px 20px;
  background: var(--lx-red);
}

.lx-voices__block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/texture-dark.webp") center / cover no-repeat;
  opacity: 0.2;
}

.lx-voices__block.is-first {
  padding-top: 125px;
}

.lx-voices__title {
  top: 50px;
  left: 0;
  width: 303px;
}

.lx-voices__title .lx-slant-title__text {
  top: 4px;
  left: 19px;
}

.lx-voices__title .lx-green {
  font-size: 36px;
}

.lx-voice {
  position: relative;
  min-height: 645px;
  padding: 212px 19px 20px;
  background: var(--lx-white);
}

.lx-voices__block.is-first .lx-voice {
  min-height: 597px;
}

.lx-voice__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 174px;
  height: 199px;
  overflow: hidden;
}

.lx-voice__photo img {
  width: 174px;
  height: 199px;
  object-fit: cover;
}

.lx-voice__no {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 37px;
  padding: 2px 0 0 16px;
  background: url("../images/voice-label.svg") 0 0 / 100% 100% no-repeat;
  color: var(--lx-white);
  font-size: 13.85px;
  line-height: 30px;
  white-space: nowrap;
}

.lx-voice__no span {
  font-size: 22px;
}

.lx-voice__person {
  position: absolute;
  top: 88px;
  left: 186px;
}

.lx-voice__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  white-space: nowrap;
}

.lx-voice__profile {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.06em;
  white-space: nowrap;
  font-feature-settings: "palt";
}

.lx-voice__compare {
  position: relative;
  display: flex;
  align-items: center;
  width: 319px;
  height: 89px;
}

.lx-voice__before,
.lx-voice__after {
  height: 89px;
  padding-top: 3px;
  text-align: center;
}

.lx-voice__before {
  width: 140px;
  background: #bdc0c4;
  color: #535353;
}

.lx-voice__after {
  width: 152px;
  margin-left: auto;
  background: var(--lx-green);
}

.lx-voice__before p,
.lx-voice__after p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.lx-voice__before .lx-en-italic,
.lx-voice__after .lx-en-italic {
  margin-bottom: -2px;
  font-weight: 500;
  line-height: 30px;
}

.lx-voice__before .lx-en-italic {
  color: var(--lx-white);
}

.lx-voice__after .lx-en-italic {
  color: var(--lx-red);
}

.lx-voice__arrow {
  position: absolute;
  top: 31.5px;
  left: 145.5px;
  transform: rotate(-90deg);
}

.lx-voice__headline {
  width: 310px;
  margin-top: 19px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

/* Figma では VOICE 01 の見出しだけ幅331pxで字詰めして2行に収めている */
.lx-voices__block.is-first .lx-voice__headline {
  width: 331px;
  font-feature-settings: "palt";
}

.lx-voice__headline em {
  color: var(--lx-red);
  font-style: normal;
}

.lx-voice__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 310px;
  margin: 16px 0 0 1px;
  font-size: 14px;
  line-height: 1.6;
}

/* --- あるドライバーの一日 ---------------------------------------------- */

.lx-day {
  position: relative;
  z-index: 0;
  height: 1336px;
  background: var(--lx-gray);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94.57%);
}

.lx-day__truck {
  position: absolute;
  top: 1058px;
  left: -65px;
  width: 520px;
  height: 294px;
  object-fit: cover;
  object-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 12.4%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 12.4%, #000 100%);
}

.lx-day__band {
  top: 38px;
  left: 76px;
  width: 314px;
  height: 43px;
}

.lx-day__title {
  position: absolute;
  top: 43px;
  left: 81px;
  font-size: 30px;
  font-weight: 700;
  line-height: 33px;
  white-space: nowrap;
  transform: skewX(-5deg);
}

.lx-day__list {
  position: absolute;
  top: 107px;
  left: 20px;
  width: 350px;
}

/* 時刻の丸をつなぐ点線 */
.lx-day__list::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 24px;
  width: 4px;
  height: 929px;
  background: repeating-linear-gradient(to bottom, #e3b0b0 0 4px, transparent 4px 8px);
}

.lx-day__item {
  position: absolute;
  left: 0;
  width: 350px;
}

.lx-day__item--1 { top: 0; }
.lx-day__item--2 { top: 180px; }
.lx-day__item--3 { top: 381px; }
.lx-day__item--4 { top: 541px; }
.lx-day__item--5 { top: 722px; }
.lx-day__item--6 { top: 903px; }

.lx-day__time {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: linear-gradient(60deg, var(--lx-red) 20%, var(--lx-red-deep) 100%);
  color: var(--lx-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.lx-day__item-title {
  position: absolute;
  top: 12px;
  left: 64px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.lx-day__body {
  position: absolute;
  top: 56px;
  left: 64px;
  width: 214px;
  font-size: 14px;
  line-height: 1.5;
}

.lx-day__icon {
  position: absolute;
}

.lx-day__item--1 .lx-day__icon { top: 92px; left: 280px; transform: rotate(26.16deg); }
.lx-day__item--2 .lx-day__icon { top: 110px; left: 290px; }
.lx-day__item--3 .lx-day__icon { top: 57px; left: 299px; }
.lx-day__item--4 .lx-day__icon { top: 105px; left: 286px; }
.lx-day__item--5 .lx-day__icon { top: 94px; left: 299px; }
.lx-day__item--6 .lx-day__icon { top: 80px; left: 297px; }

.lx-day__note {
  position: absolute;
  top: 1167px;
  left: 84px;
  width: 226px;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.5;
}