/*====================================*/
/* common  */
/*====================================*/
.course-meishin {
  --title-color: #7e328e;
  --color-plan-01: #7e328e;
}
.course-chugoku {
  --title-color: #00b0f0;
  --color-plan-01: #00b0f0;
}
.course-hanwa {
  --title-color: #ffc002;
  --color-plan-01: #ffc002;
}
.course-kagawa {
  --title-color: #ff3301;
  --color-plan-01: #ff3301;
}
.course-ehime {
  --title-color: #4473c4;
  --color-plan-01: #4473c4;
}
.course-saga {
  --title-color: #ffc002;
  --color-plan-01: #ffc002;
}
.course-oita {
  --title-color: #92d050;
  --color-plan-01: #92d050;
}
.course-miyazaki {
  --title-color: #00b0f0;
  --color-plan-01: #00b0f0;
}

/*====================================*/
/* top  */
/*====================================*/
/*-- drive-pass_plan --*/
.drive-pass_plan {
  counter-reset: course-count;
  table {
    td {
      text-align: center;
      &.course {
        text-align: left;
        counter-increment: course-count;
        &::before {
          content: "(" counter(course-count) ")";
        }
      }
      a {
        color: var(--colA1);
        font-weight: 600;
      }
      .ext-links {
        margin-top: 0.1em;
        a {
          display: inline-block;
        }
      }
    }
    @media (max-width: 768px) {
      th,
      td {
        padding: 10px;

        &.area {
          writing-mode: vertical-rl;
        }
      }
    }
    @media (max-width: 576px) {
      th,
      td {
        font-size: var(--font-size-14);
        padding: 5px;
      }
      th.term,
      th.price {
        white-space: nowrap;
      }
    }
  }
  .plan-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
    padding: 1em;
    margin-inline: auto;
    border: 2px solid var(--colA1);
    border-radius: 5px;

    a {
      color: var(--colA1);
      font-weight: 600;
    }
  }
}
/*-- drive-pass_select-plan --*/
.drive-pass_select-plan {
  div.h3-heading-ml {
    color: var(--colA1);
    text-align: center;
    line-height: 1.2;
  }
  .plan-item {
    display: grid;
    grid-template-columns: max-content auto max-content;
    gap: 20px;
    padding-right: 18px;
    h3 {
      width: 21.929vw;
    }
    .col-1-cont {
      max-width: 330px;
      width: 100%;
    }
    .price {
      font-weight: 600;
      text-align: center;
      padding-right: 1em;
      margin-block: 0.5em;
    }
    .icf-boxbtn {
      width: 100%;
    }
    figure {
      max-width: 238px;
      width: 17vw;
      padding-block: clamp(13px, calc(1px + 2vw), 29px);
      &.l-flex {
        gap: 15px;
      }
      img {
        width: 100%;
      }
    }
    figcaption {
      font-size: var(--font-size-14);
    }
  }
  @media (max-width: 768px) {
    .plan-item {
      max-width: initial;
      width: 95%;
    }
  }
  @media (max-width: 576px) {
    div.h3-heading-ml {
      color: var(--colA1);
      text-align: center;
    }
    .plan-item {
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 90%;
      padding-right: 0;

      h3 {
        width: 100%;
        min-height: 60px;
        margin-bottom: 0;
      }
      .col-1-cont {
        width: 87%;
        margin-inline: auto;
      }
      figure {
        max-width: initial;
        width: 100%;
        &.l-flex {
          width: 80%;
          gap: 5px;
          margin-inline: auto;
        }
        img {
          display: block;
          width: auto;
          margin-inline: auto;
        }
      }
      figcaption {
        width: 87%;
        margin-top: 0.3em;
        margin-inline: auto;
      }
    }
  }
}
/*====================================*/
/* plan index  */
/*====================================*/
.drive-pass_overview {
  .bg-lb {
    padding-block: clamp(15px, calc(7.5px + 1.25vw), 25px);
    padding-inline: 10px;
    margin-bottom: clamp(25px, calc(13.75px + 1.875vw), 40px);
    border-radius: 0;

    h3 {
      margin-bottom: 0.5em;
    }
  }
  .bg-gray {
    padding-block: clamp(15px, calc(7.5px + 1.25vw), 25px);
    padding-inline: 10px;
    margin-top: clamp(29px, calc(11.75px + 2.875vw), 52px);
    background-color: #ebebeb;
  }
  .btn-plan-group {
    text-align: center;
    margin-top: clamp(31px, calc(4px + 4.5vw), 67px);

    .icf-roundbtn-h {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 460px;
      width: 100%;
      height: 75px;
      margin-top: clamp(26px, calc(14px + 2vw), 42px);
      margin-inline: auto;
      border: 3px solid var(--colA1);

      &::after {
        top: calc(50% - 1.2rem);
        font-size: var(--font-size-26);
      }
      span {
        color: var(--colA1);
        font-size: var(--font-size-20);
      }
    }
  }
  @media (max-width: 768px) {
    .bg-lb {
      p {
        text-align: center;
      }
    }
  }
  @media (max-width: 576px) {
    .btn-plan-group {
      .icf-roundbtn-h {
        width: 90%;
        height: 70px;
      }
    }
  }
}
/*====================================*/
/* step  */
/*====================================*/
.step-confirm .price-group {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  width: 100%;
  border: 1px solid var(--color-medium-gray);
  dl {
    dt {
      text-align: center;
      padding: 0.5em;
      background-color: #f5f4eb;
      border-bottom: 1px solid var(--color-medium-gray);
    }
    dd {
      text-align: center;
      padding: 0.5em 1em;
    }
  }
}