/*====================================*/
/* common  */
/*====================================*/
main.freepass {
  --color-border: #a09f29;
  --rule-apply-color: #007ace;
}
.kagawa {
  --color-plan-01: #00b5f7;
}
.nagasaki {
  --color-plan-01: #ffa801;
}
.free-pass {
  padding-block: clamp(35px, calc(-1px + 6vw), 83px) clamp(31px, calc(-4px + 9vw), 50px);
  background-color: var(--colA2);
  &.top {
    border-top: 5px solid var(--colA1);
  }
  nav.anc-nav-links {
    margin-bottom: clamp(30px, calc(-6px + 6vw), 78px);
    ul {
      gap: clamp(26px, calc(-22px + 8vw), 90px);
    }
  }
  h2 {
    margin-bottom: clamp(16px, calc(-12.5px + 4.75vw), 54px);
  }
}

#rt_795,
#rt_796,
#rt_797,
#rt_798,
#rt_799,
#rt_800,
#rt_801,
#rt_802,
#rt_803,
#rt_804 {
    --color-plan-01: #00b5f7;
}

#rt_805,
#rt_806,
#rt_807,
#rt_808,
#rt_809,
#rt_810,
#rt_811,
#rt_812,
#rt_813,
#rt_814,
#rt_815,
#rt_816,
#rt_817,
#rt_818 {
    --color-plan-01: #ffa801;
}

