@charset "UTF-8";

/* =====================
  service トップ
===================== */
.service[data-type='index'] .main {
  .u-bg {
    padding-block: 130px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  & ul {
    display: grid;
    grid-auto-flow: column;
    gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;

    @media not all and (width >=768px) {
      grid-auto-flow: row;
      gap: calc((100 / 750) * 90 * 1vw);
    }

    & li {
      position: relative;
      display: grid;
      gap: 20px;
      margin-block-start: calc(50px * var(--index, 0));

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 35 * 1vw) calc((100 / 750) * 40 * 1vw);
        margin-block-start: 0;
      }

      & img {
        grid-area: 1 / 1 / 1 / 3;
        inline-size: 257px;
        aspect-ratio: 257 / 420;

        @media not all and (width >=768px) {
          inline-size: 100%;
          block-size: auto;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }
      }

      & hgroup {
        display: grid;
        grid-area: 2 / 1 / 2 / 1;
        gap: 20px;

        @media not all and (width >=768px) {
          inline-size: max-content;
        }

        & [lang='en'] {
          font-family: var(--title);
          font-size: 36px;
          font-weight: 600;
          line-height: 1;
          letter-spacing: 1.44px;
          -webkit-text-stroke-width: 0.77px;
          -webkit-text-stroke-color: white;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 60 * 1vw);
            letter-spacing: calc((100 / 750) * 1.44 * 1vw);
            -webkit-text-stroke-width: calc((100 / 750) * 0.77 * 1vw);
          }
        }

        & h2 {
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--yumin);
          font-size: 16px;
          font-weight: 600;
          color: #7b7b7b;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 28 * 1vw);
          }
        }
      }

      & .icon {
        display: grid;
        grid-area: 2 / 2 / 2 / 2;
        place-content: center;
        inline-size: 60px;
        aspect-ratio: 1 / 1;
        margin-inline: auto 0;
        background: white;
        border-radius: calc(infinity * 1px);

        @media not all and (width >=768px) {
          inline-size: calc((100 / 750) * 90 * 1vw);
          margin-inline-end: calc((100 / 750) * 20 * 1vw);
        }

        &::before {
          inline-size: 12px;
          aspect-ratio: 1 / 1;
          content: '';
          background-color: var(--black);
          mask-image: var(--icon-arrow);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
        }

        @media not all and (width >=768px) {
          &::before {
            inline-size: calc((100 / 750) * 24 * 1vw);
          }
        }
      }

      & a {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block;
        inline-size: 100%;
        block-size: 100%;
      }

      &:has(.prepare) {
        pointer-events: none;

        &::before {
          position: absolute;
          inset: 0;
          display: block;
          inline-size: 100%;
          block-size: 100%;
          content: '';
          background-color: rgb(0 0 0 / 60%);
        }

        .prepare {
          position: absolute;
          top: 40%;
          left: 50%;
          width: fit-content;
          padding-block: 10px;
          padding-inline: 10px;
          font-size: 15px;
          line-height: 1;
          background-color: rgb(0 0 0 / 60%);
          translate: -50% -50%;

          @media not all and (width >=768px) {
            padding-block: calc((100 / 750) * 20 * 1vw);
            padding-inline: calc((100 / 750) * 20 * 1vw);
            font-size: calc((100 / 750) * 26 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  new_model
===================== */
.service[data-type='new_model'] .main {
  .u-bg {
    padding-block: 130px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 100 * 1vw);
      padding-inline: calc((100 / 750) * 0 * 1vw);

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }

  /* ==== contents ==== */
  .contents {
    & hgroup {
      padding-block: 130px 60px;

      @media not all and (width >=768px) {
        padding-block: calc((100 / 750) * 160 * 1vw) calc((100 / 750) * 80 * 1vw);
      }
    }

    .unit[data-id='1'] {
      margin-block-end: 30px;
      font-family: var(--yumin);
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: 1.66;
      text-align: center;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 45 * 1vw);
        font-size: calc((100 / 750) * 37 * 1vw);
      }
    }

    .unit[data-id='2'] {
      text-align: center;
    }

    .u-service {
      margin-block: 60px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 40 * 1vw);
        margin-block: calc((100 / 750) * 90 * 1vw);

        & li {
          grid-row: span 4;
          gap: calc((100 / 750) * 35 * 1vw);

          &:not(:last-child) {
            &::after {
              display: block;
              inline-size: 100%;
              block-size: 1px;
              content: '';
              background: #c9c9c9;
              opacity: 0.4;
            }
          }
        }
      }

      @media print, screen and (width >=768px) {
        .img {
          block-size: 300px;
        }
      }

      .u-anchor {
        margin-block: 50px 0;
        margin-inline: auto;

        @media not all and (width >=768px) {
          margin-block: calc((100 / 750) * 10 * 1vw) 0;
        }
      }
    }
  }
}

