main {
  overflow: initial;
}
.parsley-custom-error-message {
  font-weight: 600;
}
/*====================================*/
/* roundtour */
/*====================================*/
.step {
  padding-bottom: clamp(20px, calc(-10px + 5vw), 60px);
}
.step-form {
  --form-color-01: #d4d4d4;
  --form-color-02: #f5f4eb;
  --form-color-03: #525252;
  padding-bottom: clamp(45px, calc(-33.75px + 13.125vw), 150px);

  h3 {
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
  }
  .catch-s,
  .f-18.f-bold {
    margin-bottom: clamp(13px, calc(-6.5px + 3.25vw), 39px);
  }
  @media (max-width: 576px) {
    h3 {
      font-size: var(--font-size-22);
    }
    .catch-s {
      text-align: center;
    }
  }
}
.drivepass-detail {
  .step-form {
    padding-bottom: 0;
    margin-top: 0;
  }
}
/*== btn =======*/
.btn-send {
  position: relative;
  display: inline-block;
  max-width: 460px;
  width: 80vw;
  color: var(--colA1);
  font-size: var(--font-size-20);
  font-weight: 600;
  text-align: center;
  padding-block: 23px;
  margin-top: clamp(38px, calc(21.5px + 2.75vw), 60px);
  margin-inline: auto;
  border: 3px solid var(--colA1);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;

  &::after {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 7 Free" !important;
    font-weight: 900;
    display: inline-block;
    content: "\f35a";
    padding-left: 0.5rem;
  }
  &:hover {
    color: var(--color-white);
    background-color: var(--colA1);
  }
  &.icon-allow {
    &::after {
      content: "\f35a" !important;
    }
  }
}
@media (max-width: 576px) {
  .btn-send {
    padding-block: 10px;
    font-size: var(--font-size-18);

    &::after {
      right: 10px;
    }
  }
}
.register-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3em;

  .icf-boxbtn {
    max-width: 300px;
    width: 100%;
    color: var(--color-white);
    font-size: var(--font-size-18);
    font-weight: 600;
    text-align: center;
    padding-block: 20px;
    background-color: var(--colA1);
    border-radius: 5px;
    transition: all 0.2s ease;

    &.delete {
      background-color: #ec767c;
    }
  }
}
/*====================================*/
/* calendar */
/*====================================*/
#calendar {
  width: 100%;
  --calendar-th: #249bc4;
  --calendar-boder: #cccccc;
  --calendar-week: #f5f5f5;
  --calendar-colol: #fed451;
  --calendar-possible: #fdf3cc;
  --calenter-two-day: #ff9b36;
  --calenter-app-day: #ff0037;
  --calendar-txt: #333333;

  .wrap {
    align-items: flex-start;
    gap: 30px;
    margin: clamp(20px, calc(16.25px + 0.625vw), 25px) auto;

    table {
      min-width: 0;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      margin-bottom: 0;
    }
    table th {
      height: 50px;
      padding: 10px 0;
      text-align: center;
      background: var(--calendar-th);
      color: var(--color-white);
      font-weight: 600;
      border: 1px solid var(--calendar-th);
    }
    table tr td {
      height: 55px;
      border-bottom: 1px solid var(--calendar-boder);
      border-left: 1px solid var(--calendar-boder);
      border-right: 1px solid var(--calendar-boder);
      text-align: center;
      color: var(--calendar-txt);
      vertical-align: top;
      padding: 0;
    }
    table tr.week {
      td {
        height: 21px;
        padding: 6px 0;
        color: var(--calendar-txt);
        background-color: var(--calendar-week);
      }
      td.sat {
        background: #e8f6fb;
      }
      td.sun {
        background: #fff0f1;
      }
    }
    table tr td p {
      margin-bottom: 0;
      line-height: 1.4;
    }
    table tr td.possible {
      background: var(--calendar-possible);

      a {
        text-decoration: none;
        color: var(--calendar-txt) !important;
      }
      p {
        display: block;
        padding-bottom: 10px;
        color: var(--calendar-txt);
        text-decoration: none;
      }
      a strong {
        color: var(--calenter-two-day);
      }
      a strong.cred {
        color: var(--calenter-app-day);
      }
      &:hover {
        background-color: #fed451;
      }
    }
  }
  @media (max-width: 576px) {
    .wrap {
      flex-direction: column;
    }
  }
  .step_quadruple {
    gap: 30px;
    font-size: var(--font-size-20);

    .two-day {
      justify-self: end;
      --calenter--day: #ff9b36;
    }
    .app-day {
      justify-self: start;
      --calenter--day: #ff0037;
    }

    div[class$="-day"] span {
      color: var(--calenter--day);

      &::after {
        content: "：";
        color: var(--color-black);
      }
    }
  }
  @media (max-width: 576px) {
    .step_quadruple {
      display: block;
      font-size: var(--font-size-16);

      .two-day {
        justify-self: initial;
        margin-bottom: 7pxx;
      }
    }
  }
}
/*====================================*/
/* step-form block*/
/*====================================*/
/*== step-form_wrapper =======*/
.step-form_wrapper {
  width: 100%;
  margin-top: 32px;

  h3 {
    margin-bottom: clamp(29px, calc(21.5px + 1.25vw), 39px);
  }
  .required {
    color: var(--color-notes);
    font-weight: 600;
  }
  #name_validation_error {
    color: var(--color-notes);
    font-weight: 600;
  }
  @media (max-width: 768px) {
    .required {
      display: block;
    }
  }
  .form-dl {
    h4 {
      font-size: var(--font-size-20);
      font-weight: 600;
      padding-block: 12px;
      padding-inline: 21px;
      background-color: #dbf4ff;
      border-radius: 5px;
      margin-top: 0;
      margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
    }
    dl {
      display: grid;
      grid-template-columns: 1fr 2fr;
      border-top: 1px solid var(--form-color-01);
      border-left: 1px solid var(--form-color-01);
      border-right: 1px solid var(--form-color-01);

      &:last-child {
        border-bottom: 1px solid var(--form-color-01);
        margin-bottom: clamp(38px, calc(21.5px + 2.75vw), 60px);
      }
      dt {
        max-width: 346px;
        width: 30vw;
        font-weight: 600;
        padding: 10px;
        background-color: var(--form-color-02);
        border-right: 1px solid var(--form-color-01);
      }
      dd {
        padding: 10px;

        .l-flex {
          justify-content: flex-start;
        }
        .notes {
          margin-left: 1rem;
        }
      }
    }
    .input-group {
      display: flex;
      flex-wrap: wrap;

      .input-group_item {
        margin-bottom: 1rem;
      }
    }

    input[type="text"] {
      font-size: var(--font-size-16);
      padding: 5px;
    }
    input[type="password"] {
      font-size: var(--font-size-16);
      padding: 5px;
    }
    input[type="tel"] {
      max-width: 30%;
      font-size: var(--font-size-16);
      padding: 5px;
    }
    input[type="tel"][name*="etc_"] {
      max-width: 50%;
      font-size: var(--font-size-16);
      padding: 5px;
    }
    input[type="email"] {
      max-width: 400px;
      width: 100%;
      font-size: var(--font-size-16);
      padding: 5px;
    }
    input[type="radio"] {
      width: 15px;
      height: 15px;
      margin-top: 0;
    }
    select {
      font-size: var(--font-size-16);
      padding: 5px 10px;
    }
    @media (max-width: 576px) {
      h4 {
        font-size: var(--font-size-18);
      }
      dl {
        grid-template-columns: 1fr;
      }
      dl > dt {
        max-width: initial;
        width: 100%;
        font-size: var(--font-size-14);
        border-bottom: 1px solid var(--form-color-01);
      }
      dl > dd {
        font-size: var(--font-size-14);
        .notes {
          display: block;
          margin-left: 1rem;
        }
      }
      .input-group {
        flex-direction: column;
        .input-group_item {
          display: grid;
          grid-template-columns: 1fr;
          align-items: center;
        }
      }
      input[type="tel"] {
        max-width: 28%;
      }
    }
  }
}
/*-- step-form_plan --*/
.step-form_plan {
  .apply-pass {
    display: flex;

    &:not(:first-of-type) {
      margin-top: 1em;
    }
    &:has(+ .login-links) {
      margin-bottom: 53px;
    }
    .dl-vertical {
      grid-template-columns: 2fr 1fr 1fr 1.5fr 2.1fr;
      grid-template-areas:
        "plan  no  date  period  action"
        "planV noV dateV periodV actionV";
      border-bottom: 1px solid var(--form-color-01);
      dt {
        width: 100%;
        overflow-wrap: anywhere;
        border-bottom: 1px solid var(--form-color-01);
        border-right: 1px solid var(--form-color-01);
        box-sizing: border-box;
      }
      dd {
        width: 100%;
        overflow-wrap: anywhere;
        border-right: 1px solid var(--form-color-01);
        box-sizing: border-box;
      }
      dt.col-plan {
        grid-area: plan;
      }
      dd.col-plan {
        grid-area: planV;
      }
      dt.col-no {
        grid-area: no;
      }
      dd.col-no {
        grid-area: noV;
      }
      dt.col-date {
        grid-area: date;
      }
      dd.col-date {
        grid-area: dateV;
      }
      dt.col-period {
        grid-area: period;
      }
      dd.col-period {
        grid-area: periodV;
      }
      dt.col-action {
        grid-area: action;
        border-right: none;
      }
      dd.col-action {
        grid-area: actionV;
        border-right: none;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    @media (max-width: 768px) {
      .dl-vertical {
        grid-template-columns: 2fr 1fr 1fr 1.5fr 2.5fr;
      }
      @media (max-width: 576px) {
        .dl-vertical {
          display: block !important;
        }
      }
    }
    .col-action {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
      a {
        position: relative;
        display: inline-block;
        font-weight: 600;
        padding-block: 0.5em;
        padding-inline: 0.3em 30px;
        background-color: var(--color-light-blue);
        border-radius: 4px;

        &::after {
          content: "\e908";
          display: inline-block;
          font-size: var(--font-size-14);
          color: var(--colA1);
          position: absolute;
          top: calc(50% - 0.6rem);
          right: 10px;
          overflow: hidden;
        }
        &:hover {
          color: var(--color-white) !important;
          text-decoration: none;
          background-color: var(--colA1);
          &::after {
            color: var(--color-white);
          }
        }
      }
    }
  }
}
/*-- step-form_personal --*/
.step-form_personal {
  .step-form_notes_cont {
    padding: 0.5em 0.5em;
    margin: 0.5em 0;
    /* background-color: #fcf5f5; */
    border: solid 1px var(--form-color-03);

    .notes-r {
      font-weight: 600;
    }
  }
  .step-form_notes_txt {
    color: var(--colA1);
    font-weight: 600;
    margin-block: 0.5rem;
  }
  .etc_limit_ym {
    span {
      margin-inline: 1rem;
    }
  }
}
/*-- step-form_enquete --*/
.step-form_enquete {
  dd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
    gap: 0.5rem;
  }
  label {
    text-indent: -2.3rem;
    padding-left: 2rem;
    margin-right: 2rem;
  }
}
/*-- exec-form --*/
.exec-form {
  @media (max-width: 576px) {
    .l-container-m {
      p.f-18.f-bold {
        font-size: var(--font-size-16);
        text-align: center;
      }
    }
  }
}
/*-- step-form_exec --*/
.step-form_exec {
  margin-bottom: clamp(26px, calc(-37.75px + 10.625vw), 111px);

  .form-dl {
    dl > dt {
      background-color: var(--color-light-yellow);
    }
    dl:last-child {
      margin-bottom: 10px;
    }
  }
  @media (max-width: 576px) {
    p {
      font-size: var(--font-size-14);
    }
  }
}
/*-- step-form_request --*/
.step-form_request {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 20px;
  padding-block: clamp(19px, calc(10px + 1.5vw), 31px);
  padding-inline: 30px;
  margin-bottom: clamp(26px, calc(-37.75px + 10.625vw), 111px);
  border-radius: 10px;

  h4 {
    font-size: var(--font-size-22);
    font-weight: 600;
  }
  .btn-bw-square {
    margin-top: 10px;
  }
}
@media (max-width: 576px) {
  .step-form_request {
    padding-inline: 30px;
  }
}
/*-- step-form_notes --*/
.step-form_notes {
  margin-bottom: clamp(36px, calc(14.25px + 3.6249999999999996vw), 65px);

  p.notes-r {
    font-size: var(--font-size-18);
    line-height: 1.3;
    margin-bottom: 15px;
  }
  strong {
    display: block;
    margin-bottom: 5px;
  }
  ul {
    margin-bottom: 0;
  }
  ul.type_circle > li {
    margin-top: 5px;
  }
  @media (max-width: 576px) {
    p.notes-r {
      font-size: var(--font-size-16);
    }
  }
}
/*-- step-form_info --*/
.step-form_info {
  .heading-bl-square {
    max-width: initial;
    width: 100%;
    font-size: var(--font-size-20);
    font-weight: 600;
  }
  ul {
    gap: 80px;
    justify-content: center;
    align-items: center;
    margin-top: clamp(23px, calc(3.5px + 3.25vw), 49px);
  }
  ul > li {
    max-width: 380px;
    width: 86vw;
  }
  a {
    display: block;
  }
  @media (max-width: 576px) {
    h4 {
      padding-block: 12px;
      text-align: center;
    }
    ul {
      flex-direction: column;
      gap: 20px;
    }
    ul > li {
      max-width: initial;
      img {
        width: 100%;
      }
    }
  }
}
/*-- step-confirm-info --*/
.step-confirm-info {
  width: 100%;
  margin-bottom: clamp(30px, calc(15px + 2.5vw), 50px);

  &:not(:has(+ .step-confirm-info)) {
    margin-bottom: 0;
  }
  h4 {
    font-size: var(--font-size-20);
    font-weight: 600;
    padding-block: 12px;
    padding-inline: 21px;
    background-color: #dbf4ff;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
  }
  .bd-lgray {
    display: inline-block;
    padding-block: 16px;
    padding-inline: 20px;
  }
  & > ul.type_circle {
    margin-left: 0.5em;
  }
}
@media (max-width: 576px) {
  .step-confirm-info {
    h4 {
      font-size: var(--font-size-18);
    }
  }
}
/*-- ticket-form --*/
.ticket-form {
  margin-bottom: clamp(47px, calc(38px + 1.5vw), 59px);
  .ticket-no {
    dt {
      display: flex;
      align-items: center;
    }
    dd {
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        color: var(--color-dark-gray);
        font-size: var(--font-size-18);
        padding-block: 0.3em;
        padding-inline: 1em;
        border: none;
        background-color: var(--colA2);
        border-radius: 5px;
      }
    }
  }
}
/*-- step-ticket-link --*/
.exec-form {
  .step-ticket-link {
    margin-top: 0;
    margin-bottom: clamp(47px, calc(38px + 1.5vw), 59px);
  }
}
.step-ticket-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(17px, calc(6.499999999999998px + 1.7500000000000002vw), 31px);
  margin-top: clamp(37px, calc(7px + 5vw), 77px);
  margin-bottom: clamp(61px, calc(28.75px + 5.375vw), 104px);

  a.btn-send {
    margin-top: 1em;
  }
}
/*-- step-ticket-link --*/
.step-form_term {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-top: 32px;

  .btn-group {
    flex-wrap: wrap;
    gap: 41px 46px;
    max-width: 966px;
    width: 95vw;
    margin-top: 50px;
    margin-bottom: 10px;

    .icf-roundbtn-h {
      max-width: 460px;
      width: 44vw;
      color: var(--color-plan-01);
      font-weight: 600;
      border: 3px solid var(--color-plan-01);

      &::after {
        color: var(--color-plan-01) !important;
      }
    }
  }
  @media (max-width: 576px) {
    .btn-group {
      flex-direction: column;
      gap: 15px;
      .icf-roundbtn-h {
        width: 100%;
      }
    }
  }
}
/*-- syasai-group --*/
.syasai-group {
  margin-bottom: clamp(38px, calc(21.5px + 2.75vw), 40px);
  & .form-dl {
    & dl {
      &:last-child {
        border-bottom: 1px solid var(--form-color-01);
        margin-bottom: 0;
      }
    }
  }
  .w20 {
    width: 20%;
  }
  .w40 {
    width: 40%;
  }
  .bike_plate1 {
    display: none;
  }
  .btn-syasaiki-group {
    margin-top: 0.5em;

    input[type="button"] {
      padding: 0.8em 0.6em;
      border: 1px solid var(--form-color-01);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
.form-edit {
  #syasaiki2,
  #syasaiki3,
  #syasaiki4,
  #syasaiki5 {
    display: none;
  }
}

/*====================================*/
/* hayatabi-input */
/*====================================*/
.hayatabi-input {
  margin-bottom: clamp(15px, calc(-11.25px + 4.375vw), 50px);

  .hayatabi_description {
    display: grid;
    gap: 16px;
    grid-template-columns: max-content 1fr;
  }
  .hayatabi_wrapper {
    padding: 10px 10px 0 0;

    .hayatabi_contents {
      padding: 10px 0px 8px 20px;
      background: #eeebe8;
      border-top: 3px solid #496;
      color: #496;
      display: flex;
    }
  }
  #hayatabi_form_wrap {
    .hayatabi_form {
      display: flex;
      align-items: center;
      gap: 30px;
      padding-top: 10px;

      .hayatabi_login_title {
        font-weight: 600;
      }
      .hayatabi_item_wrap {
        display: flex;
        align-items: center;
        .hayatabi_sp_login:nth-child(2) {
          margin-left: 20px;
        }
        .hayatabi_login_item {
          font-weight: 600;
          margin-right: 10px;
        }
      }
    }
    .hayatabi_confirm_label {
      display: flex;
      margin-top: 10px;
      p {
        color: var(--color-tomato);
        font-weight: 600;
        margin-left: 10px;
      }
    }
  }
  .hayatabi_api_wrapper {
    .hayatabi_api_button {
      background-image: -webkit-linear-gradient(top, #9a8d82, #67594e);
      color: #fff;
      letter-spacing: 0.1em;
      display: inline-block;
      border: 0px;
      padding: 6px 24px 6px 16px;
      margin-left: 16px;
      margin-bottom: 4px;
      background-color: transparent;
      border: none;
      cursor: pointer;
      outline: none;
      appearance: none;
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }
  .hayatabi_description {
    margin-top: clamp(16px, calc(8.5px + 1.25vw), 26px);
  }
  @media (max-width: 576px) {
    .hayatabi_description {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
#hayatabi_modal {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(from var(--color-black) r g b / 40%);
  overflow: auto;
  z-index: 999;

  .hayatabi_modal_content {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 900px;
    width: 90vw;
    color: var(--color-black);
    text-align: center;
    padding: 20px;
    background-color: var(--color-white);
    border: 1px solid #888;
    transform: translate(-50%, -50%);

    dl {
      grid-template-columns: max-content 1fr;

      &:last-child {
        margin-bottom: clamp(20px, calc(5px + 2.5vw), 40px);
      }
      dt {
        max-width: 200px;
        text-align: left;
      }
      dd {
        text-align: left;
      }
    }
    .etc-card > dl {
      grid-template-columns: 1fr;
      margin-top: clamp(20px, calc(5px + 2.5vw), 40px);
      margin-bottom: 15px;
      dt {
        max-width: initial;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--form-color-01);
      }
    }

    .hayatabi_button_wrapper {
      max-width: 720px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      margin-top: 15px;
      margin-inline: auto;

      .hayatabi_submit_modal_button {
        max-width: 350px;
        width: 100%;
        height: 40px;
        color: var(--color-white);
        font-weight: bold;
        text-align: center;
        padding: 12px 16px;
        background-color: var(--colA1);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        &:hover {
          opacity: 0.5;
        }
      }
      .hayatabi_close_modal_button {
        max-width: 350px;
        width: 100%;
        height: 40px;
        color: var(--color-black);
        font-weight: bold;
        text-align: center;
        padding: 12px 16px;
        background-color: var(--color-light-gray);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        &:hover {
          opacity: 0.5;
        }
      }
    }

    @media (max-width: 576px) {
      dl {
        grid-template-columns: 1fr;

        dt {
          max-width: initial;
          width: 100%;
          border-right: none;
          border-bottom: 1px solid var(--form-color-01);
        }
      }
    }
  }
}

/*====================================*/
/* login-form */
/*====================================*/
.login-form {
  #e_login {
    padding-top: 37px;
  }
  h1 {
    position: relative;
    display: flex;
    max-width: 1200px;
    width: 94.872vw;
    font-size: var(--font-size-40);
    font-weight: 600;
    line-height: 1.2;
    padding-left: 22px;
    margin-bottom: clamp(26px, calc(-2.5px + 4.75vw), 64px);
    margin-inline: auto;
    border-bottom: none;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 12px;
      height: 100%;
      border-left: 12px solid var(--color-border);
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 12px;
      height: 14px;
      background-color: var(--color-dark-gray);
    }
  }
  h2.ttl {
    font-size: var(--font-size-36);
    font-weight: 600;
    text-align: center;
    margin-bottom: clamp(23px, calc(14.75px + 1.375vw), 39px);
  }
  .alC {
    text-align: center;
  }
  .lower {
    padding-top: clamp(20px, calc(5px + 2.5vw), 40px);
    margin-inline: auto;
    background-color: #f4f4f4;
    &.txt-cont {
      display: flex;
      justify-content: center;
      background-color: var(--color-white);
      padding-bottom: 2em;
    }
    .lb20 {
      font-size: var(--font-size-18);
      text-align: center;
      padding-bottom: clamp(30px, calc(15px + 2.5vw), 50px);
      background-color: var(--color-white);
      a {
        text-decoration: underline;
      }
    }
  }
  form {
    .whBox {
      max-width: 600px;
      margin-inline: auto;
      background-color: var(--color-white);
      table {
        width: 100%;
        margin-top: clamp(21px, calc(4.5px + 2.75vw), 43px);

        th,
        td {
          font-size: var(--font-size-18);
          vertical-align: baseline;
          padding: 1em;
          border: none;
          background-color: #f4f4f4;

          input[type="text"],
          input[type="password"] {
            max-width: 400px;
            width: 100%;
            font-size: var(--font-size-16);
            padding: 5px;
          }
        }
      }
    }
    .link a {
      font-size: var(--font-size-20);
      font-weight: 600;
    }
    .dtable_dis {
      margin-bottom: clamp(30px, calc(12px + 3vw), 54px);
      .link a {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 270px;
        width: 85vw;
        height: 60px;
        color: var(--color-white) !important;
        margin-inline: auto;
        background-color: var(--colA1);
        border-radius: 5px;

        &:hover {
          text-decoration: none;
          opacity: 0.7;
          span {
            color: var(--color-white);
          }
        }
      }
      &.l-flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        .td.col-1 {
          width: 100%;
          a {
            max-width: 470px;
            width: 85vw;
            line-height: 1.2;
          }
        }
      }
    }
    .appModeBtn {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, calc(5px + 2.5vw), 40px);
      padding-block: clamp(30px, calc(15px + 2.5vw), 50px);
      background-color: var(--color-white);
      a {
        position: relative;
        display: block;
        max-width: 480px;
        width: 85vw;
        font-size: var(--font-size-20);
        font-weight: 600;
        text-align: center;
        padding-block: 23px;
        margin-inline: auto;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          text-decoration: none;
          opacity: 0.7;
          span {
            color: inherit;
          }
        }
        &::after {
          position: absolute;
          right: 25px;
          top: 50%;
          transform: translateY(-50%);
          font-family: "Font Awesome 7 Free" !important;
          font-weight: 900;
          display: inline-block;
          content: "\f35a";
          padding-left: 0.5rem;
        }
        &.btn-form {
          color: var(--colA1);
          background-color: var(--color-white);
          border: 3px solid var(--colA1);
          border-radius: 5px;
        }
        &.btn-hayatabi {
          color: var(--color-white);
          background-color: #f17700;
          border: 3px solid #f17700;
          border-radius: 999px;
          &::after {
            color: var(--color-white);
          }
        }
      }
    }
    .flex-group {
      max-width: 800px;
      width: 90vw;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-inline: auto;
      li {
        width: 48%;
      }
      .btn-form {
        width: 100%;
        font-size: var(--font-size-16);
        padding-block: 13px;
      }
    }
    @media (max-width: 576px) {
      .flex-group {
        li {
          width: 100%;
        }
      }
    }
    p.markarea,
    p.fs {
      background-color: var(--color-white);
      a {
        text-decoration: underline;
      }
    }
    .pass-link {
      font-size: var(--font-size-18);
      padding-bottom: clamp(30px, calc(15px + 2.5vw), 50px);
      a {
        text-decoration: underline;
      }
    }
  }
}
@media (max-width: 768px) {
  .login-form {
    h1 {
      font-size: var(--font-size-28);
    }
    h2.ttl {
      font-size: var(--font-size-24);
    }
    .lower {
      &.txt-cont {
        width: 90vw;
      }
      p {
        padding-inline: 10px;
      }
    }
    form {
      .whBox {
        table {
          tr {
            display: flex;
            flex-direction: column;
          }
          th,
          td {
            width: 100%;
            padding: 0.2em 0.9em;

            input[type="text"],
            input[type="password"] {
              max-width: initial;
            }
          }
        }
      }
      .link a {
        font-size: var(--font-size-18);
      }
      .dtable_dis {
        .link a {
          max-width: 220px;
          height: 50px;
        }
        &.l-flex {
          .link a {
            max-width: 470px;
            height: 50px;
          }
        }
      }
      .appModeBtn {
        a {
          line-height: 1.2;
          padding-block: 1em;
        }
      }
    }
  }
}

