@charset "UTF-8";

#hero {
  display: block;
  position: relative;
  height: calc(100vh - 10rem);
  padding: 0;
  .fade_area_ja {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    .switchBg {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      overflow: hidden;
      img {
        display: none;
        opacity: 0;
        visibility: hidden;
      }
    }
  }
  .read_txt {
    position: absolute;
    bottom: 10rem;
    right: 5rem;
    color: #fff;
    h1 {
      font-size: 5.2rem;
      line-height: 1.6;
      letter-spacing: 0.05em;
      text-shadow: 1px 2px 3px #808080;
      span {
        display: block;
        span::before {
          content: "";
          display: block;
          width: 0.6rem;
          height: 0.6rem;
          background-color: #e1f062;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      br {
        display: none;
      }
      h2 {
        font-size: 3rem;
        margin-bottom: 2.8rem;
        text-shadow: 1px 2px 3px #808080;
      }
    }
    .txt {
      font-size: 2.1rem;
      font-weight: 700;
      line-height: 2;
      text-shadow: 1px 1px 2px #808080;
      margin-bottom: 3rem;
      p {
        color: #fff;
        letter-spacing: 0.2em;
      }
    }
    .hvp {
      width: auto;
      a {
        display: flex;
        align-items: baseline;
        justify-content: center;
        text-align: center;
        font-size: 3.2rem;
        font-weight: 700;
        color: #fff;
        height: 100%;
        padding: 0;
        transition: all 0.3s ease-out;
        position: relative;
        background: linear-gradient(
          to right,
          rgba(32, 162, 229, 0.8) 0%,
          rgba(50, 199, 180, 0.8) 100%
        );
        padding: 3.5rem 0;
        &::after {
          content: "";
          display: block;
          width: 4.3rem;
          height: 2rem;
          background-image: url(/images/icon_car.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          margin-left: 1rem;
          transition: all 0.3s ease;
        }
        &:hover::after {
          transform: translateX(1rem);
        }
        p {
          position: relative;
          letter-spacing: 0.1em;
          color: #fff;
          line-height: 1;
          span {
            width: 2.9rem;
            bottom: 0;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 0;
            span::after {
              content: "";
              background: #fff;
              bottom: 0;
              display: block;
              height: 1px;
              margin: auto;
              position: absolute;
              right: 0;
              top: 0;
              width: 3.9rem;
            }
          }
        }
      }
    }
  }
  .scl {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    p {
      font-family: "Roboto", sans-serif;
      font-size: 1rem;
      color: #fff;
      letter-spacing: 0.2em;
      &::after {
        content: "";
        display: block;
        height: 5rem;
        width: 1px;
        background-color: #fff;
        margin: 2rem auto 0;
      }
    }
  }
  @media screen and (max-width: 743px) {
    height: auto;
    margin-bottom: 0;
    .fade_area_ja {
      position: static;
      right: 0;
      width: 100%;
      height: 21rem;
    }
    .read_txt {
      position: static;
      width: 33.5rem;
      transform: translate(0, 0);
      margin: 1.5rem auto 0;
      h1 {
        font-size: 2.8rem;
        line-height: 1.4;
        color: #000;
        margin-bottom: 0.75rem;
        text-shadow: none;
        & > span {
          display: block;
          span {
            padding-top: 0;
            letter-spacing: 0.2em;
            span::before {
              display: none;
            }
          }
        }
        & > br {
          display: block;
        }
        &:is(.lang_en #hero .read_txt h1) {
          font-size: 2.5rem;
        }
      }
      .txt {
        margin-bottom: 3.4rem;
        padding: 0;
        line-height: 1;
        color: #000;
        text-shadow: none;
        p {
          color: #000;
          letter-spacing: 0.2em;
          font-size: 1.4rem;
          display: inline;
          br {
            display: none;
          }
        }
      }
      .hvp {
        margin: 0 auto;
        width: 100%;
        a {
          font-size: 1.4rem;
          padding: 2.5rem 0;
          &::after {
            width: 3rem;
            height: 1.4rem;
          }
          p {
            padding: 0;
            font-size: 2.1rem;
            span::after {
              width: 3.4rem;
            }
          }
        }
      }
    }
    .scl {
      display: none;
    }
  }
}

#about {
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        h1 {
          margin-bottom: 5rem;
          font-size: 3.8rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
          text-align: center;
          span {
            display: block;
          }
        }
        h2 {
          display: flex;
          line-height: 2.4;
          letter-spacing: 0.15em;
          font-size: 3.3rem;
          letter-spacing: 0.05em;
          font-weight: 700;
          text-align: center;
          justify-content: center;
          align-items: center;
          margin-bottom: 3rem;
          span {
            line-height: 1;
          }
          &::before,
          &::after {
            content: "";
            display: block;
            width: 0.4rem;
            height: 4.2rem;
            background-color: var(--textcolor);
            transform: rotate(-25deg);
            margin: 0 1.5rem;
          }
          &::after {
            transform: rotate(25deg);
          }
        }
      }
      .cnt_area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        .left {
          position: relative;
          width: 40%;
          flex-shrink: 0;
          font-size: 0;
          div {
            position: relative;
            z-index: 1;
          }
          .bg {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #534741;
            position: absolute;
            top: 1rem;
            left: 1rem;
          }
        }
        .right {
          position: relative;
          width: 56%;
          .txt {
            margin-left: 3rem;
            p {
              line-height: 2.4;
              letter-spacing: 0.15em;
              font-size: 1.6rem;
            }
            .min {
              font-size: 1.4rem;
              font-weight: 700;
              letter-spacing: 0.15em;
              margin-top: 2rem;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 1.75rem;
            line-height: 1.5;
            letter-spacing: 0.03em;
            margin-bottom: 3rem;
            text-align: center;
          }
          h2 {
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
            &::before,
            &::after {
              width: 0.2rem;
              height: 2.1rem;
              margin: 0 1.5rem;
            }
          }
        }
        .cnt_area {
          display: block;
          .left {
            width: auto;
            margin-bottom: 3rem;
            .bg {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: auto;
            .txt {
              margin-left: 0;
              p {
                line-height: 2;
                font-size: 1.3rem;
                display: inline;
              }
              .min {
                font-size: 1.2rem;
                margin-top: 2rem;
                p {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}

#gallery {
  background: linear-gradient(
    90deg,
    #f8f8f8 0%,
    #f8f8f8 62.5%,
    var(--white) 62.5%,
    var(--white) 100%
  );
  position: relative;
  z-index: 1;
  .outer {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    .inr {
      max-width: 1200px;
      margin: 0 auto;
      .txt_area {
        position: relative;
        z-index: 1;
        margin-bottom: 4rem;
        h1 {
          font-size: 3.8rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.1em;
          margin-bottom: 1rem;
          text-shadow: 1px 2px 3px #f8f8f8;
          text-align: center;
          span {
            display: block;
            font-family: var(--roboto);
          }
        }
      }
      .thunbnail {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 32.8%;
          font-size: 0;
          list-style: none;
          text-align: center;
          position: relative;
          padding: 0;
          margin-bottom: 0.8%;
          cursor: pointer;
          transition: opacity 0.3s ease-in-out;
          &:hover {
            opacity: 0.5;
          }
          .li_wrap {
            display: none;
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        .txt_area {
          text-align: center;
          margin-bottom: 4rem;
          h1 {
            font-size: 2.3rem;
            letter-spacing: 0.15em;
            margin-bottom: 0.4rem;
            white-space: nowrap;
            text-align: center;
            span {
              font-size: 1.2rem;
            }
          }
        }
        .thunbnail {
          button {
            width: 49.5%;
            margin-bottom: 1%;
            padding: 0;
          }
        }
      }
    }
  }
}

#price,
#long-term {
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        margin-bottom: 2.6rem;
        h1 {
          margin-bottom: 5rem;
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
        }
      }
    }
    .tbl_area {
      h2 {
        line-height: 1;
        letter-spacing: 0.15em;
        font-size: 4rem;
        letter-spacing: 0.05em;
        margin-bottom: 3rem;
      }
      table {
        width: 100%;
        background-color: #f1f1f1;
        font-size: 0;
        border-collapse: collapse;
        margin-bottom: 5rem;
        th {
          border-bottom: 1px solid #fff;
          background-color: #808080;
          color: #fff;
          letter-spacing: 0.15em;
          font-size: 1.6rem;
          padding: 1rem;
          text-align: left;
        }
        td {
          border-bottom: 1px solid #fff;
          border-left: 1px solid #fff;
          letter-spacing: 0.15em;
          font-size: 1.6rem;
          padding: 1rem;
          text-align: center;
        }
        thead {
          th {
            background-color: #f1f1f1;
          }
          td {
            color: #fff;
            font-weight: 700;
            background-color: var(--maincolor);
          }
        }
        tbody {
          td:nth-child(even) {
            background-color: #d8f3fc;
          }
        }
      }
      .dList {
        margin-bottom: 5rem;
        .ttl {
          line-height: 1;
          letter-spacing: 0.15em;
          font-size: 4rem;
          font-weight: 700;
          letter-spacing: 0.05em;
          margin-bottom: 3rem;
        }
        dl {
          display: flex;
          border-bottom: 1px solid var(--maincolor);
          dt,
          dd {
            letter-spacing: 0.15em;
            font-size: 1.6rem;
            padding: 1rem 0;
          }
          dt {
            font-weight: 700;
            border-bottom: 3px solid var(--maincolor);
            padding: 1rem 1.2rem;
          }
        }
      }
      .caution {
        a {
          color: var(--maincolor);
          text-decoration: underline;
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    text-align: center;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 2.3rem;
            line-height: 1.5;
            letter-spacing: 0.19em;
            margin-bottom: 2rem;
            span {
              display: block;
            }
          }
        }
        .tbl_area {
          h2 {
            font-size: 1.6rem;
            margin-bottom: 2rem;
          }
          .tblWrap {
            overflow-x: scroll;
          }
          table {
            white-space: nowrap;
            margin-bottom: 3rem;
            th {
              letter-spacing: 0.15em;
              font-size: 1.4rem;
              padding: 1rem;
            }
            td {
              letter-spacing: 0.15em;
              font-size: 1.4rem;
              padding: 1rem;
            }
            thead {
              th {
                background-color: #f1f1f1;
              }
              td {
                background-color: var(--maincolor);
              }
            }
          }
          p.caution {
            font-size: 1.2rem;
            text-align: left;
            padding-left: 1.9rem;
            text-indent: -1rem;
          }
          .dList {
            margin: 3.75rem 1rem;
            .ttl {
              font-size: 1.6rem;
              margin-bottom: 0.9rem;
            }
            dl {
              display: block;
              border-bottom: 2px solid var(--maincolor);
              padding: 1rem 0;
              dt,
              dd {
                padding: 0;
                font-size: 1.2rem;
                line-height: 1.8;
                text-align: left;
              }
              dt span {
                display: none;
              }
              dt {
                font-size: 1.3rem;
                padding: 0;
                border-bottom: none;
              }
              dd span {
                display: block;
              }
            }
          }
        }
      }
    }
  }
}

#guide {
  background: linear-gradient(
    90deg,
    #f8f8f8 0%,
    #f8f8f8 62.5%,
    var(--white) 62.5%,
    var(--white) 100%
  );
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        h1 {
          margin-bottom: 7.5rem;
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
        }
        .txtWrap {
          display: flex;
          align-items: flex-start;
          position: relative;
          &::after {
            content: "";
            display: block;
            width: 2px;
            height: 100%;
            background-color: var(--maincolor);
            position: absolute;
            top: 0;
            left: 3.2rem;
          }
          &:last-of-type::after {
            display: none;
          }
          .step {
            font-family: var(--roboto);
            font-weight: 700;
            background-color: var(--maincolor);
            color: #fff;
            padding: 1rem;
            position: relative;
            z-index: 1;
          }
          .txt {
            margin: -0.3rem 0 5.2rem 2rem;
            h2 {
              line-height: 1;
              letter-spacing: 0.15em;
              font-size: 4rem;
              letter-spacing: 0.05em;
              margin-bottom: 3rem;
            }
            p {
              line-height: 2.4;
              letter-spacing: 0.15em;
              font-size: 1.6rem;
            }
            .min {
              margin-top: 3rem;
              h3 {
                font-size: 1.4rem;
                letter-spacing: 0.1em;
                margin-bottom: 2rem;
                font-feature-settings: "palt";
              }
              .min p {
                font-size: 1.2rem;
                color: #7e7e7e;
                letter-spacing: 0.1em;
                font-feature-settings: "palt";
                line-height: 2;
              }
            }
          }
        }
      }
      .bki {
        content: "";
        display: block;
        width: 58rem;
        height: 100%;
        background-image: url(/images/sec1.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 2.3rem;
            line-height: 1.5;
            letter-spacing: 0.19em;
            margin-bottom: 4.5rem;
            text-align: center;
          }
          .txtWrap {
            &::after {
              left: 2.4rem;
            }
            .step {
              padding: 0.5rem;
              font-size: 1.2rem;
            }
            .txt {
              margin: 0 0 2.6rem 2rem;
              h2 {
                font-size: 1.5rem;
                letter-spacing: 0.15em;
                margin-bottom: 1.5rem;
                line-height: 1.8;
              }
              p {
                font-size: 1.2rem;
                line-height: 1.8;
                letter-spacing: 0.1em;
                br {
                  display: none;
                }
              }
              .min {
                margin-top: 2rem;
                h3 {
                  font-size: 1.2rem;
                  margin-bottom: 1rem;
                }
                p {
                  font-size: 1rem;
                }
              }
            }
          }
          .caution {
            font-size: 1.2rem;
            line-height: 2.4;
            margin-bottom: 6rem;
          }
        }
        .bki {
          content: "";
          width: 100%;
          height: 1.5rem;
          top: auto;
          bottom: 0;
          right: 0;
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    #pageGuide .outer .inr {
      max-width: 960px;
      margin: 0 auto;
    }
  }
}

