@charset "UTF-8";

:root {
  --color-orange: #FF8A50;
  --color-orange02: #FF6B35;
  --color-green-dark: #296037;
}

.--color-green-dark {
  color: var(--color-green-dark);
}

.--text-orange {
  color: var(--color-orange);
}

.p-driver {
  overflow-x: hidden;
}

/* common */
.p-driver-bg-text {
  padding-inline: .5rem;
  color: var(--color-white);
  line-height: 1.5;
  padding-bottom: 3px;

  @media (min-width: 768px) {
    padding-inline: 1rem;
    line-height: 1.7;
    letter-spacing: 0;
  }

  &.--bg-green {
    background-color: var(--color-green-primary);
  }

  &.--bg-orange {
    background-color: var(--color-orange);
  }
}

.--text-bg-line {
  padding-inline: .3rem;
  background-color: var(--color-yellow);
}

.text-bg-green-gradation {
  padding-bottom: 4px;
  padding-inline: .5rem;
  color: var(--color-white);
  background: linear-gradient(90deg, #138B3B 0%, #C8D42C 100%);
}

.text-bg-orange-gradation {
  padding-bottom: 4px;
  padding-inline: .5rem;
  color: var(--color-white);
  background: linear-gradient(270deg, #FBD901 0%, #EA7039 100%);
}

.p-driver-support02-info-title {
  @media(max-width: 767px) {
    margin-bottom: 1rem;
  }
}

span.line {
  display: block;
  width: fit-content;
  margin: .5rem auto;
  padding: 0 .5rem .18rem;

  @media screen and (min-width: 768px) {
    margin: 1rem auto;
  }
}


.js-fadeDown {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s, transform 0.6s;
}

.js-fadeDown.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.--delay-fast {
  transition-delay: 0.3s;
}

.--delay-slow {
  transition-delay: 0.7s;
}


/* hero
————————————————— */
.p-driver-hero {
  padding-block-start: 5.5rem;

  @media(min-width: 768px) {
    padding-block-start: clamp(2rem, 11.805555vw, 10.625rem);
    background-image: url("../../assets/img/driver/sec-fv.jpg");
    background-image: image-set(url("../../assets/img/driver/sec-fv.webp") type("image/webp"),
        url("../../assets/img/driver/sec-fv.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
  }
}

.sp-driver-bg {
  @media(max-width: 767px) {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    min-height: 220.6666vw;
    background-image: url("../../assets/img/driver/sec-fv-sp.jpg");
    background-image: image-set(url("../../assets/img/driver/sec-fv-sp.webp") type("image/webp"),
        url("../../assets/img/driver/sec-fv-sp.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
  }
}

.p-driver-hero-inner {
  display: grid;
}


@media(min-width: 768px) {
  .p-driver-hero-inner {
    min-height: 39.375rem;
  }

  .p-driver-hero-image,
  .p-driver-hero-body {
    grid-area: 1 / 1;
  }
}


.p-driver-hero-body {
  z-index: 1;
  align-self: center;

  @media(min-width: 1080px) {
    align-self: flex-start;
  }
}

.p-driver-hero-image {
  justify-self: flex-end;
  width: min(58.33333vw, 52.5rem);
  margin-inline-end: calc(50% - 50vw);

  @media(min-width: 1440px) {
    margin-inline-end: inherit;
  }

  @media(max-width: 767px) {
    width: calc(100vw - 15px);
    align-self: flex-start;
  }


  img {
    border-radius: min(13.8888vw, 12.5rem) 0 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    @media(min-width: 1440px) {
      border-radius: min(13.8888vw, 12.5rem) 0 min(13.8888vw, 12.5rem) 0;
    }

    @media(max-width: 767px) {
      border-radius: 86.9px 0 0 0;
    }
  }
}

.p-driver-hero-tag {
  display: flex;
  gap: clamp(9px, 1vw, 1rem);

  li {
    width: clamp(4.5rem, 10.5vw, 8rem);
    height: clamp(4.5rem, 10.5vw, 8rem);
    border-radius: 50%;
    background: linear-gradient(315deg, #EA7039 0%, #FBD901 100%);
    font-weight: var(--font-bold);
    font-size: clamp(14px, 3vw, var(--font-size-s-pc));
    display: grid;
    place-items: center;
    color: var(--color-white);
    line-height: 1.25;
  }
}

.p-driver-hero-title {
  text-align: center;
  position: relative;
  padding: 2px 1.12rem;
  background-color: #32713F;
  border-radius: 4px;
  max-width: fit-content;
  margin-top: -14px;
  color: var(--color-yellow);
  font-size: clamp(1rem, 3.64583vw, var(--font-size-sm-pc));
  font-weight: var(--font-semi-bold);
  z-index: 1;
  box-shadow: 4px 4px 0px 0px #F5FF36;

  @media(max-width: 767px) {
    margin-top: 0;
    letter-spacing: 0;
    box-shadow: 2.62px 2.62px 0px 0px #F5FF36;
  }

  em {
    font-size: clamp(var(--font-size-s-sp), 4.1666vw, var(--font-size-m-pc));
  }
}

.p-driver-hero-title::after {
  content: "";
  position: absolute;
  left: 3.9375rem;
  bottom: -22px;
  width: 1.5625rem;
  height: 1.5rem;
  background: url(../../assets/img/driver/fukidashi-arrow.svg) center / contain no-repeat;
  z-index: 0;

  @media(max-width: 767px) {
    left: 2.5rem;
    bottom: -14px;
    width: 17px;
    height: 1rem;
  }
}


.p-driver-hero-copy {
  margin-block-start: 1.1875rem;
}

.p-driver-hero-copy p span {
  margin-top: clamp(10px, 1vw, 1rem);
  display: inline-block;
  padding: 0.375rem 0.25rem 0.375rem 0.3125rem;
  color: var(--color-black-primary);
  background-color: var(--color-white);
  font-size: clamp(28px, 4.2vw, 3rem);
  font-weight: var(--font-bold);
  line-height: var(--lh-m);
}

@media screen and (min-width: 768px) {
  .p-driver-hero-copy p span {
    margin-top: 1rem;
    padding: 0.5rem;
    letter-spacing: var(--tracking-wider);
  }
}

@media(max-width:767px) {
  .p-driver-hero {
    position: relative;
    z-index: 1;
  }

  .p-driver-hero-inner {
    display: grid;
    grid-template-areas:
      "body"
      "image"
      "copy";
  }

  .p-driver-hero-copy {
    margin-block-start: -2rem;
    padding-inline-start: 4px;
  }

  .p-driver-hero-body-sp {
    grid-area: body;
  }

  .p-driver-hero-image {
    grid-area: image;
    margin-top: -6.5625rem;
  }

  .p-driver-hero-copy {
    grid-area: copy;
  }

  .p-driver-hero-body-sp {
    display: flex;
    align-self: flex-start;
    gap: .8rem;
    flex-direction: column-reverse;
  }

  .p-driver-hero-copy {
    align-self: flex-end;
  }
}


/* seminar-new
————————————————— */
.p-driver-seminar {
  padding-top: 1px;
  background: linear-gradient(180deg, #F8F8F8 0%, #FCFCFC 100%);

}

.p-driver-seminar-card {
  margin-top: -3rem;
  position: relative;
  border-radius: clamp(.6rem, 3vw, 1.5rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1;

  @media(max-width: 767px) {
    margin-top: 2rem;
  }
}

.p-driver-seminar-card-inner {
  padding: clamp(1.5rem, 2.4vw, 2rem) 1.25rem clamp(2rem, 6vw, 3rem);
  max-width: 40rem;
  margin-inline: auto;

  img {
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.15));
  }
}

.p-driver-seminar-title {
  padding-block: clamp(.5rem, 2vw, 1.1875rem);
  border-radius: clamp(.6rem, 3vw, 1.5rem) clamp(.6rem, 3vw, 1.5rem) 0 0;
  text-align: center;
  background-color: var(--color-yellow);
  font-size: clamp(1.125rem, 3vw, 2rem);
  line-height: 1.4;

  @media screen and (min-width: 768px) {
    line-height: 1.8;

    &::before {
      content: "\\ ";
    }

    &::after {
      content: "/";
    }
  }

  span {
    font-size: clamp(14px, 3vw, 1.75rem);
  }
}

.p-driver-seminar-button {
  margin-top: clamp(1.5rem, 2vw, 2rem);

  a {
    margin-inline: auto;

    @media(max-width: 767px) {
      height: 3.125rem !important;
    }
  }
}


.p-driver-seminar-card-inner figure {
  display: grid;
  place-items: center;
}

.p-driver-seminar-card-time {
  text-align: center;
  width: 100%;
  padding: 0.46875rem .8rem;
  background-color: var(--color-black-primary);
  color: var(--color-white);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
}


/* nayami
————————————————— */
.p-driver-nayami {
  padding-block: clamp(4rem, 7vw, 7.5rem) clamp(6rem, 7vw, 7.5rem);
  background-image: url("../../assets/img/driver/bg-nayami.jpg");
  background-image: image-set(url("../../assets/img/driver/bg-nayami.webp") type("image/webp"),
      url("../../assets/img/driver/bg-nayami.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: bottom center;

  .c-title {
    letter-spacing: 0;
    line-height: 1.7;
  }
}

.p-driver-nayami-card {
  padding: clamp(2rem, 4.2vw, 3.5rem) clamp(1.25rem, 4.5vw, 3.5rem);
  max-width: 56.75rem;
  margin-inline: auto;
}

.p-driver-nayami-lists {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;

  li {
    display: flex;
    align-items: flex-start;
    gap: clamp(4px, 1vw, 1rem);
    color: var(--color-green-primary);
    font-size: clamp(1rem, 1.7vw, 1.75rem);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1.7;

    @media screen and (min-width: 768px) {
      align-items: center;
    }

    &:before {
      content: "";
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      background: url(../../assets/img/driver/checkbox-circle-orange.svg) center / contain no-repeat;

      @media screen and (max-width: 767px) {
        width: 20px;
        height: 25px;
        background-position: center 5px;
      }
    }
  }
}

.p-driver-nayami-answer {
  padding-block: clamp(1.5rem, 1.5vw, 2.5rem) clamp(3.25rem,5.2vw, 5.5rem);
}

.driver-nayami-answer-title {
  position: relative;
  line-height: 1.4;
  z-index: 2;
  color: var(--color-black-primary);
  text-align: center;
  font-size: clamp(1.75rem, 2.2vw, 3rem);

  em {
    font-size: clamp(2.25rem, 4vw, 4rem);
  }

  .--orange {
    color: var(--color-orange);
  }
}


/* feature
————————————————— */
.p-driver-feature {
  position: relative;
  padding-block: clamp(4rem, 8vw, 5rem) clamp(4rem, 8.8vw, 7.5rem);
  background-image: url("../../assets/img/driver/bg-feature.jpg");
  background-image: image-set(url("../../assets/img/driver/bg-feature.webp") type("image/webp"),
      url("../../assets/img/driver/bg-feature.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: bottom center;
  .p-driver-feature__svg-wrap {
    position: absolute;
    left: 50%;
    top: -50px;
    /* 初期位置 */
    transform: translateX(-50%);
    opacity: 0;
    transition: top 0.8s ease, opacity 0.8s ease;

    &.is-inview {
      top: -20px;
      /* 到達後の位置 */
      opacity: 1;
    }
  }

  @media(max-width: 767px) {
    background-image: url("../../assets/img/driver/bg-feature-sp.jpg");
    background-image: image-set(url("../../assets/img/driver/bg-feature-sp.webp") type("image/webp"),
        url("../../assets/img/driver/bg-feature-sp.jpg") type("image/jpeg"));
  }
}

.p-driver-feature-text {
  color: var(--color-black-primary);
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--font-bold);
  line-height: 1.8;
  letter-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  @media(max-width: 767px) {
    line-height: 1.7;
  }

  &::before,
  &::after {
    color: var(--color-green-primary);
  }

  &:before {
    content: "\\";
    margin-right: .625rem;

    @media(max-width: 767px) {
      margin-right: .5rem;
    }
  }

  &:after {
    content: "/ ";
    margin-left: .625rem;

    @media(max-width: 767px) {
      margin-left: .5rem;
    }
  }
}

.p-driver-feature-lists {
  margin-top: 1rem;

  @media (max-width: 767px) {
    display: grid;
    grid-template-areas: "center center" "left right";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    gap: 0 14px;

    li {
      max-width: 125px;
    }

    li:nth-child(1) {
      grid-area: center;
      transform: translateY(6px) !important;
    }

    li:nth-child(2) {
      grid-area: left;
      margin-inline: auto 0;
    }

    li:nth-child(3) {
      grid-area: right;
      margin-inline: 0 auto;
    }
  }
}

.p-driver-feature-title {
  margin-block-start: 2.5rem;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0;

  &.is-sp {
    width: fit-content;
    margin-inline: auto;
    position: relative;

    .ashirai-left {
      top: .5rem;
      position: absolute;
      left: -3.2rem;
    }

    .ashirai-right {
      position: absolute;
      top: .5rem;
      right: -3.2rem;
      transform: scaleX(-1);
    }
  }
}

.p-driver-feature-title .text-bg-green-gradation {
  padding-inline: clamp(0.91rem, 1.2vw, 1.5rem);
  font-size: clamp(1.82rem, 4.9vw, 3rem);

  span {
    font-size: clamp(1.21375rem, 3.2vw, 2rem);
  }
}

.p-driver-feature-members {
  padding-inline: min(5.5555vw, 5rem);

  @media(max-width: 767px) {
    padding-inline: 0;
    margin-block-start: 0.3125rem;
  }
}

/* card */
.p-driver-feature-card {
  padding: 4rem 2.5rem;
  border-radius: 1.5rem;
  border: 2px solid var(--color-green-primary);
  box-shadow: 4px 4px 0 var(--color-green-primary);

  @media(max-width: 767px) {
    padding: 2.54rem .875rem 2rem;
    position: relative;
    margin-block-start: -15px;
    z-index: 1;
  }
}

.p-driver-feature-top {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);

  @media(max-width: 767px) {
    flex-direction: column-reverse;
    align-items: center;
  }
}

.p-driver-feature-card-image {
  width: min(26vw, 23.43rem);

  @media(max-width: 767px) {
    width: min(92vw, 20rem);
  }

  img {
    border-radius: .5rem;
  }
}

.p-driver-feature-body {
  .toppage-works-text {
    margin-top: .5rem;
  }
}

.p-driver-feature-body-title {
  @media(min-width: 768px) {
    text-align: left;
  }
}

.p-driver-feature-body-text {
  margin-block-start: clamp(.5rem, 2vw, 2.5rem);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: var(--font-bold);
  text-align: center;

  @media(min-width: 768px) {
    text-align: left;

    em {
      padding-block: .5rem .55rem;
    }
  }
}

.p-driver-feature-crown {
  margin-block-start: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 2vw, 3rem);

  @media(max-width: 767px) {
    margin-block-start: 2.375rem;
  }

  .toppage-crown-list {
    padding-inline: clamp(2.5rem, 2.2vw, 3rem);

    .--light-green {
      color: var(--color-green-secondary);
    }

    .toppage-crown-list-total {
      color: var(--color-black-tertiary);
    }

    &::before,
    &::after {
      width: clamp(1.5rem, 2vw, 2rem);
    }
  }

  @media(max-width: 767px) {
    flex-direction: column;
  }
}

.p-driver-feature-last-message {
  margin-block-start: clamp(3rem, 5.6vw, 4.5rem);

  .line {
    color: var(--color-white);
    background-color: var(--color-green-primary);
    font-size: clamp(1.125rem, 2vw, 2rem);
    font-weight: var(--font-bold);
  }
}

/* specified-skill
————————————————— */
.pーdriver-specified-skill {
  padding-block: clamp(4rem, 10vw, 7.5rem);
  overflow-x: hidden;
}

.pーdriver-specified-qa-block {
  display: grid;
  gap: clamp(2rem, 4.2vw, 3rem);
}

.pーdriver-specified-question,
.pーdriver-specified-answer {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: flex-end;

  .--qa-icon {
    display: grid;
    place-content: center;
    width: clamp(2.5rem, 4vw, 4rem);
    height: clamp(2.5rem, 4vw, 4rem);
    flex: 0 0 clamp(2.5rem, 4vw, 4rem);
    font-size: clamp(25px, 2.8vw, 2.5rem);
    font-family: var(--font-en);
    font-weight: bold;
    border-radius: 50%;
    line-height: var(--lh-m);
  }
}

.pーdriver-specified-question {
  .--qa-icon {
    color: var(--color-green-primary);
    background-color: #EBEBEB;
  }

  .--qa-title {
    font-size: clamp(1.25rem, 3.5vw, 2.5rem);

    span {
      background-color: var(--color-white);
      display: inline-block;
      border-radius: 1.5rem 1.5rem 1.5rem 0;
      border: 1px solid var(--color-green-tertiary);
      box-shadow: 0 2.54px 12.7px #D5E7C3;
      padding: clamp(1.25rem, 2.4vw, 2.125rem) clamp(1.25rem, 3.4vw, 3.4375rem);
      background: linear-gradient(90deg, #138B3B 0%, #C8D42C 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      @media(max-width: 767px) {
        border-radius: 15.24px 15.24px 15.24px 0;
      }
    }
  }
}

.pーdriver-specified-answer {
  flex-direction: row-reverse;

  .--qa-icon {
    color: var(--color-white);
    background-color: var(--color-green-primary);
  }

  .--qa-lead {
    font-size: clamp(1.125rem, 2vw, 1.5rem);

    span {
      background-color: #FFFFE9;
      display: inline-block;
      border-radius: 1.5rem 1.5rem 0 1.5rem;
      border: 1px solid var(--color-green-tertiary);
      box-shadow: 0 4px 20px #D5E7C3;
      padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem);

      @media(min-width: 850px) {
        margin-left: min(12.3vw, 11.125rem);
      }
    }
  }
}

.specified-points {
  margin-block-start: clamp(3rem, 4vw, 5rem);
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);

  @media(max-width: 767px) {
    flex-direction: column-reverse;
  }
}

.specified-points-lists {
  display: grid;
}

.specified-points-list-title {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: clamp(2.3rem, 6.2vw, 3.5rem);
  color: var(--color-green-primary);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--font-bold);

  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: clamp(2rem, 5.2vw, 2.5rem);
    height: clamp(2rem, 5.2vw, 2.5rem);
    background: url(../../assets/img/driver/ri-lightbulb-line.svg) center / contain no-repeat;
  }
}

.specified-points-list {
  padding-block: 2rem;
  border-bottom: solid 1px var(--color-divider);

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    @media(max-width: 767px) {
      border-bottom: 0;
      padding-block-end: 0;
    }
  }

  p,
  ul {
    margin-top: 1rem;
    padding-inline-start: 10px;
  }

  li {
    position: relative;
    padding-inline-start: 1rem;
  }

  li::before {
    position: absolute;
    left: 0;
    content: "・";
    color: var(--color-green-secondary);
  }
}


.specified-points-image {
  margin-right: calc(50% - 50vw);

  @media(max-width: 767px) {
    padding-left: 0.9375rem;
  }

  @media(min-width: 768px) {
    max-width: 44.8vw;
  }
}

/* reason
————————————————— */
.p-driver-reason {
  padding-block: clamp(4rem, 10vw, 6rem) clamp(4.375rem, 10vw, 5.75rem);
  background-image: url("../../assets/img/driver/bg-reason-new.jpg");
  background-image: image-set(url("../../assets/img/driver/bg-reason-new.webp") type("image/webp"),
      url("../../assets/img/driver/bg-reason-new.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: bottom center;

  @media(max-width: 767px) {
    background-image: url("../../assets/img/driver/bg-reason-sp-new.jpg");
    background-image: image-set(url("../../assets/img/driver/bg-reason-sp-new.webp") type("image/webp"),
        url("../../assets/img/driver/bg-reason-sp-new.jpg") type("image/jpeg"));
  }
}

.p-driver-reason-title {
  text-align: center;
  line-height: var(--lh-m);

  @media(min-width: 768px) {
    line-height: 1.8;
    letter-spacing: 0;
  }
}

.p-driver-reason-title .text-bg-green-gradation {
  padding-inline: clamp(15px, 1.2vw, 1.5rem);
  font-size: clamp(2.25rem, 4.9vw, 2.75rem);

  span {
    font-size: 2rem;
  }
}


@media(max-width: 767px) {
  .p-driver-reason-title .text-bg-green-gradation:nth-child(n+ 2) {
    margin-top: 14px;
    display: inline-block;
  }
}

.p-driver-reason-text {
  color: var(--color-black-primary);
  text-align: center;
  padding-block: clamp(2.5rem, 2.5vw, 3.5rem) 1rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--font-bold);
  line-height: var(--lh-m);

  @media(min-width: 768px) {
    letter-spacing: 0;
  }
}

.driver-reason-sub-title {
  line-height: var(--lh-ss);
}

.driver-support-banner-heading.--reason {
  .--plus {
    font-size: 1.75rem;
  }
}

.driver-reason-sub-title span {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}


.dakara-yellow {
  text-align: center;
  margin-block: clamp(1.5rem, 2vw, 2.5rem) .5rem;
  @media(max-width: 767px) {
    margin-bottom: 1.5rem;
  }
  svg {
    margin-inline: auto;

    @media(max-width: 767px) {
      width: 90px;
      height: 40px;
    }
  }
}

.p-driver-reason-message {
  text-align: center;
}

.p-driver-reason-message .line {
  background-color: var(--color-white);
  color: var(--color-green-primary);
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  font-weight: var(--font-bold);
  line-height: 1.6;
}


/* ご紹介
————————————————— */
.p-driver-support {
  padding-block: clamp(4rem, 5.8vw, 5rem);
}

.p-driver-support-lead-l {
  /* 20〜24px */
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.p-driver-support-lead-lm {
  line-height: 1.75;
  /* 16〜20px */
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}


.p-driver-support-lead-m {
  line-height: 1.75;
  /* 16〜18px */
  font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.p-driver-support-lead {
  /* 14〜16px */
  font-size: clamp(.875rem, 1.8vw, 1rem);
  margin-top: 1.5rem;
  line-height: 1.75;
}

@media(min-width:768px) {
  .p-driver-support-inner {
    max-width: 52.5rem;
    margin-inline: auto 0;
  }
}

@media(min-width: 768px) and (max-width: 1339px) {
  .p-driver-support-inner {
    max-width: min(67.3vw, 52.5rem);
  }
}


.p-driver-support-list {
  margin-block-start: clamp(2rem, 2.8vw, 2.5rem);
  padding: clamp(0.9375rem, 2.5vw, 2rem);

  &.--bg-light-green {
    background-color: var(--bg-light-green);
  }

  &.--support-list01 {
    @media(max-width: 767px) {
      margin-top: 2.5rem;
    }
  }

  &.--support-list02 {
    margin-top: 2rem;
  }
}

.p-driver-supports {
  background-color: #fff;
  padding-block-start: clamp(1.5rem, 5.8vw, 5.5rem);
}

/* 選ばれる理由　ボタン */
.p-driver-supports-nav-container {
  padding: min(2.3333vw, 3rem) min(2.2vw, 2.5rem);
  border-radius: 0 1rem 1rem 0;
  border: 2px solid #F2F2E3;
  background: linear-gradient(180deg, #FAFAF1 0%, #F6F6EC 100%);
  position: fixed;
  left: 0;
  top: clamp(4rem, 8vw, 7.5rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: -1;

  @media(min-width: 1280px) {
    padding: min(3.3333vw, 3rem) min(2.7777vw, 2.5rem);
  }
}

@media(min-width: 1000px) {
  .p-driver-supports-nav-container-sp {
    display: none;
  }
}

.p-driver-supports-nav-container.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 7;
}

.p-driver-reason-nav-title {
  color: var(--color-black-tertiary);
  font-size: .875rem;
  font-weight: var(--font-medium);
  letter-spacing: .1em;
  line-height: 1.7;
}

.p-driver-reason-nav-list {
  margin-top: 2rem;
  display: grid;
  gap: 2rem;
}


.p-driver-reason-nav-heading {
  font-size: var(--font-size-3s-pc);
  font-weight: var(--font-bold);
  line-height: var(--lh-m);

  &.--green {
    color: var(--color-green-primary);
  }

  &.--orange {
    color: var(--color-orange);
  }
}


.p-driver-reason-nav-subItem a {
  position: relative;
  padding-left: 1rem;
  font-size: min(1.3vw, .9375rem);
  font-weight: var(--font-medium);
  letter-spacing: 0;
  line-height: 1.6;
  transition: var(--duration-fast);

  &:before {
    position: absolute;
    left: 0;
    color: #cecece;
    content: "-";
  }
}

.p-driver-reason-nav-subList {
  margin-block-start: .5rem;
  display: grid;
  gap: 1rem;
}

.p-driver-reason-nav-subList.--green a:hover,
.p-driver-reason-nav-subList.--green a:focus {
  color: var(--color-green-primary);
  text-decoration: underline;
}

.p-driver-reason-nav-subList.--orange a:hover,
.p-driver-reason-nav-subList.--orange a:focus {
  color: var(--color-orange);
  text-decoration: underline;
}

.p-driver-reason-nav-subList a.is-active {
  text-decoration: underline;

  &:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
  }
}

.p-driver-reason-nav-subList.--green a.is-active {
  color: var(--color-green-primary);

  &:before {
    background-color: var(--color-green-primary);
  }
}

.p-driver-reason-nav-subList.--orange a.is-active {
  color: var(--color-orange);

  &:before {
    background-color: var(--color-orange);
  }
}

@media(max-width: 999px) {
  .p-driver-supports-nav-container {
    display: none;
  }

  .p-driver-supports-nav-container-sp {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: -1;
  }

  .p-driver-supports-nav-container-sp.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 7;
  }

  .p-driver-reason-nav-subList-sp {
    display: flex;
    justify-content: stretch;
  }

  /* グリーン側（40%） */
  .p-driver-reason-nav-lists-sp.--green {
    flex: 0 0 40%;
    max-width: 40%;

    a:hover,
    a:focus,
    a.is-active {
      color: var(--color-green-primary);
    }
  }

  /* オレンジ側（60%） */
  .p-driver-reason-nav-lists-sp.--orange {
    flex: 0 0 60%;
    max-width: 60%;

    a:hover,
    a:focus,
    a.is-active {
      color: var(--color-orange);
    }
  }

  .p-driver-reason-nav-heading-sp {
    text-align: center;
    padding: .25rem 1rem;
    color: var(--color-white);
    font-size: 12px;
    font-weight: var(--font-bold);
    letter-spacing: 0;

    &.--green {
      background-color: var(--color-green-primary);
      border-right: 1px solid var(--color-green-primary);
    }

    &.--orange {
      background-color: var(--color-orange);

    }
  }

  /* サブリストを1行に並べる */
  .p-driver-reason-nav-subList-sp {
    display: flex;

  }

  .p-driver-reason-nav-subItem-sp {
    flex: 1 1 auto;
  }

  .p-driver-reason-nav-subItem-sp:first-child a {
    border-left: none;
  }


  .p-driver-reason-nav-subItem-sp a {
    background: linear-gradient(180deg, #FAFAF1 0%, #F6F6EC 100%);
    display: block;
    width: 100%;
    padding: 0.75rem 0.5rem;
    font-weight: bold;
    font-size: 14px;
    font-weight: var(--font-bold);
    text-align: center;
    color: var(--color-black-tertiary);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--color-divider);
    border-top: none;
    border-left: none;
  }

  @media (max-width: 999px) {

    /* ブラウザ標準スクロール/scrollIntoView用のオフセット */
    html {
      scroll-padding-top: var(--anchor-offset, 100px);
    }

    /* 念のためターゲット側にも */
    [id] {
      scroll-margin-top: var(--anchor-offset, 100px);
    }
  }
}

/****************************************/

/* 人材紹介 */
.p-driver-support.--human {
  padding-block-start: 0;

  .driver-support-human-text {
    font-size: clamp(1.25rem, 1.8vw, 1.25rem);
    line-height: var(--lh-m);

    @media(max-width: 767px) {
      text-align: center;
      color: var(--color-black-primary);
    }

    strong {
      font-weight: var(--font-bold);
      color: var(--color-black-primary);
    }
  }

  .driver-support-human-text2 {
    font-size: 1.25rem;
    font-weight: var(--font-bold);

    @media(max-width: 767px) {
      text-align: center;
      color: var(--color-black-primary);
    }

    em {
      margin-block: .5rem .3rem;
      display: block;
      font-size: clamp(1rem, 1.2vw, 1.25rem);
      font-weight: var(--font-semi-bold);

      @media(max-width: 767px) {
        color: var(--color-green-secondary);
        text-align: center;
        position: relative;
        padding-block-end: 2rem;

        &:after {
          position: absolute;
          content: "";
          width: 1.5rem;
          height: 1.5rem;
          bottom: .8rem;
          left: 50%;
          transform: translateX(-50%);
          background: url(../../assets/img/driver/ri-arrow-right-fill.svg) center / contain no-repeat;
        }
      }
    }

    .p-driver-bg-text {
      margin-inline-end: .5rem;
      font-size: 1.5rem;
      font-weight: var(--font-bold);
      padding-inline: .5rem;

      @media(max-width: 767px) {
        padding: 1rem;
        display: block;
        width: fit-content;
        margin-inline: auto;
        margin-block-end: .5rem;
      }
    }
  }
}

.driver-support-human-image {
  margin-block-start: 1.5rem;
  background: var(--color-white);

  img {
    border-radius: 1rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  }
}

.p-driver-support.--flow {
  background-color: #FFF7F3;

  .p-driver-support-list {
    padding-block: clamp(1rem, 2vw, 2.5rem);
  }
}

.p-driver-support-title {
  margin-block-end: clamp(35px, 2.5vw, 4rem);
  position: relative;
  font-size: clamp(1.75rem, 2.2vw, 2.5rem);
  line-height: var(--lh-m);

  &:after {
    position: absolute;
    left: 0;
    bottom: -12px;
    content: "";
    width: 100%;
    height: 4px;
  }

  &.--green {
    color: var(--color-green-dark);

    &::after {
      background: linear-gradient(90deg, #138B3B 0%, #C8D42C 100%);
    }
  }

  &.--orange {
    color: var(--color-orange02);

    &::after {
      background: linear-gradient(270deg, #FBD901 0%, #EA7039 100%);
    }
  }
}

.p-driver-support-item-title {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.1vw, 14px);

  h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.7;

    @media(max-width: 767px) {
      line-height: var(--lh-m);
    }
  }

  span {
    font-family: var(--font-en);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: var(--font-semi-bold);
  }

  &.--green {
    color: var(--color-green-primary);

    span {
      background: linear-gradient(90deg, #138B3B 0%, #C8D42C 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &.--orange {
    color: var(--color-orange02);

    span {
      background: linear-gradient(270deg, #FBD901 0%, #EA7039 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

@media(max-width: 767px) {
  .p-driver-support-title {
    text-align: center;
  }
}

.p-driver-support-item.--01 {
  margin-block-start: 1.5rem;
  display: flex;
  flex-direction: column;

  img {
    width: 100%;
  }

  @media(min-width: 768px) {
    flex-direction: inherit;

    figure {
      max-width: 34.4%;
    }
  }
}


@media(min-width: 768px) and (max-width: 1080px) {
  .p-driver-support-item.--01 img {
    height: 100%;
    object-fit: cover;
  }
}

@media(max-width: 767px) {
  .p-driver-support-item.--01:first-of-type {
    margin-top: 1rem;
  }
}

.p-driver-support-item01-body {
  flex: 1;
  padding: 1rem clamp(1rem, 1.2vw, 1.5rem);
  background-color: var(--color-white);
}

.p-driver-support-item01-body h4 {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: 1.125rem;
  color: #5FB377;
  font-size: clamp(1.125rem, 1.3vw, 1.25rem);
  font-weight: var(--font-bold);

  &:before {
    position: absolute;
    content: "";
    left: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: #5FB377;
  }
}

.p-driver-support-item01-lists {
  margin-block-start: clamp(4px, .8vw, .5rem);
  padding-inline-start: clamp(1rem, 1.3vw, 1.5rem);
}

.p-driver-support-item01-lists li {
  position: relative;
  color: var(--color-black-primary);
  padding-inline-start: .8rem;

  @media(min-width: 768px) {
    line-height: var(--lh-m);
    padding-inline-start: 1rem;
  }

  &:before {
    position: absolute;
    left: 0;
    content: "・";
    color: var(--color-green-secondary);
  }
}

/* カード内（画像・テキスト横並び共通スタイル） */
.p-driver-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  @media(max-width: 767px) {
    display: grid;
  }
}

.p-driver-info-body-text {
  margin-top: clamp(.5rem, 1vw, 1rem);
  color: var(--color-black-primary);
  font-weight: var(--font-bold);
  line-height: 1.75;
}

/* 02 ドライバー教育 */
.p-driver-support-card {
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);

  .p-driver-info-image {
    width: 100%;

    @media(min-width: 768px) {
      max-width: min(24.30555vw, 21.875rem);
      flex: 0 0 min(24.30555vw, 21.875rem);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: .875rem;
    }
  }
}

.p-driver-info-body h4 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);

  span {
    padding-bottom: 2.8px;
  }
}

.driver-support-skill-lists {
  color: var(--color-black-primary);

  margin-block-start: 1.5rem;
  display: grid;
  gap: 1rem;

  @media(min-width: 768px) {
    padding-block-end: 4px;
  }

  ul {
    margin-top: .5rem;
    display: grid;
    gap: 4px;

    li {
      position: relative;
      padding-left: 1rem;

      &:before {
        position: absolute;
        left: 0;
        content: "・";
        color: var(--color-green-secondary);
      }
    }
  }
}

.skill-list-title {
  display: flex;
  align-items: center;

  img {
    width: clamp(3.5rem, 8vw, 4.375rem);
  }

  span {
    padding: 4px clamp(.5rem, 1.4vw, 1rem);
    background-color: #FFFFE9;
    color: #5FB377
  }
}

.p-driver-info-bottom {
  margin-block-start: clamp(1.5rem, 2vw, 2.5rem);
  display: flex;
  gap: clamp(1.5rem, 2vw, 2.5rem);

  @media(max-width: 767px) {
    display: grid;
  }
}

.p-driver-info-bottom-body {
  p {
    margin-block-start: .5rem;
  }
}

.p-driver-sub-title {
  color: #5FB377;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: var(--font-bold);
}

.p-driver-info-bottom-table {
  color: var(--color-black-primary);
  flex: 0 0 15rem;
  padding: 1.25rem;
  border: 1px solid var(--color-green-tertiary);
  font-size: .875rem;
  line-height: 1.75;

  th {
    vertical-align: text-top;
    font-weight: var(--font-regular);
  }
}

/* Staff */
.p-driver-support-staff {
  margin-block: 1rem 1.5rem;
  background-color: var(--bg-gray);
  padding: clamp(1.25rem, 1.6vw, 1.5rem) clamp(0.9375rem, 1.8vw, 2.5rem);
}

.p-driver-support-staff-inner {
  display: flex;
  gap: clamp(1rem, 1.3vw, 1.5rem);

  @media(max-width: 767px) {
    display: grid;
  }

  figure {
    max-width: 240px;

    @media(max-width: 767px) {
      max-width: 253px;
      margin-inline: auto;
    }
  }
}

.driver-support-staff-memo {
  color: var(--color-black-tertiary);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.75;

  dd::before {
    content: "● ";
  }
}

.driver-support-staff-text {
  margin-block-start: .5rem;
}

@media(max-width: 767px) {
  .driver-support-staff-name {
    margin-block-end: .5rem;
    line-height: var(--lh-m);
  }
}

.p-driver-support-card-last-message p {
  line-height: var(--lh-m);
  margin-block-start: .5rem;
}

@media(max-width: 767px) {
  .p-driver-support-card-last-message {
    .p-driver-sub-title {
      line-height: var(--lh-m);
    }

    P {
      line-height: 1.75;
    }
  }
}

.driver-support-plus-icon {
  width: 2rem;
  margin-inline: auto;
  margin-block: 1.5rem 1rem;
}

/* 外免切替サポート-- */
.p-driver-support-license {
  background-color: #FFFFE9;
  padding: clamp(1rem, 1.5vw, 1.75rem) clamp(1rem, 2vw, 2.5rem) clamp(1rem, 1.3vw, 1.5rem);
}

.support-license-title {
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.5rem);

  span.text-bg-green-gradation {
    padding: 4px 1rem 6px;

    @media(max-width: 767px) {
      margin-inline: auto;
      display: block;
      width: fit-content;
    }
  }
}

.p-driver-support-license-lists {
  margin-block-start: 1.5rem;
}

.p-driver-support-license-list {
  padding-block: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;

  @media(max-width: 767px) {
    align-items: flex-start;
    gap: 1rem;
  }

  figure {
    flex: 0 0 clamp(3.5rem, 8vw, 7.5rem);
    max-width: clamp(3.5rem, 8vw, 7.5rem);
    width: 100%;
  }

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    padding-bottom: 0;
  }

  &:nth-child(n + 2) {
    border-top: 1px solid var(--color-divider);
  }
}

.support-license-body-title {
  color: #5FB377;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: var(--font-bold);
  line-height: var(--lh-m);
}

.support-license-body-text {
  margin-block-start: 4px;
  color: var(--color-black-primary);
  font-size: clamp(13px, 1.8vw, 1rem);
  line-height: 1.75;
}

/* サポート体制
————————————————— */
.p-driver-support-flow-text {
  font-size: clamp(14px, 1.6vw, 1.25rem);
  line-height: 1.75;

  @media(min-width: 768px) {
    font-weight: var(--font-semi-bold);
  }
}

.p-driver-info.--flow {
  margin-block-start: 2rem;

  @media(min-width: 768px) {
    .p-driver-info-body {
      margin-block-start: 0;
      padding-inline-start: 1.5rem;
    }
  }

  .p-driver-info-image {
    width: 100%;

    @media(min-width: 768px) {
      max-width: min(29.36vw, 23.625rem);
      flex: 0 0 min(29.36vw, 23.625rem);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: .875rem;
    }
  }
}



.p-driver-flow-lead {
  font-size: clamp(1.125rem, 2vw, 1.25rem);

  @media(max-width: 767px) {
    line-height: var(--lh-m);
  }
}

.driver-support-flow01 {
  position: relative;
  margin-block-start: 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6.0625rem;

  @media(max-width: 767px) {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

.support-flow01-item {
  max-width: 17.5rem;
  width: 100%;

  .p-driver-support-lead {
    margin-top: 1rem;
  }
}

.support-flow01-item-image {
  text-align: center;
  max-width: 17.5rem;
  margin-inline: auto;

  figcaption {
    position: relative;
    margin-top: -2rem;
    background-color: var(--color-white);
    border: solid 1px var(--color-orange02);
    padding: 9px .5rem;
    color: var(--color-orange02);
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    z-index: 1;
  }
}

.triangle {
  text-align: center;

  @media(min-width: 768px) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  span {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 30px solid #ffeab2;
    border-right: 0;

    @media(max-width: 767px) {
      border-right: 25px solid transparent;
      border-left: 25px solid transparent;
      border-top: 30px solid #ffeab2;
      border-bottom: 0;
    }
  }
}

/* 02 */
.p-drive-support-cards {
  margin-top: clamp(1.5rem, 2.2vw, 2rem);
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(3, 1fr);

  @media(max-width: 767px) {
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
  }

  &.--interview {
    @media(min-width: 768px) {
      padding-inline: 1.5rem;
    }
  }

  li {
    max-width: 100%;
    border: none;
    box-shadow: 0 3px 20px #FFEDE4;

    .--card-title {
      color: var(--color-orange);
    }
  }
}

@media(min-width: 768px) {
  .p-drive-support-cards li {
    grid-auto-rows: 48px auto auto;
  }

  .--card-title.--sp {
    display: none;
  }
}

@media(max-width: 767px) {
  .p-drive-support-cards {
    li {
      padding: 15px;
      gap: .5rem;
    }

    .p-service-support-list-card {
      display: flex;
      /* justify-content: space-between; */
    }

    .p-drive-support-body {
      display: block;
    }

    .--card-title.--pc {
      display: none;
    }
  }
  .p-service-support-list-card .--card-title {
    text-align: left;
  }
}

.p-drive-procedure {
  margin-top: 5rem !important;
}

@media(max-width: 767px) {
  .p-drive-procedure {
    margin-top: 2.5rem !important;
  }

  .interview-text {
    margin-top: 1rem;
  }

  .p-drive-support-cards.--last {
    padding-bottom: .5rem;
  }
}


/* support
————————————————— */
.p-driver-support-banner {
  overflow-x: hidden;
  padding-block-start: clamp(2.5rem, 4.5vw, 4rem);
  background-image: url("../../assets/img/driver/bg-support.jpg");
  background-image: image-set(url("../../assets/img/driver/bg-support.webp") type("image/webp"),
      url("../../assets/img/driver/bg-support.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: bottom center;

  @media(max-width: 767px) {
    background-image: url("../../assets/img/driver/bg-support-sp.jpg");
    background-image: image-set(url("../../assets/img/driver/bg-support-sp.webp") type("image/webp"),
        url("../../assets/img/driver/bg-support-sp.jpg") type("image/jpeg"));
  }
}

.driver-support-banner-title {
  line-height: var(--lh-ss);
}

.driver-support-banner-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;

  @media(max-width: 767px) {
    flex-direction: column;
  }

  .--plus {
    color: var(--color-black-primary);
    text-align: center;
    font-size: 1.125rem;
    font-weight: var(--font-bold);
    line-height: var(--lh-ss);
  }

  img {
    width: .875rem;
  }
}

.driver-support-banner-title span {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
}

.driver-support-banner-text {
  color: var(--color-black-primary);
  margin-top: 1rem;
  text-align: center;
  font-weight: var(--font-semi-bold);
  display: flex;
  justify-content: center;
  align-items: center;
 font-size: clamp(1rem, 1.5vw, 1.25rem);
  &::before,
  &::after {
    content: "";
    background-color: var(--color-green-primary);
    height: 4px;
    width: 40px;
    margin-top: 10px;
  }

  &:before {
    margin-right: .8rem;
    transform: rotate(72deg);

    @media(max-width: 767px) {
      margin-right: .5rem;
    }
  }

  &:after {
    margin-left: .8rem;
    transform: rotate(-72deg);

    @media(max-width: 767px) {
      margin-left: .5rem;
    }
  }

  @media(max-width: 767px) {
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: var(--lh-m);
  }
}

.p-driver-support-members {
  margin-block-start: 0.875rem;

  @media(max-width: 767px) {
    margin-block-start: 1.125rem;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}



/* flow
————————————————— */
.p-driver-introduce {
  padding-block: 7.5rem;

  @media(max-width: 767px) {
    background-color: var(--bg-light-green);
    padding-block: 4.15625rem;
  }
}

.p-driver-introduce-title {
  text-align: center;

  span {
    padding-inline: 2.5rem;
  }
}

.p-driver-introduce-inner {
  max-width: 50rem;
  margin-inline: auto;
}

.p-driver-introduce-contents {
  margin-block-start: clamp(2.1875rem, 4vw, 3.375rem);
}

.p-driver-introduce-card {
  margin-top: 2.5rem;
  background-color: var(--bg-light-green);
  padding: 2rem;

  @media(max-width: 767px) {
    padding: 1.5rem 0 0;
    margin-top: 0;
  }
}

.p-driver-introduce-message {
  color: var(--color-black-primary);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: var(--lh-m);

  @media(min-width: 768px) {
    text-align: center;
    font-weight: var(--font-regular);
    color: var(--color-black-secondary);
    letter-spacing: var(--tracking-wider);
    line-height: 1.75;
  }
}

.p-driver-introduce-top {
  padding: clamp(1rem, 1.5vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
  background-color: var(--color-white);
}

.driver-introduce-top-inner {
  display: grid;
  gap: 1rem;

  @media(min-width: 768px) {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

.driver-introduce-top-lists {
  margin-top: .5rem;
  display: grid;
  color: #2B2B2B;
  font-size: .875rem;
  line-height: 1.7;
}

.driver-introduce-top-lists li {
  position: relative;
  list-style: none;
  padding-left: 1.1rem;

  &:before {
    content: "●";
    color: var(--color-orange);
    position: absolute;
    left: 0;
  }

  &.arrow {
    padding-left: 0;

    &:before {
      content: none;
    }
  }
}

.driver-introduce-top-body {
  .--title span {
    color: var(--color-white);
    background-color: var(--color-orange);
    padding: .25rem 1rem;
    line-height: 1.6;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.6;

    @media(max-width:767px) {
      display: block;
      width: 100%;
      text-align: center;
      line-height: var(--lh-m);
    }
  }
}

.driver-introduce-flow {
  margin-block-start: 1.5rem;

  @media(max-width:767px) {
    padding-inline: 10px;
  }
}

.driver-introduce-top-image {
  img {

    @media(max-width:767px) {
      margin-inline: auto;
      max-width: 19.625rem;
      width: 100%;
      aspect-ratio: 157 / 118;
      object-fit: cover;
    }
  }
}

.driver-introduce-top-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  padding: .75rem .9375rem;
  text-align: center;
  color: var(--color-orange);
  border: 2px solid var(--color-orange);
  border-radius: 3.75rem;
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: var(--lh-m);

  @media(min-width: 768px) {
    line-height: 1.6;
    padding: .5rem 1rem;
  }
}



/* FAQ
————————————————— */
.p-driver-faq {
  background-color: var(--bg-light-green);
  padding-block: 4rem;
}

@media screen and (min-width: 768px) {
  .p-driver-faq {
    padding-block: 5rem 7.5rem;
    background-color: var(--color-white);

    .l-container {
      padding-inline: 2rem;
      padding-block: clamp(5rem, 10vw, 7.5rem);
      background-color: var(--bg-light-green);
    }
  }
}

.p-driver-faq-title {
  text-align: center;

  span {
    padding-inline: clamp(1.5rem, 4.2vw, 2.25rem);
    ;
  }
}

.p-driver-faq-lists {
  max-width: 55rem;
  margin-inline: auto;
  margin-block-start: clamp(2.5rem, 8vw, 4.5rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.p-driver-faq .details {
  display: none;
  transition: 0.5s;
}

.p-driver-faq .details.is-visible {
  display: block;
  animation: show 1s linear 0s;
}

@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* もっと見るボタン（全件表示の際に消す） */
.p-driver-faq-button {
  transition: opacity 0.4s ease, margin 0.4s ease, height 0.4s ease;
}

.p-driver-faq-button.is-hidden {
  opacity: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
}

.p-driver-faq .details-summary {
  background-color: var(--color-white);
  border: solid 2px var(--color-green-tertiary);
  border-radius: clamp(1rem, 1.3vw, 1.25rem) clamp(1rem, 1.3vw, 1.25rem) clamp(6px, 1.3vw, 1.25rem) 0;
  position: relative;
  display: flex;
  gap: .5rem;
  padding: 1.5rem 2.875rem 1.5rem 1.5rem;
  color: var(--color-green-primary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: bold;
  line-height: var(--lh-m);
}

.p-driver-faq .details-summary:hover {
  cursor: pointer;
  opacity: 0.8;
}

.question-mark,
.answer-mark {
  font-family: var(--font-en);
}

.answer-mark {
  line-height: 1.5;
  font-weight: var(--font-bold);
  color: var(--color-green-primary);
  font-size: 1.25rem;
}

.details-content-textarea {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.p-driver-faq .details-summary .btn {
  position: absolute;
  top: 37%;
  right: 1.2rem;
  width: 18px;
  height: 18px;
  transform-origin: center center;
  transition-duration: 0.2s;
}

.p-driver-faq .details-summary .btn:before,
.p-driver-faq .details-summary .btn:after {
  content: "";
  background-color: var(--color-green-primary);
  border-radius: 10px;
  width: 17px;
  height: 3px;
  position: absolute;
  top: 7px;
  left: 0;
  transform-origin: center center;
}

.p-driver-faq .details-summary .btn:before {
  width: 3px;
  height: 17px;
  top: 0;
  left: 7px;
}

.p-driver-faq .details-summary.is-active .btn {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.p-driver-faq .details-summary.is-active .btn:before {
  content: none;
}

.p-driver-faq .details-summary::-webkit-details-marker {
  display: none;
}

.p-driver-faq .details-content {
  margin-top: 1rem;
  border: solid 2px var(--color-green-tertiary);
  border-radius: clamp(1rem, 1.3vw, 1.25rem) clamp(1rem, 1.3vw, 1.25rem) 0 clamp(1rem, 1.3vw, 1.25rem);
  margin-inline-start: clamp(1.5rem, 5vw, 6.375rem);
  background-color: #FFFFE9;
  padding: 20px;
}

.p-driver-faq .details-content .close-btn {
  display: block;
  font-size: 1rem;
  margin-inline: auto 0;
  background-color: transparent;
  color: var(--color-green-primary);
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &::before {
    content: '×';
    margin-right: 0.5rem;
    display: inline-block;
  }
}

.p-driver-faq .details-content .close-btn:hover {
  opacity: 0.8;
}

.p-driver-faq .details-content p {
  margin: 0 0 20px;
  color: #333;
  font-size: clamp(14px, 1.4vw, 1rem);
  line-height: 1.75;
  text-align: left;
}

.p-driver-faq .details-content p:last-of-type {
  margin-block-end: 1rem;
}

.p-driver-faq-button {
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);

  button {
    margin-inline: auto;
  }
}

/* seminar
————————————————— */
.p-driver-seminar-lists {
  padding-block: 5rem 6.75rem;
  background-color: var(--bg-gray);
  @media(max-width: 767px) {
    padding-block: 5rem;
  }
}

.driver-seminar-lists-title {
  text-align: center;

  span {
    display: inline-block;
    padding-inline: clamp(1.5rem, 3.8vw, 2rem);
  }
}

.driver-seminar-lists .swiper {
  padding-block: 2.5rem 5.625rem;
  background-color: var(--bg-gray);

  @media(max-width: 767px) {
    padding-block: 2rem 4.375rem;
    padding-inline: 1.25rem;
  }

  .swiper-pagination {
    bottom: 2rem;

    @media(max-width: 767px) {
      bottom: 1.5rem;
    }
  }

  .swiper-pagination-bullet {
    background-color: #CECECE;
    opacity: 1;
    margin-inline: 5px;
    width: 6px;
    height: 6px;

    @media screen and (min-width: 768px) {
      margin-inline: .5rem;
      width: 10px;
      height: 10px;
    }
  }

  .swiper-pagination-bullet-active {
    background: var(--color-green-primary);
  }

  /* 前へ次への矢印カスタマイズ */
  .swiper-button-prev,
  .swiper-button-next {
    height: 4rem;
    width: 4rem;

    @media(min-width: 768px) and (max-width: 1199px) {
      height: 3rem;
      width: 3rem;
    }
  }

  /* 前へ次への矢印カスタマイズ */
  .swiper-button-prev::after,
  .swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 4rem;
    margin: auto;
    width: 4rem;

    @media(min-width: 768px) and (max-width: 1199px) {
      height: 3rem;
      width: 3rem;
    }
  }

  .swiper-button-prev {
    left: 30vw;

    @media(min-width: 768px) and (max-width: 1199px) {
      left: .5rem;
    }
  }

  /* 前への矢印カスタマイズ */
  .swiper-button-prev::after {
    background-image: url(../../assets/img/driver/slider-butoon.svg);
  }

  .swiper-button-next {
    right: 30vw;

    @media(min-width: 768px) and (max-width: 1199px) {
      right: .5rem;
    }
  }

  /* 次への矢印カスタマイズ */
  .swiper-button-next::after {
    background-image: url(../../assets/img/driver/slider-butoon.svg);
    transform: scaleX(-1);
  }
}

@media(max-width: 767px) {

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}



.driver-seminar-lists {
  margin-block-start: 3.5rem;

  @media(max-width: 767px) {
    margin-block-start: 2.625rem;
  }

  .p-seminar__list-time {
    gap: 0;
    flex-direction: column;
    align-items: flex-start;
  }
}

.p-driver-seminar-button {
  margin-block-start: clamp(2rem, 3vw, 2.5rem);

  a {
    margin-inline: auto;
  }
}

/* CTA-driver
—————————————————— */
.l-cta.p-driver-cta {
  padding-block: clamp(3rem, 5vw, 6rem);
}

.p-driver-cta-card {
  margin-top: -1.1rem;
  border-radius: 1rem;
  padding: 2rem .9375rem;
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  box-shadow: 0 0 38.587px 0 #FFE5B3;

  @media screen and (min-width: 768px) {
    margin-top: -1.5rem;
    border-radius: 2rem;
    padding: 3.5rem min(3.8888vw, 3.5rem);
    display: flex;
  }

  .p-driver-seminar-card-time {
    padding-block: clamp(4px, .8vw, 6px);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }
}

.p-driver-cta-title {
  text-align: center;
}

.p-driver-cta-message {
  margin-block-start: 1rem;
  text-align: center;

  span {
    display: inline-block;
    padding-inline: clamp(.5rem, 1.4vw, 1.5rem);
    background: linear-gradient(90deg, #138B3B 0%, #C8D42C 100%);
    font-size: clamp(22px, 4vw, 3rem);
    font-weight: var(--font-bold);
    color: var(--color-white);
  }
}

.p-driver-cta-body {
  padding: 2rem .9375rem;
  display: grid;
  place-content: center;
  background-color: var(--bg-light-green);

  @media screen and (min-width: 768px) {
    width: 48%;
    flex: 0 0 48%;
  }

  .c-text-lead {
    text-align: center;
    line-height: 1.7;
  }
}

.p-driver-cta-buttons {
  margin-top: clamp(1.5rem, 2.4vw, 2.5rem);
}

.cta-driver-seminar-image {
  max-width: 33.75rem;
  margin-inline: auto;
}

.cta-driver-seminar-image img {
  filter: drop-shadow(0 3px 1rem rgba(0, 0, 0, 0.15));
}

.p-driver-seminar-button.--cta {
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
}

.p-driver-cta-button {
  margin-top: 1.5rem;
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.75rem);
}

.c-button-fixed.--driver {
  z-index: 4;
}

.l-header {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-header.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* SP時の下部固定ボタン */
.c-button-fixed.--driver {
  bottom: .8rem;
}