/* =====================
  harley indian
===================== */
.service:where([data-type='new_model_harley'], [data-type='new_model_indian']) .main {
  /* ==== u-mv ==== */
  .u-mv {
    @media print, screen and (width >=768px) {
      block-size: 674px;
    }

    .wrap {
      @media print, screen and (width >=768px) {
        block-size: 650px;
      }

      .u-inner {
        @media print, screen and (width >=768px) {
          padding-block-start: 450px;
        }

        @media not all and (width >=768px) {
          padding-block-start: calc((100 / 750) * 310 * 1vw);
        }

        & [lang='en'] {
          color: white;
          -webkit-text-stroke-width: 0;

          @media not all and (width >=768px) {
            font-size: calc((100 / 750) * 60 * 1vw);
          }
        }
      }

      @media print, screen and (width >=768px) {
        &::before {
          inline-size: 499px;
        }
      }
    }
  }

  .u-bg {
    padding-block: 70px 0;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw) 0;
      padding-inline: calc((100 / 750) * 0 * 1vw);
    }
  }

  /* ==== news ==== */
  .news {
    padding-block-end: 130px;

    @media not all and (width >=768px) {
      padding-block-end: calc((100 / 750) * 160 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .u-news {
      margin-block-end: 30px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 45 * 1vw);
      }
    }

    .u-link {
      margin-inline: auto 0;

      @media not all and (width >=768px) {
        margin-inline: auto;
      }
    }
  }

  /* ==== recommend ==== */
  .recommend {
    padding-block: 130px;
    padding-inline: calc((100 / 750) * 40 * 1vw);
    background: var(--gray);

    @media not all and (width >=768px) {
      position: relative;
      z-index: 2;
      padding-block: calc((100 / 750) * 160 * 1vw);
    }

    & hgroup {
      margin-block-end: 60px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 90 * 1vw);
      }
    }

    .u-recommend {
      margin-block-end: 90px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 60 * 1vw) calc((100 / 750) * 50 * 1vw);
        margin-block-end: calc((100 / 750) * 120 * 1vw);
      }
    }

    .anchor {
      display: grid;
      grid-auto-flow: column;
      gap: 20px;
      align-items: center;
      justify-content: center;

      @media not all and (width >=768px) {
        grid-auto-flow: row;
        gap: calc((100 / 750) * 60 * 1vw);
      }
    }
  }
}