#faq {
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        margin-bottom: 2.6rem;
        h1 {
          margin-bottom: 5rem;
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
        }
        .qa {
          background-color: #f8f8f8;
          overflow: hidden;
          margin-bottom: 4.8rem;
          .q1 {
            background-color: var(--maincolor);
            position: relative;
            dl dd {
              font-size: 1.6rem;
              font-weight: 700;
              color: #fff;
              font-size: 2rem;
            }
          }
          .a1 {
            dl dt {
              background-color: #2769b4;
            }
          }
          dl {
            display: flex;
            align-items: baseline;
            padding: 2rem 1.5rem;
            dt {
              font-family: var(--roboto);
              font-size: 2.1rem;
              color: #fff;
              background-color: #323232;
              border-radius: 50%;
              flex-shrink: 0;
              line-height: 3rem;
              width: 3rem;
              height: 3rem;
              text-align: center;
            }
            dd {
              margin-left: 1.2rem;
              font-size: 1.6rem;
              line-height: 1.8;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    text-align: center;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 0;
          h1 {
            font-size: 2.3rem;
            line-height: 1.5;
            letter-spacing: 0.19em;
            margin-bottom: 2rem;
          }
          .qa {
            margin-bottom: 2rem;
            dl {
              padding: 1.5rem;
              dt {
                font-size: 1.5rem;
                line-height: 2.2rem;
                width: 2.2rem;
                height: 2.2rem;
              }
              dd {
                margin-left: 1rem;
              }
            }
            .q1 dl dd {
              font-size: 1.4rem;
              text-align: left;
            }
            .a1 dl dd {
              font-size: 1.3rem;
              text-align: left;
            }
          }
        }
      }
    }
  }
}