/*====================================*/
/* top  */
/*====================================*/
/* .kv {
  @media (max-width: 768px) {
    .l-container-l {
      padding-top: 28px;
    }
  }
} */
/*-- free-pass_about --*/
.free-pass_about {
  padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
  margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);
  h2 {
    color: var(--colA1);
    margin-bottom: clamp(20px, calc(9.499999999999998px + 1.7500000000000002vw), 34px);
  }
}
@media (max-width: 768px) {
  .free-pass_about {
    padding-inline: clamp(30px, calc(-7.5px + 6.25vw), 80px);
  }
}
/*-- free-pass_overview --*/
.free-pass_overview {
  padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
  padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
  margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);
}
/*-- free-pass_area --*/
.free-pass_area {
  padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
  padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
  margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);

  .plan-map {
    margin-bottom: 0;

    &:has(+ .plan-map) {
      margin-bottom: clamp(17px, calc(3.5px + 2.25vw), 35px);
    }
    h3 {
      text-align: center;
      margin-bottom: 0.5em;
    }
    img {
      display: block;
      max-width: 100%;
      width: auto;
      margin-inline: auto;
    }
  }
}
/*-- free-pass_price --*/
.free-pass_price {
  padding-block: clamp(35px, calc(16.25px + 3.125vw), 60px) clamp(38px, calc(20.75px + 2.875vw), 61px);
  padding-inline: clamp(10px, calc(-42.5px + 8.75vw), 80px);
  margin-bottom: clamp(40px, calc(8.5px + 5.25vw), 82px);
  ol {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ol > li {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-bottom: 1em;

    :last-child {
      margin-bottom: 0;
    }
  }
  p {
    color: var(--colA1);
    font-size: var(--font-size-24);
    font-weight: 600;
  }
  @media (max-width: 768px) {
    ol {
      width: 90%;
      margin-inline: auto;
    }
    ol > li {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5em;
    }
  }
}
/*-- free-pass_subsc --*/
.free-pass_subsc {
  margin-bottom: clamp(28px, calc(-0.5px + 4.75vw), 66px);
  a.icf-roundbtn-h {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 675px;
    width: 100%;
    min-height: 95px;
    color: var(--color-white);
    font-size: var(--font-size-24);
    font-weight: 600;
    background-color: #ad0755;
    border: none;
    border-radius: 9999px;
    margin-inline: auto;

    &:hover span {
      color: var(--color-white);
    }
    &::after {
      color: var(--color-white);
    }
  }
  @media (max-width: 576px) {
    a.icf-roundbtn-h {
      font-size: var(--font-size-20);
      min-height: 84px;
    }
  }
}
/*-- free-pass_faq --*/
.submitted {
  margin-bottom: clamp(43px, calc(-2.75px + 7.625vw), 104px);
}
/*-- free-pass_faq --*/
.free-pass_faq {
  .btn-accordion-bb {
    span {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    i {
      margin-left: 2.5rem;
    }
  }
}
.acc-faq {
  margin-top: clamp(36px, calc(14.999999999999996px + 3.5000000000000004vw), 64px);

  .acc-use_inner {
    padding-block: clamp(44px, calc(24.5px + 3.25vw), 70px) clamp(36px, calc(6.75px + 4.875vw), 75px);
    padding-inline: clamp(30px, calc(-6.75px + 6.125vw), 79px);
  }
  h3 {
    font-size: var(--font-size-30);
    font-weight: 600;
    text-align: center;
    margin-top: clamp(25px, calc(-19.25px + 7.375vw), 84px);
    margin-bottom: clamp(28px, calc(19px + 1.5vw), 40px);

    &:first-child {
      margin-top: 0;
    }
  }
  @media (max-width: 576px) {
    h3 {
      font-size: var(--font-size-20);
    }
  }
  details {
    counter-increment: main-num sub-num;
    border-top: 1px solid var(--color-medium-gray);
    interpolate-size: allow-keywords;

    &::details-content {
      transition:
        height 0.3s ease-out,
        opacity 0.3s ease-out;
      height: 0;
      opacity: 0;
      overflow: hidden;
      padding-bottom: 32px;
    }
    summary {
      position: relative;
      color: var(--colA1);
      font-size: var(--font-size-22);
      line-height: 1.5;
      font-weight: 600;
      padding-left: 9rem;
      padding-right: 7rem;
      margin-top: clamp(20px, calc(8px + 2vw), 36px);
      /* margin-bottom: 20px; */
      cursor: pointer;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
      }
      &::after {
        position: absolute;
        right: 0;
        font-family: "Font Awesome 7 Free" !important;
        font-weight: 900;
        display: inline-block;
        content: "\2b";
      }
    }
    div.answer {
      padding-top: 2rem;
      padding-left: 9rem;
      transition: height 0.3s ease-out;

      img {
        display: block;
        max-width: 100%;
        width: auto;
        margin-block: 2rem;
      }
      .answer_sub {
        margin-block: clamp(5px, calc(-2.5px + 1.25vw), 15px) clamp(15px, calc(3.75px + 1.875vw), 30px);
      }
      ul {
        margin-top: 1.5rem;
      }
    }
    @media (max-width: 576px) {
      summary {
        font-size: var(--font-size-14);
        padding-left: 5.5rem;
        padding-right: 4rem;
      }
      div.answer {
        font-size: var(--font-size-14);
        padding-left: 0;
      }
    }
  }

  details:not(.has-branch + .has-branch) {
    counter-increment: main-num;
  }
  details:not(.has-branch) summary::before {
    content: "Q." counter(main-num) " ";
  }
  details.start-branch {
    counter-reset: sub-num 1;
  }
  details.has-branch {
    counter-increment: sub-num;
  }
  details.has-branch summary::before {
    content: "Q." counter(main-num) "-" counter(sub-num) " ";
  }
  details[open]::details-content {
    height: auto;
    opacity: 1;
  }
  details[open] {
    summary::after {
      content: "\f068";
    }
  }
  .answer_sub_inq {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    padding-block: clamp(23px, calc(17.75px + 0.8750000000000001vw), 30px);
    padding-inline: 20px;
    margin-top: clamp(20px, calc(8px + 2vw), 36px);
    margin-inline: auto;
    border: 3px solid var(--colA1);
    border-radius: 10px;

    .heading-bl-square {
      max-width: 500px;
      width: 100%;
      margin-bottom: clamp(20px, calc(14px + 1vw), 28px);
    }
    .freedial {
      display: flex;
      align-items: flex-end;
      font-size: var(--font-size-18);
      font-weight: 600;
      margin-bottom: clamp(12px, calc(3px + 1.5vw), 24px);

      .icon-freedial {
        margin-right: clamp(5px, calc(-1px + 1vw), 13px);
      }
      span.tel {
        font-size: var(--font-size-30);
      }
      span.notes-r {
        font-size: var(--font-size-40);
      }
      span.notes-r.txt-l {
        font-size: 5rem;
      }
    }
    .caution_list {
      margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
    }
    .link-txt-wapper {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: var(--font-size-20);
      margin-top: clamp(11px, calc(9.5px + 0.25vw), 13px);

      i.fa-regular {
        color: var(--color-dark-gray);
      }
      span {
        text-align: left;
      }
    }
    @media (max-width: 576px) {
      .heading-bl-square {
        min-height: 89px;
        font-size: var(--font-size-16);
        line-height: 1.5;
        text-align: center;
      }
      .freedial {
        flex-wrap: wrap;
        justify-content: center;

        span.tel {
          font-size: var(--font-size-26);
        }
        span.notes-r {
          font-size: var(--font-size-30);
        }
        span.notes-r.txt-l {
          font-size: var(--font-size-36);
        }
        .reception-hours {
          width: 100%;
          text-align: center;
          margin-top: 0.5rem;
        }
      }
      .link-txt-wapper {
        font-size: var(--font-size-18);
      }
    }
  }
}

/*====================================*/
/* step 共通パーツ */
/*====================================*/
.step {
  padding-bottom: clamp(74px, calc(11.75px + 10.375vw), 157px);

  h2.heading-pk-square {
    max-width: 460px;
    width: 100%;
    min-height: 75px;
    font-size: var(--font-size-20);
    text-align: center;
    padding-block: 0.5em;
    margin-bottom: clamp(23px, calc(20px + 0.5vw), 27px);
    background-color: var(--color-plan-01);
    border-radius: 14px;
    box-shadow: 0px 3px 6px #00000029;
  }
  .h3-heading-l {
    margin-top: 39px;
    margin-bottom: clamp(26px, calc(20.75px + 0.8750000000000001vw), 33px);
  }
  @media (max-width: 768px) {
    .l-container-m {
      width: 100%;
    }
  }
  @media (max-width: 576px) {
    .h3-heading-l {
      font-size: var(--font-size-24);
    }
  }
}
.step_count {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 140px;
  width: 100%;
  font-weight: 600;
  border: 1px solid var(--colA1);
  padding-block: clamp(7px, calc(1.25px + 0.625vw), 12px);
  margin-bottom: clamp(44px, calc(32px + 2vw), 60px);
  border-radius: 5px;

  .step_count_current {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-size-28);
    color: var(--colA1);
    margin-left: 1rem;
  }
  .step_count_total {
    font-family: Arial, Helvetica, sans-serif;
    color: #b5b5b5;
    margin-left: 1rem;
  }
}
.step_flow {
  --gray: #b5b5b5;
  position: relative;
  width: 100%;

  &::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #b5b5b5;
    transform: translate(-50%, -50%);
    border-radius: 5px;
  }
  .step_flow__line-active {
    position: absolute;
    top: 50%;
    height: 4px;
    background-color: var(--colA1);
    transform: translateY(-50%);
    border-radius: 5px;
    z-index: 4;
  }
  .step_flow__arrow {
    position: absolute;
    left: clamp(0px, calc(-2.75px + 3.125vw), 25px); /*--tb調整する--*/
    top: 50%;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 13px solid var(--colA1);
    z-index: 4;
  }
  ul {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: clamp(6px, 4cqw, 84px);
    padding-inline: clamp(0px, calc(-2.5px + 4.25vw), 50px);

    &.step7 {
      grid-template-columns: repeat(7, 1fr);
      gap: clamp(6px, 7cqw, 122px);
    }
    &.step10 {
      grid-template-columns: repeat(10, 1fr);
      gap: clamp(6px, 3cqw, 72px);
    }
    &.step11 {
      grid-template-columns: repeat(11, 1fr);
      gap: clamp(6px, 2cqw, 62px);
    }
  }
  ul > li {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: var(--color-white);
    border: 2px solid #b5b5b5;
    border-radius: 9999px;
    z-index: 5;
  }
  ul > li.is-active {
    background-color: var(--colA1);
    border: 2px solid var(--colA1);
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      background-color: var(--color-white);
      border-radius: 9999px;
      z-index: 5;
    }
  }
  ul > li a {
    position: relative;
    display: block;
    height: 100%;
    z-index: 10;

    &:hover {
      background-color: var(--colA1);
      border-radius: 9999px;
    }
  }
  ul > li span {
    position: absolute;
    bottom: -35px;
    left: -37px;
    display: inline-block;
    width: 100px;
    height: 100%;
    color: var(--color-black);
    font-size: var(--font-size-14);
    line-height: 1.3;
    text-align: center;
  }
  @media (max-width: 768px) {
    ul > li span {
      font-size: var(--font-size-10);
    }
  }
  ul > li.is-active span {
    color: var(--colA1);
    font-weight: 600;
  }
  ul > li.is-current::before {
    position: absolute;
    top: -28px;
    left: -7px;
    right: 0;
    content: "";
    display: block;
    width: 41px;
    height: 22px;
    margin-inline: auto;
    background-image: url(/drivepass/assets/img/icon/icon_car_side.png);
    background-size: cover;
  }
  @media (max-width: 576px) {
    .step_flow__arrow {
      left: 2.1vw;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 8px solid var(--colA1);
    }
    ul > li {
      width: 19px;
      height: 19px;
    }
    ul > li.is-active {
      &::after {
        width: 13px;
        height: 13px;
      }
    }
    ul > li span {
      display: none;
    }
    ul > li.is-current::before {
      top: -18px;
      width: 25px;
      height: 13px;
    }
  }
}