/* =====================
  rvo
===================== */
.service[data-type='rvo'] .main {
  .u-bg {
    padding-block: 130px 0;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw) 0;
      padding-inline: calc((100 / 750) * 0 * 1vw);

      .u-inner:not(:has(.u-nav)) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
    }
  }

  /* ==== contents ==== */
  .contents {
    & hgroup {
      padding-block: 130px 60px;

      & h1 {
        line-height: 1.6;
      }

      @media not all and (width >=768px) {
        padding-block: calc((100 / 750) * 160 * 1vw) calc((100 / 750) * 80 * 1vw);
      }
    }

    .unit[data-id='1'] {
      margin-block-end: 30px;
      font-family: var(--yumin);
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: 1.66;
      text-align: center;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 45 * 1vw);
        font-size: calc((100 / 750) * 37 * 1vw);
      }
    }

    .unit[data-id='2'] {
      text-align: center;

      @media not all and (width >=768px) {
        letter-spacing: -0.5px;
      }
    }
  }

  /* ==== wrap ==== */
  .wrap[data-type='about'] {
    padding-block: 130px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 80 * 1vw);
    }

    .u-inner {
      max-inline-size: 1300px;

      @media not all and (width >=768px) {
        padding-block-end: calc((100 / 750) * 30 * 1vw);
      }

      & ul {
        display: grid;
        gap: 90px;

        @media not all and (width >=768px) {
          gap: calc((100 / 750) * 80 * 1vw);
        }

        & li {
          display: grid;
          grid-template-columns: 540px 600px;
          grid-auto-flow: column;
          gap: 60px 70px;
          align-items: center;
          justify-content: flex-start;

          @media not all and (width >=768px) {
            display: block;

            & + li {
              margin-block-start: calc((100 / 750) * 40 * 1vw);
            }
          }

          .img {
            position: relative;
            grid-area: 1 / 1 / 3 / 1;
            block-size: 400px;

            @media not all and (width >=768px) {
              block-size: calc((100 / 750) * 400 * 1vw);
            }

            & img {
              inline-size: 100%;
              block-size: 100%;
              object-fit: cover;
              object-position: right top;
            }
          }

          & hgroup {
            display: grid;
            grid-area: 1 / 2 / 1 / 3;
            gap: 20px;
            align-self: flex-end;

            @media not all and (width >=768px) {
              gap: calc((100 / 750) * 20 * 1vw);
              justify-content: center;
              margin-block: calc((100 / 750) * 43 * 1vw) 4vw;
              text-align: center;
            }

            & [lang='en'] {
              font-family: var(--title);
              font-size: 34px;
              font-weight: 600;
              line-height: 1;
              letter-spacing: 2.04px;

              @media not all and (width >=768px) {
                font-size: calc((100 / 750) * 70 * 1vw);
                letter-spacing: calc((100 / 750) * 2.04 * 1vw);
              }
            }

            & h2 {
              display: grid;
              grid-auto-flow: column;
              gap: 16px;
              align-items: center;
              justify-content: flex-start;
              margin-block: calc((1em - 1lh) / 2);
              font-family: var(--yumin);
              font-size: 16px;
              font-weight: 600;
              line-height: 1.6;
              letter-spacing: 1.08px;

              @media not all and (width >=768px) {
                justify-content: center;
                font-size: calc((100 / 750) * 27 * 1vw);
                text-align: center;
                letter-spacing: calc((100 / 750) * 1.08 * 1vw);
              }

              &::before {
                inline-size: 30px;
                height: 1px;
                content: '';
                background-color: #504d4b;
              }

              @media not all and (width >=768px) {
                &::before {
                  display: none;
                }
              }
            }
          }

          & p {
            grid-area: 2 / 2 / 2 / 3;
            align-self: flex-start;
          }
        }

        & li:nth-child(2n) {
          grid-template-columns: 600px 540px;
          padding-inline-start: 90px;

          @media not all and (width >=768px) {
            padding-inline-start: 0;
          }

          & hgroup {
            grid-area: 1 / 1 / 2 / 1;
          }

          .img {
            grid-area: 1 / 2 / 3 / 3;
          }

          & p {
            grid-area: 2 / 1 / 3 / 1;
          }
        }
      }
    }
  }

  /* ==== price ==== */
  & article.price {
    padding-block: 130px;
    background: var(--gray);

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw);
    }

    .u-head {
      margin-bottom: 60px;

      @media not all and (width >=768px) {
        margin-bottom: calc((100 / 750) * 90 * 1vw);
      }
    }

    & h2 {
      display: grid;
      grid-auto-flow: column;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      margin-block-end: 8px;
      font-family: var(--yumin);
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 1.44px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 16 * 1vw);
        font-size: calc((100 / 750) * 40 * 1vw);
        letter-spacing: calc((100 / 750) * 1.44 * 1vw);
      }

      &::before {
        display: block;
        inline-size: 16px;
        aspect-ratio: 16 / 6;
        content: '';
        background-color: var(--orange);
      }

      @media not all and (width >=768px) {
        &::before {
          inline-size: calc((100 / 750) * 26 * 1vw);
        }
      }

      & small {
        font-size: 18px;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 24 * 1vw);
        }
      }
    }

    & article + article {
      margin-block-start: 50px;
    }

    /* ==== table ==== */
    & table {
      width: 100%;
      margin-block-end: 16px;
      margin-inline: auto;
      color: var(--black);
      table-layout: fixed;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 20 * 1vw);
      }

      & thead th {
        font-size: 16px;
        font-weight: bold;
        background: #eee;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 26 * 1vw);
        }
      }

      & tbody th {
        background: #d8d8d8;
      }

      & th {
        font-size: 16px;
        font-weight: bold;
        text-align: center;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 26 * 1vw);
        }
      }

      & td {
        background: white;
      }

      & :where(th, td) {
        padding-block: 10px;
        padding-inline: 20px;
        font-size: 15px;
        word-break: auto-phrase;
        text-wrap: balance;
        border: 1px solid #c3c4c7;

        @media not all and (width >=768px) {
          padding-block: 0.5em;
          padding-inline: 1em;
          font-size: calc((100 / 750) * 26 * 1vw);
          line-height: 1.6;
        }
      }
    }

    & article[data-url='rental819'] {
      & table th {
        inline-size: calc(100% / 6);

        @media not all and (width >= 768px) {
          inline-size: fit-content;
          white-space: break-spaces;
        }
      }

      & tbody td {
        text-align: right;
      }
    }

    & article[data-url='insurance'] {
      & table th {
        inline-size: 290px;
        text-align: left;

        @media not all and (width >=768px) {
          inline-size: 30%;
        }
      }
    }

    & article[data-url='option'] {
      & table th {
        inline-size: calc(100% / 3);
      }

      & tbody td {
        text-align: right;
      }
    }

    @media not all and (width >=768px) {
      & article {
        .u-scroll {
          position: relative;
          width: 100vw;
          padding-inline-start: calc((100 / 750) * 40 * 1vw);
          margin-inline: calc(50% - 50vw);
          overflow-x: scroll;
          white-space: nowrap;

          & table {
            inline-size: 100%;
            table-layout: auto;

            & th,
            & td {
              white-space: nowrap;
            }

            & thead tr th:first-child {
              position: sticky;
              top: 0;
              left: 0;
              z-index: 2;
            }

            & tbody tr th:first-child {
              position: sticky;
              top: 0;
              left: 0;
              z-index: 2;
            }
          }

          &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 4;
            inline-size: calc((100 / 750) * 254 * 1vw);
            block-size: calc((100 / 750) * 177 * 1vw);
            pointer-events: none;
            content: '';
            background-image: url('../img/common/scrollable.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            translate: -50% -50%;
            animation: scrollable 2500ms linear 0ms infinite normal forwards running;
          }

          &.touched {
            &::before {
              display: none;
            }
          }
        }
      }
    }

    & ul {
      font-size: 14px;

      @media not all and (width >=768px) {
        font-size: calc((100 / 750) * 24 * 1vw);
      }

      & li {
        padding-left: 1em;
        line-height: 2.2;
        text-indent: -1em;

        &::before {
          content: '・';
        }
      }
    }

    .u-anchor {
      margin-block: 60px 0;
      margin-inline: auto;

      @media not all and (width >=768px) {
        margin-block: calc((100 / 750) * 90 * 1vw) 0;
      }
    }

    .anchors {
      display: grid;
      grid-auto-flow: column;
      gap: 30px;
      align-items: flex-start;
      justify-content: center;
      margin-block-start: 3em;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 40 * 1vw);
      }

      .u-anchor {
        margin-block-start: 0;
        color: white;
        background: var(--orange);
        border-radius: 0;

        @media not all and (width >=768px) {
          line-height: 1.6;
          word-break: break-all;
        }

        @media (any-hover: hover) {
          &:hover {
            background: color-mix(in srgb, var(--orange) 70%, white);
          }
        }
      }
    }
  }
}

/* =====================
  rvo
===================== */
.service[data-type='ag'] .main {
  .u-bg {
    padding-block: 130px;

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }
}