/*====================================*/
/* list-group */
/*====================================*/
.list-group {
  h2 {
    width: 100%;
    padding: 1em;
    color: var(--color-white);
    background-color: var(--colA1);
  }
  h3 {
    font-size: var(--font-size-20);
    font-weight: 600;
    padding-block: 12px;
    padding-inline: 21px;
    background-color: #dbf4ff;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
  }
  .w30 {
    width: 30%;
  }
  .tcRed01 {
    color: var(--color-notes);
  }
  table {
    border-collapse: collapse;

    th {
      padding: 10px;
      background-color: var(--form-color-02);
      border: 1px solid var(--form-color-01);
    }
    td {
      padding: 10px;
      border: 1px solid var(--form-color-01);
    }
  }
  @media (max-width: 768px) {
    h2 {
      font-size: var(--font-size-20);
      text-align: left;
      line-height: 1.3;
      padding: 0.5em;
    }
    .w30 {
      width: 100%;
    }
    .sp-flex {
      tr {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

/*====================================*/
/* enquete[form.php] */
/*====================================*/
.enquete {
  h2 {
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
    line-height: 1.2;
  }
  .form-list {
    h3 {
      text-align: center;
      color: var(--color-notes);
      margin-bottom: clamp(16px, calc(13px + 0.5vw), 20px);
    }
    .btn-group {
      flex-wrap: wrap;
      gap: 1.5em 2em;
      margin-top: 2em;
      li {
        width: 47.2%;
        a {
          display: flex;
          align-items: center;
          color: var(--colA1);
          font-weight: 600;
          border: 2px solid var(--colA1);
          border-radius: 5px;
          box-shadow: none;
        }
      }
    }
  }
}

/*====================================*/
/* inquiry */
/*====================================*/
.inquiry {
  margin-bottom: clamp(45px, calc(-45px + 15vw), 165px);
  h2 {
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
    line-height: 1.2;
  }
  @media (max-width: 576px) {
    h2 {
      font-size: var(--font-size-24);
    }
  }
  .customer {
    margin-bottom: clamp(12px, calc(3px + 1.5vw), 24px);
    h3 {
      font-size: var(--font-size-20);
      font-weight: 600;
      padding-block: 12px;
      padding-inline: 21px;
      background-color: #dbf4ff;
      border-radius: 5px;
      margin-top: 0;
      margin-bottom: clamp(21px, calc(17.25px + 0.625vw), 26px);
    }
    p {
      margin-bottom: 0.5em;
    }
    .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);
      span.tel {
        font-size: var(--font-size-30);
      }
      span.notes-r.txt-l {
        font-size: var(--font-size-40);
        font-size: 5rem;
      }
    }
    .notes-cont {
      padding: 25px;
      margin-block: clamp(20px, calc(8px + 2vw), 36px);
      background-color: #f0f0f0;
      border-radius: 5px;
    }
  }
  @media (max-width: 576px) {
    .customer {
      .freedial {
        flex-wrap: wrap;
        justify-content: center;
        span.tel {
          font-size: var(--font-size-26);
        }
        span.notes-r.txt-l {
          font-size: var(--font-size-36);
        }
      }
    }
  }
  table {
    .fs,
    .tcRed01 {
      color: var(--color-notes);
    }
    .cell_red {
      background-color: #fcc;
    }
    textarea {
      width: 100%;
    }
  }
  @media (max-width: 768px) {
    table {
      th,
      td {
        display: block;
        width: 100%;
        padding: 0.5em;
      }
      th {
        border-bottom: none;
      }
    }
  }
  #next_bt_2.clearfix,
  .go-top {
    margin-top: clamp(30px, calc(-3px + 5.5vw), 74px);
    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
    }
    li.send span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 270px;
      width: 85vw;
      height: 60px;
      color: var(--color-white);
      font-weight: 600;
      margin-inline: auto;
      background-color: var(--colA1);
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        opacity: 0.7;
      }
      &::after {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Font Awesome 7 Free" !important;
        color: var(--color-white);
        font-weight: 900;
        display: inline-block;
        content: "\f35a";
        padding-left: 0.5rem;
      }
      a {
        text-decoration: none;
        color: var(--color-white) !important;
      }
    }
    li.reset span {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 270px;
      width: 85vw;
      height: 60px;
      color: var(--colA1);
      font-weight: 600;
      margin-inline: auto;
      background-color: var(--color-white);
      border: 2px solid #acacac;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        opacity: 0.7;
      }
      &::after {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Font Awesome 7 Free" !important;
        color: var(--colA1) !important;
        font-weight: 900;
        display: inline-block;
        content: "\f35a";
        padding-left: 0.5rem;
      }
    }
  }
  @media (max-width: 768px) {
    #next_bt_2.clearfix {
      ul {
        flex-wrap: wrap;
        gap: 15px;
      }
    }
  }
}
/*====================================*/
/* register */
/*====================================*/
.def-button-register {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  min-height: 75px;
  color: var(--color-white);
  font-size: var(--font-size-20);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  background-color: var(--rule-apply-color);
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 14px;
  transition: all 0.2s ease;

  cursor: pointer;
  &::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%);
  }
  &:hover {
    opacity: 0.7;
  }
}
@media (max-width: 576px) {
  .def-button-register {
    width: 70vw;
    min-height: 50px;
    font-size: var(--font-size-18);
  }
}
/*-- [rule] --*/
.rule {
  margin-inline: auto;

  h2 {
    line-height: 1.2;
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
  }
  h3 {
    position: relative;
    display: inline-block;
    color: var(--colA1);
    text-align: center;
    margin-block: auto;

    &::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;
    }
  }
  .terms-and-personal {
    width: 100%;
    margin-top: 0;
  }
  .rule_frame_wrapper {
    height: 715px;
    padding-block: clamp(16px, calc(7px + 1.5vw), 28px) 18px;
    padding-inline: clamp(13px, calc(-11px + 4vw), 45px) 10px;
    margin-top: clamp(24px, calc(21.75px + 0.375vw), 27px);
    border: 1px solid var(--color-medium-gray);
    overflow-y: hidden;
  }
  .rule_frame_scroll {
    height: 100%;
    padding-right: clamp(30px, calc(4.4999999999999964px + 4.25vw), 64px);
    overflow-y: scroll;
    scrollbar-color: #cbcbcb #f5f5f5;
  }
  .yakkanChkBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 3em;
    margin-bottom: clamp(15px, calc(11.25px + 0.625vw), 20px);
    input[type="checkbox"] {
      display: block;
      width: 28px;
      height: 28px;
      border: 1px solid var(--color-medium-gray);
      border-radius: 5px;
    }
    label {
      font-weight: 600;
      padding-left: 15px;
    }
  }
  #next_bt_touring_user_ex {
    width: 100%;
    margin-top: clamp(32px, calc(7.25px + 4.125vw), 65px);
  }

  #rule_apply_btn {
    & .ruleActBtn {
      width: 480px;
      min-height: 75px;
      background-color: var(--rule-apply-color);
      cursor: pointer;
      &.off {
        pointer-events: none;
        cursor: default;
        background-color: var(--color-medium-gray);
      }
      /*&.on {
        background-color: var(--rule-apply-color);
        cursor: pointer;
      }*/
    }
  }

  @media (max-width: 768px) {
    h2 {
      font-size: var(--font-size-24);
      font-weight: 600;
    }
    h3 {
      font-size: var(--font-size-18);
    }
  }
  .rule_frame_wrapper {
    height: 500px;
  }
  #rule_apply_btn {
    .ruleActBtn {
      width: 300px;
      min-height: 60px;
      font-size: var(--font-size-16);
    }
  }
}
/*-- [input] --*/
.register .input {
  .basicTbl01 {
    table {
      th {
        width: 23%;
      }
      td.name,
      td.tel {
        .l-flex {
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          gap: 10px;
        }
      }
    }
  }
  input[type="text"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="password"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="tel"] {
    max-width: 30%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="tel"][name*="etc_"] {
    max-width: 50%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="email"] {
    max-width: 400px;
    width: 100%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="radio"] {
    width: 15px;
    height: 15px;
    margin-top: 0;
  }
  select {
    font-size: var(--font-size-16);
    padding: 5px 10px;
  }
  @media (max-width: 576px) {
    .basicTbl01 {
      width: 100%;
      margin-inline: auto;
      table {
        display: block;
        min-width: initial;
        width: 93%;
        margin-inline: auto;
        tbody {
          display: inline-block;
          width: 100%;
        }
        tr {
          display: flex;
          flex-direction: column;
          width: 100%;
          th,
          td {
            display: block;
            width: 100%;
          }
          td.name,
          td.tel {
            .l-flex {
              align-items: center;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    input[name^="tel"] {
      max-width: 28%;
    }
  }
}
/*-- [confirm] --*/
.register .confirm {
  @media (max-width: 768px) {
    table {
      display: block;
      min-width: initial;
      width: 93%;
      margin-inline: auto;
      tbody {
        display: inline-block;
        width: 100%;
      }
      tr {
        display: flex;
        flex-direction: column;
        width: 100%;

        th,
        td {
          display: block;
          width: 100%;
        }
      }
    }
  }
}
/*====================================*/
/* password */
/*====================================*/
.password {
  h2 {
    line-height: 1.2;
    margin-bottom: clamp(21px, calc(9.75px + 1.875vw), 36px);
  }
  @media (max-width: 768px) {
    h2 {
      font-size: var(--font-size-24);
      font-weight: 600;
    }
  }
}
.def-button-password {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  min-height: 75px;
  color: var(--color-white);
  font-size: var(--font-size-20);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  background-color: var(--rule-apply-color);
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 14px;
  transition: all 0.2s ease;
  cursor: pointer;

  &::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%);
  }
  &:hover {
    opacity: 0.7;
    span {
      color: var(--color-white);
    }
  }
}
@media (max-width: 768px) {
  .def-button-password {
    width: 300px;
    min-height: 60px;
    font-size: var(--font-size-16);
  }
}
.input-pass,
.input-reset-pass {
  table.input {
    th {
      width: 30%;
    }
  }
  input[type="password"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="text"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="tel"] {
    max-width: 30%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  select {
    font-size: var(--font-size-16);
    padding: 5px 10px;
  }
  @media (max-width: 768px) {
    table.input {
      display: block;
      min-width: initial;
      width: 93%;
      margin-inline: auto;
      tbody {
        display: inline-block;
        width: 100%;
      }
      tr {
        display: flex;
        flex-direction: column;
        width: 100%;

        th,
        td {
          display: block;
          width: 100%;
        }
      }
    }
    input[name^="tel"] {
      max-width: 28%;
    }
  }
}
/*====================================*/
/* modify */
/*====================================*/
.modify .edit {
  .basicTbl01 {
    table {
      th {
        width: 23%;
      }
      td.name,
      td.tel {
        .l-flex {
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          gap: 10px;
        }
      }
    }
  }
  input[type="text"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="password"] {
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="tel"] {
    max-width: 30%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="tel"][name*="etc_"] {
    max-width: 50%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="email"] {
    max-width: 400px;
    width: 100%;
    font-size: var(--font-size-16);
    padding: 5px;
  }
  input[type="radio"] {
    width: 15px;
    height: 15px;
    margin-top: 0;
  }
  select {
    font-size: var(--font-size-16);
    padding: 5px 10px;
  }
  @media (max-width: 576px) {
    .basicTbl01 {
      width: 100%;
      margin-inline: auto;
      table {
        display: block;
        min-width: initial;
        width: 93%;
        margin-inline: auto;
        tbody {
          display: inline-block;
          width: 100%;
        }
        tr {
          display: flex;
          flex-direction: column;
          width: 100%;
          th,
          td {
            display: block;
            width: 100%;
          }
          td.name,
          td.tel {
            .l-flex {
              align-items: center;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    input[name^="tel"] {
      max-width: 28%;
    }
  }
}
/*-- [confirm] --*/
.modify .confirm {
  .basicTbl01 {
    table {
      th {
        width: 23%;
      }
      td.name,
      td.tel {
        .l-flex {
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          gap: 10px;
        }
      }
    }
  }
  @media (max-width: 768px) {
    .basicTbl01 {
      table {
        display: block;
        min-width: initial;
        width: 93%;
        margin-inline: auto;
        tbody {
          display: inline-block;
          width: 100%;
        }
        tr {
          display: flex;
          flex-direction: column;
          width: 100%;

          th,
          td {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
}

/*====================================*/
/* multi */
/*====================================*/
/*-- [.multi-cont] --*/
.multi-cont {
  .multiInpNav {
    display: none;
  }
  .cell_red,
  .tcRed01 {
    color: var(--color-notes);
  }
  #regiAddBtn,
  .regiReset,
  .regiRemove {
    display: inline-block;
    min-width: 140px;
    font-size: 1.3rem;
    text-align: center;
    padding: 0.1em 0.2em;
    background-color: rgb(240, 240, 240);
    border: 1px solid var(--color-medium-gray);
    border-radius: 3px;
    cursor: pointer;

    &:hover {
      background-color: rgb(218, 218, 218);
    }
  }
  .clearRegiBtn {
    ul {
      margin-bottom: 1em;
      li {
        margin-right: 1em;
      }
    }
  }
  .multi-complete-data {
    text-align: left;
  }
  .multi-complete-info {
    max-width: 500px;
    padding: 1em;
    margin-top: 2em;
    margin-inline: auto;
    background-color: var(--color-light-blue);
    border-radius: 10px;

    ul {
      margin-block: 0.2em;
      li {
        font-weight: 600;
      }
    }
  }
  @media (max-width: 768px) {
    .basicTbl01 {
      table {
        display: block;
        min-width: initial;
        width: 93%;
        margin-inline: auto;
        tbody {
          display: inline-block;
          width: 100%;
        }
        tr {
          display: flex;
          flex-direction: column;
          width: 100%;

          th,
          td {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
  @media (max-width: 576px) {
    #next_bt_3 .l-flex {
      flex-direction: column;
    }
    .basicTbl01 {
      width: 100%;
      margin-inline: auto;
      table {
        display: block;
        min-width: initial;
        width: 93%;
        margin-inline: auto;
        tbody {
          display: inline-block;
          width: 100%;
        }
        tr {
          display: flex;
          flex-direction: column;
          width: 100%;
          th,
          td {
            display: block;
            width: 100%;
          }
          td.name,
          td.tel {
            .l-flex {
              align-items: center;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    input[name^="tel"] {
      max-width: 28%;
    }
  }
}

/*-- [.multi-calendar] --*/
.multi-calendar {
  .possible {
    strong {
      color: var(--calenter-two-day);
    }
  }
}

#next_bt_3 a.icf-boxbtn {
  margin-top: clamp(30px, calc(-3px + 5.5vw), 74px);
}

/*-- [.enquete] --*/
.step-form.enquete {
  .tcRed01 {
    color: var(--color-notes);
    font-weight: 600;
  }
  .errBg {
    background-color: #ffe2e6;
  }
  .blue {
    color: var(--colA1);
    font-weight: 600;
  }
  .lower.basicTbl01 {
    width: 100%;
  }
  table {
    width: 100%;
    margin-top: clamp(16px, calc(13px + 0.5vw), 20px);
  }
  .btn-send {
    display: block;
    padding-block: 0;
    margin-inline: auto;

    input[type="submit"],
    input[type="button"] {
      width: 100%;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      padding-block: 23px;
      background-color: transparent;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
    }

    &:hover {
      text-decoration: none;
    }
  }
  
  a.btn-send {
    padding-block: 23px;
  }

  @media (max-width: 576px) {
    .l-flex {
      display: block;
    }
    a.btn-send {
      padding-block: 23px;
    }
  }
}



.login-links+.step-form_personal{
  margin-top:53px;
}