/*====================================*/
/* step */
/*====================================*/
.step-confirm {
  padding-bottom: clamp(45px, calc(-33.75px + 13.125vw), 150px);
  h3 {
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
    line-height: 1.2;
  }
  p {
    width: 100%;
  }

  @media (max-width: 768px) {
    img {
      max-width: 100%;
      width: auto;
    }
  }

  .process-group {
    counter-reset: number;
    padding-bottom: clamp(26px, calc(-2.5px + 4.75vw), 64px);

    .process-item {
      position: relative;
      display: grid;
      grid-template-columns: max-content 1fr;
      align-items: center;
      gap: 38px;
      padding-block: clamp(20px, calc(16.25px + 0.625vw), 25px);
      padding-inline: clamp(18px, calc(4.5px + 2.25vw), 36px);
      margin-bottom: 94px;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -70px;
        display: inline-block;
        width: 109px;
        height: 50px;
        margin-inline: auto;
        background: #8ec7ef;
        clip-path: polygon(0 40.8%, 24.8% 40.8%, 24.8% 0, 75.2% 0, 75.2% 40.8%, 100% 40.8%, 50% 100%);
      }
      &:last-of-type {
        margin-bottom: 0;
        &::after {
          content: none;
        }
      }

      .process-no {
        counter-increment: number;
        display: grid;
        grid-auto-flow: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 96px;
        height: 96px;
        color: var(--colA1);
        font-weight: 600;
        text-align: center;
        background-color: var(--color-white);
        border-radius: 9999px;

        &::after {
          content: counter(number);
          display: grid;
          place-items: center;
          font-family: var(--font-Hind) !important;
          font-size: var(--font-size-28);
          font-weight: 600;
          padding-bottom: 0.1em;
        }
      }
    }
    @media (max-width: 576px) {
      .process-item {
        display: block;

        .process-no {
          width: 100px;
          height: 40px;
          font-size: var(--font-size-14);
          margin-inline: auto;
          margin-bottom: 18px;

          &::after {
            font-size: var(--font-size-24);
          }
        }
      }
    }
  }

  .notes-group {
    .h-br-b {
      display: block;
      font-weight: 600;
      text-align: left;
      padding: 1em 1em;
      margin-bottom: 2em;
    }
    ul {
      margin-left: 0.5em;
    }
    @media (max-width: 576px) {
      .h-br-b {
        font-size: var(--font-size-16);
        padding: 0.4em 1em;
        margin-bottom: 1em;
      }
    }
  }

  .step-confirm_applyttl {
    position: relative;
    color: var(--colA1);
    font-size: var(--font-size-24);
    font-weight: 600;
    text-align: center;
    margin-top: 68px;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      content: "";
      width: 30px;
      height: 2px;
      margin-block: auto;
      background-color: var(--colA1);
    }
    &::before {
      right: -50px;
    }
    &::after {
      left: -50px;
    }
  }
  .btn-group {
    flex-wrap: wrap;
    gap: 41px 56px;
    max-width: 776px;
    width: 100%;
    margin-bottom: 10px;

    .icf-boxbtn {
      max-width: 360px;
      font-weight: 600;
      background-color: var(--color-plan-01);
    }
  }
  .consent-check {
    width: 100%;
  }
  @media (max-width: 576px) {
    .btn-group {
      flex-direction: column;
      gap: 22px;
    }
  }
  p.indent {
    margin-top: clamp(20px, calc(12.5px + 1.25vw), 30px);
  }
}
.step-confirm {
  @media (max-width: 576px) {
    h3 {
      font-size: var(--font-size-22);
      text-align: center;
    }
  }
}

#rule_apply_btn {
  margin-top: clamp(32px, calc(7.25px + 4.125vw), 65px);

  .ruleActBtn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 546px;
    min-height: 108px;
    color: var(--color-white);
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    background-color: var(--color-medium-gray);
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 14px;
    transition: all 0.2s ease;

    &.on {
      background-color: var(--rule-apply-color);
    }
    &::after {
      position: absolute;
      top: 50%;
      right: 17px;
      font-family: "Font Awesome 7 Free" !important;
      content: "\f35a";
      font-weight: 900;
      display: inline-block;
      transform: translateY(-50%);
    }
    &.off {
      pointer-events: none;
      cursor: default;
    }
    &.on:hover {
      opacity: 0.75;
    }
  }
  @media (max-width: 576px) {
    .ruleActBtn {
      width: 370px;
      min-height: 100px;
      font-size: var(--font-size-16);
    }
  }
}