@charset "UTF-8";

#contact_form {
  position: relative;
  z-index: 1;
  background: none;
  .outer {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    .inr {
      max-width: 1000px;
      margin: 0 auto;
      .txt_area {
        position: relative;
        z-index: 1;
        margin-bottom: 7.4rem;
        text-align: center;
        h1 {
          margin: 0 auto 5rem;
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
          text-shadow: 1px 2px 3px #f8f8f8;
          text-align: center;
        }
      }
      ul {
        display: flex;
        align-items: center;
        width: 800px;
        margin: 0 auto 6rem;
        background-color: #eee;
        border-radius: 1rem;
        padding: 1.8rem 4.5rem;
        li {
          list-style: none;
          flex-shrink: 0;
          &:last-child {
            border-left: 1px solid var(--white);
            padding: 1.4rem 0 1rem 4.5rem;
          }
          p {
            font-size: 1.8rem;
            font-weight: 700;
            margin-right: 4rem;
          }
          a {
            display: block;
            pointer-events: none;
            dl {
              display: flex;
              align-items: baseline;
              font-size: 1.4rem;
              font-weight: 700;
              font-family: var(--roboto);
              margin-bottom: 0.7rem;
              dt {
                font-size: 2.1rem;
                line-height: 1;
              }
              dd {
                font-size: 4.4rem;
                margin-left: 3px;
                line-height: 1;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    position: static;
    padding: 4.5rem 2.5rem 2.5rem;
    .outer {
      padding: 0 0 2.5rem;
      .inr {
        .txt_area {
          text-align: center;
          margin-bottom: 2.5rem;
          h1 {
            font-size: 2.1rem;
            letter-spacing: 0;
            margin-bottom: 1.9rem;
            text-align: center;
            padding: 0 1rem;
          }
        }
        ul {
          display: block;
          width: auto;
          padding: 1.1rem 1.6rem;
          text-align: center;
          margin: 0 auto 3.5rem;
          li {
            &:last-child {
              border-left: none;
              border-top: 1px solid var(--white);
              padding: 1rem 0 0;
            }
            p {
              font-size: 1.6rem;
              margin-right: 0;
              margin-bottom: 0.8rem;
              letter-spacing: 0.15em;
            }
            a {
              display: block;
              pointer-events: auto;
              dl {
                font-size: 1rem;
                justify-content: center;
                &:nth-child(1) {
                  margin-bottom: 0.7rem;
                  dt {
                    font-size: 1.3rem;
                  }
                  dd {
                    font-size: 2.25rem;
                    font-weight: 700;
                    margin-left: 3px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

form {
  transition: opacity 0.3s ease-in-out;
  &.cookieClick {
    pointer-events: none;
  }
  .f_wrap {
    padding: 1.5rem 5rem 5rem;
    border: 1px solid var(--subcolor);
    margin-bottom: 6rem;
    .box {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed var(--subcolor);
      flex-wrap: wrap;
      &.box2 {
        dl.dl {
          width: 49.25%;
        }
      }
      &.pickup {
        padding: 2.2rem 0 2.5rem;
        dl.dl {
          padding: 0;
        }
        p {
          margin-top: 0.5rem;
        }
      }
      dl.dl {
        width: 32.5%;
        border-bottom: none;
        .msg {
          margin-bottom: 1em;
        }
      }
    }
    .txt {
      font-size: 1.2rem;
      p {
        line-height: 2.5;
        sup {
          top: 0;
          margin-right: 0.5rem;
        }
      }
    }
    dl.dl {
      padding: 2.2rem 0 2.5rem;
      border-bottom: 1px dashed var(--subcolor);
      dt {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 1rem;
        letter-spacing: 0.1em;
      }
      dd {
        background-color: var(--white);
        border: 1px solid var(--subcolor);
        border-radius: 2px;
        padding: 1.4rem;
        letter-spacing: 0.1em;
        input {
          width: 100%;
          resize: none;
        }
        textarea {
          width: 100%;
          height: 18rem;
        }
        &.dateTime {
          border: none;
          display: flex;
          justify-content: space-between;
          padding: 1.4rem 0;
          div {
            border: 1px solid var(--subcolor);
            border-radius: 2px;
            padding: 1.4rem;
            width: 49%;
            select {
              width: 100%;
              border: none;
              -webkit-appearance: none;
              appearance: none;
            }
          }
        }
      }
      &.car_type {
        padding: 2.2rem 0 0.5rem;
        dd {
          border: none;
          padding: 1.4rem 0;
          #radioWrap {
            display: flex;
            flex-wrap: wrap;
            label {
              display: block;
              width: 32%;
              position: relative;
              margin-left: 2%;
              margin-bottom: 2%;
              border: 1px solid var(--subcolor);
              overflow: hidden;
              cursor: pointer;
              &:nth-of-type(3n + 1) {
                margin-left: 0;
              }
              .icon {
                width: 100%;
                height: 17rem;
                background-size: 80%;
                background-position: center;
                background-repeat: no-repeat;
              }
              .txt {
                height: 100%;
                background-color: #999;
                text-align: center;
                color: var(--white);
                padding: 2rem;
                transition: background-color 0.3s ease;
                span {
                  font-size: 1.3rem;
                  font-weight: 700;
                  line-height: 1.4;
                  margin: 0;
                }
              }
              input {
                &[type="radio"] {
                  display: none;
                  &:checked {
                    + .txt {
                      background-color: var(--maincolor);
                    }
                  }
                }
              }
            }
          }
        }
      }
      &.option {
        dd {
          border: none;
          padding: 1.4rem 0;
          .check {
            display: flex;
            margin-bottom: 3rem;
            .sel_wrap {
              display: flex;
              align-items: center;
              width: 50%;
              .icon {
                width: 8.5rem;
              }
              span {
                margin-left: 1rem;
              }
              select {
                margin-left: 1rem;
                appearance: none;
                border: 1px solid var(--subcolor);
                border-radius: 0;
                padding: 0.5rem 2rem;
              }
            }
          }
          .chack {
            .txt {
              margin-bottom: 3rem;
              p {
                font-size: 1.4rem;
                line-height: 1.8;
                &:not(:last-of-type) {
                  margin-bottom: 2rem;
                }
              }
            }
            label {
              line-height: 135%;
              position: relative;
              display: flex;
              align-items: center;
              input {
                &[type="checkbox"] {
                  width: 1.3rem;
                  position: relative;
                  border: none;
                  transform: translateY(-2px);
                  appearance: auto;
                  &::before {
                    position: absolute;
                    z-index: 1;
                    top: 0.525rem;
                    left: 0.5875rem;
                    width: 0.75rem;
                    height: 0.375rem;
                    content: "";
                    -webkit-transition: -webkit-transform 0.4s
                      cubic-bezier(0.45, 1.8, 0.5, 0.75);
                    transition: transform 0.4s
                      cubic-bezier(0.45, 1.8, 0.5, 0.75);
                    -webkit-transform: rotate(-45deg) scale(0, 0);
                    transform: rotate(-45deg) scale(0, 0);
                    border: 2px solid #333;
                    border-top-style: none;
                    border-right-style: none;
                  }
                  &::after {
                    position: absolute;
                    top: -0.125rem;
                    left: 0;
                    width: 1.8rem;
                    height: 1.8rem;
                    content: "";
                    cursor: pointer;
                    border: 2px solid #d2d2d2;
                    background: var(--white);
                  }
                  &:checked {
                    &::before {
                      -webkit-transform: rotate(-45deg) scale(1, 1);
                      transform: rotate(-45deg) scale(1, 1);
                    }
                  }
                }
              }
              span {
                margin-left: 2rem;
                line-height: 1;
                span {
                  margin-left: 0;
                }
              }
            }
          }
          .caution {
            margin-top: 3rem;
            p {
              display: block;
              a {
                text-decoration: underline;
                &:hover {
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
      &.ninzu {
        dd {
          border: none;
        }
      }
      &.pax {
        dd {
          border: none;
          padding: 0;
          .check {
            display: flex;
            .sel_wrap {
              margin-right: 1em;
              select {
                margin-right: 0.3em;
                appearance: none;
                border: 1px solid var(--subcolor);
                border-radius: 0;
                padding: 0.5rem 2rem;
              }
            }
          }
        }
      }
    }
  }
  .send {
    display: flex;
    justify-content: center;
    button {
      display: block;
      width: 28rem;
      text-align: center;
      font-size: 1.6rem;
      color: var(--white);
      height: 100%;
      padding: 0;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease-out;
      position: relative;
      background-color: var(--maincolor);
      background: -webkit-linear-gradient(
        to right,
        rgba(32, 162, 229, 1) 0%,
        rgba(50, 199, 180, 1) 100%
      );
      background: linear-gradient(
        to right,
        rgba(32, 162, 229, 1) 0%,
        rgba(50, 199, 180, 1) 100%
      );
      &:disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.5;
      }
      p {
        position: relative;
        letter-spacing: 0.1em;
        padding: 1.9rem 0;
        color: var(--white);
        span {
          width: 2.9rem;
          bottom: 0;
          overflow: hidden;
          position: absolute;
          right: 0;
          top: 0;
          &::after {
            content: "";
            background: var(--white);
            bottom: 0;
            display: block;
            height: 1px;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    .f_wrap {
      padding: 0 0 1.8rem;
      border: none;
      margin-bottom: 4rem;
      border-top: 1px dashed var(--subcolor);
      border-bottom: 1px dashed var(--subcolor);
      .box {
        display: block;
        border-bottom: none;
        &.box2 {
          display: block;
          dl.dl {
            width: 100%;
            input {
              font-size: 1.6rem;
            }
          }
        }
        &.pickup {
          padding: 1.2rem 0 1.5rem;
          border-bottom: 1px dashed var(--subcolor);
          dl.dl {
            border-bottom: none;
            margin-bottom: 2rem;
            &:last-of-type {
              margin-bottom: 0;
            }
            input {
              font-size: 1.6rem;
            }
          }
          p {
            font-size: 1.2rem;
          }
        }
        dl.dl {
          width: auto;
          border-bottom: 1px dashed var(--subcolor);
          .msg {
            margin-bottom: 1em;
          }
        }
      }
      .txt {
        font-size: 1.2rem;
        p {
          line-height: 2.5;
          sup {
            top: 0;
            margin-right: 0.5rem;
          }
        }
      }
      dl.dl {
        padding: 1.2rem 0 1.5rem;
        border-bottom: 1px dashed var(--subcolor);
        dt {
          font-size: 1.2rem;
          margin-bottom: 1rem;
          letter-spacing: 0.1em;
        }
        dd {
          border-radius: 0;
          padding: 0.8rem;
          letter-spacing: 0.1em;
          input {
            font-size: 1.6rem;
            width: 100%;
            resize: none;
          }
          textarea {
            font-size: 1.6rem;
            height: 18rem;
          }
          &.dateTime {
            padding: 0;
            div {
              border: 1px solid var(--subcolor);
              border-radius: 2px;
              padding: 1.4rem;
              width: 49%;
              select {
                font-size: 1.6rem;
              }
            }
          }
        }
        &.car_type {
          padding: 2.2rem 0 0.5rem;
          dd {
            border: none;
            padding: 1.4rem 0;
            #radioWrap {
              display: flex;
              flex-wrap: wrap;
              label {
                width: 49%;
                margin-left: 2%;
                margin-bottom: 2%;
                &:nth-of-type(3n + 1) {
                  margin-left: 2%;
                }
                &:nth-of-type(odd) {
                  margin-left: 0;
                }
                .icon {
                  height: 11rem;
                }
                .txt {
                  padding: 1rem;
                  span {
                    font-size: 1.2rem;
                  }
                }
                input {
                  &[type="radio"] {
                    display: none;
                    &:checked {
                      + .txt {
                        background-color: var(--maincolor);
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.option {
          dd {
            padding: 0;
            .check {
              display: block;
              .sel_wrap {
                width: auto;
                margin-bottom: 1.5rem;
                .icon {
                  width: 5rem;
                }
                select {
                  font-size: 1.6rem;
                  padding: 0.25rem 1rem;
                }
                span {
                  font-size: 1.2rem;
                }
              }
            }
            .caution {
              margin-top: 2.1rem;
              font-size: 1.2rem;
            }
          }
        }
        &.ninzu {
          dd {
            padding: 0;
          }
        }
        &.pax {
          dd {
            padding: 0;
            .check {
              margin-bottom: 0;
              .sel_wrap {
                margin: 0;
                select {
                  font-size: 1.6rem;
                  padding: 0.25rem 1rem;
                }
                span {
                  font-size: 1.2rem;
                }
              }
            }
          }
        }
      }
    }
    .send {
      padding: 0 2.5rem;
      button {
        width: 100%;
        font-size: 1.4rem;
        p {
          padding: 1.9rem 0;
          span {
            width: 3.2rem;
          }
        }
      }
    }
  }
}

#contact_form .privacyPolicy {
  padding: 2.2rem 0 3rem;
  h4 {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
  }
  .showCookieModalBtn {
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
  .check {
    text-align: center;
    label {
      display: block;
      line-height: 135%;
      position: relative;
      cursor: not-allowed;
      display: flex;
      align-items: center;
      opacity: 0.5;
      input {
        &[type="checkbox"] {
          position: relative;
          border: none;
          transform: translateY(-2px);
          appearance: auto;
          &::before {
            position: absolute;
            z-index: 1;
            top: 0.525rem;
            left: 0.5875rem;
            width: 0.75rem;
            height: 0.375rem;
            content: "";
            -webkit-transition: -webkit-transform 0.4s
              cubic-bezier(0.45, 1.8, 0.5, 0.75);
            transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
            -webkit-transform: rotate(-45deg) scale(0, 0);
            transform: rotate(-45deg) scale(0, 0);
            border: 2px solid #333;
            border-top-style: none;
            border-right-style: none;
          }
          &::after {
            position: absolute;
            top: -0.125rem;
            left: 0;
            width: 1.8rem;
            height: 1.8rem;
            content: "";
            cursor: pointer;
            border: 2px solid #d2d2d2;
            background: var(--white);
          }
          &:checked {
            &::before {
              -webkit-transform: rotate(-45deg) scale(1, 1);
              transform: rotate(-45deg) scale(1, 1);
            }
          }
        }
      }
      span {
        margin-left: 2rem;
        line-height: 1;
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 1.2rem 0 1.5rem;
    h4 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      letter-spacing: 0.1em;
    }
    > p {
      font-size: 1.2rem;
      letter-spacing: 0.1em;
    }
    .check {
      label {
        align-items: flex-start;
        span {
          font-size: 1.2rem;
          margin-left: 1.8rem;
        }
        input {
          &[type="checkbox"] {
            &::before {
              top: 0.5rem;
              left: 0.5rem;
              width: 1rem;
              height: 0.5rem;
            }
            &::after {
              width: 2rem;
              height: 2rem;
              border: 1px solid #d2d2d2;
            }
          }
        }
      }
    }
  }
}

#kekka {
  display: none;
  padding: 1.4rem;
  background: #f8f8f8;
  &.is-active {
    display: block;
  }
  #yoyaku_detail {
    .found {
      font-weight: 700;
      color: #0000ff;
      margin-bottom: 1em;
    }
    .not_found {
      font-weight: 700;
      color: #d20000;
      margin-bottom: 1em;
    }
    h2 {
      font-size: 1.6rem;
      margin-bottom: 1em;
    }
    #kekka_price {
      font-size: 1.5em;
      margin-top: 0.5em;
      .unit {
        font-size: 0.8em;
      }
    }
    #subtotal {
      margin-top: 2rem;
      p {
        b {
          font-size: 1.2em;
          margin-left: 1rem;
        }
      }
      .opWrap {
        display: flex;
        align-items: center;
        .detail {
          margin-left: 1rem;
          &::before {
            content: "[";
          }
          &::after {
            content: "]";
          }
        }
      }
    }
    .following {
      margin-top: 1em;
    }
    b {
      font-size: 1.2em;
    }
  }
  #yoyaku_no {
    p {
      color: #d20000;
    }
  }
  @media screen and (max-width: 743px) {
    #yoyaku_detail {
      #subtotal {
        margin-top: 2rem;
        p {
          b {
            font-size: 1.2em;
            margin-left: 1rem;
          }
        }
        .opWrap {
          display: block;
          .detail {
            display: block;
            margin-left: 1.5rem;
          }
        }
      }
    }
    #yoyaku_no {
      p {
        color: #d20000;
      }
    }
  }
}

#staff_fields {
  #car_kouho_sec {
    background: #ddddf4;
    padding: 1em;
    label {
      margin-right: 1em;
      cursor: pointer;
      input {
        margin-right: 0.5em;
      }
    }
  }
}