#company {
  background: linear-gradient(
    90deg,
    #f8f8f8 0%,
    #f8f8f8 62.5%,
    var(--white) 62.5%,
    var(--white) 100%
  );
  .outer {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    .inr {
      position: relative;
      .txt_area {
        position: relative;
        z-index: 2;
        margin-bottom: 5rem;
        h1 {
          margin-bottom: 7.5rem;
          font-family: var(--roboto);
          font-size: 5rem;
          color: var(--maincolor);
          line-height: 1.5;
          letter-spacing: 0.03em;
        }
        p {
          line-height: 2.4;
          letter-spacing: 0.15em;
          font-size: 1.6rem;
          margin-bottom: 3rem;
        }
        .txtWrap {
          dl {
            display: flex;
            border-bottom: 1px solid var(--maincolor);
            dt {
              font-weight: 700;
              font-size: 1.6rem;
              padding: 1rem 1.2rem;
              border-bottom: 3px solid var(--maincolor);
              width: 12rem;
            }
            dd {
              padding: 1rem 1.2rem;
              font-size: 1.6rem;
              line-height: 1.8;
            }
          }
          &:nth-child(3) {
            dl {
              dd {
                font-family: var(--roboto);
                font-weight: 700;
              }
            }
          }
        }
      }
      .map iframe {
        filter: grayscale(1);
        transition: all 0.3s ease-in-out;
        &:hover {
          filter: grayscale(0);
        }
      }
    }
  }
  @media screen and (max-width: 743px) {
    padding: 5rem 2.5rem;
    .outer {
      padding: 0;
      .inr {
        position: relative;
        .txt_area {
          margin-bottom: 4.5rem;
          h1 {
            font-size: 2.3rem;
            line-height: 1.5;
            letter-spacing: 0.19em;
            margin-bottom: 2rem;
            text-align: center;
          }
          p {
            line-height: 1.8;
            font-size: 1.3rem;
            margin-bottom: 3rem;
          }
          .txtWrap {
            dl {
              display: block;
              dt {
                font-size: 1.3rem;
                padding: 1rem 0;
                border-bottom: 2px solid var(--maincolor);
                width: 11.2rem;
              }
              dd {
                padding: 1rem 0;
                font-size: 1.2rem;
                line-height: 1.8;
              }
            }
          }
        }
        .map iframe {
          height: 25rem;
          filter: none;
        }
      }
    }
  }
}