@charset "UTF-8";

/* =============================================================================

Top CSS

・トップページ用CSS「.top-×××」

上記はここに記述する

============================================================================= */

@import url(../libs/splide/splide-core.min.css) layer(libraries);
@import url(../libs/simplebar/simplebar.min.css) layer(libraries);


/* TOP KV
============================================================================= */
body {
  .top-kv .heading .sub,
  .top-kv .heading .main,
  .top-kv .js-infiniteloop,
  .g-header {
    transition-property: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: var(--ttf-eo-expo);
    opacity: 0;

    &.is-in {
      opacity: 1;
      transform: none;
    }
  }
  .top-kv .heading .sub,
  .top-kv .heading .main {
    transform: translateX(-10.0rem);
  }
  .g-header {
    transform: translateY(-10.0rem);
  }
  .top-kv .js-infiniteloop {
    transition-duration: 2.0s;
    &.is-reverse {
      transform: translateX(-40.0rem);
    }
    &:not(.is-reverse) {
      transform: translateX(40.0rem);
    }
  }
}

/* TOP KV
============================================================================= */
.top-kv {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow:hidden;

  @media (width > 767px) {
    padding-bottom: 1.2rem;
    min-height: 800px;
    height: 100dvh;
  }

  @media (width <= 767px) {
    height: 100svh;
    min-height: 112.6rem;
  }

  .heading {
    display: grid;
    gap: .8rem;
    margin-bottom: 7.2rem;

    @media (width <= 767px) {
      gap: 9.2rem;
      padding-left: 6.0rem;
      margin-block: auto;
      padding-top: 20.0rem;
    }

    .sub {
      font-size: 2.4rem;
      line-height: calc(51/24);

      @media (width <= 767px) {
        font-size: 3.2rem;
        line-height: calc(54/32);
      }
    }

    .main {
      font-size: 4.0rem;
      line-height: calc(51/40);
      font-weight: 700;

      @media (width <= 767px) {
        font-size: 5.3rem;
        line-height: calc(87/53);
      }
    }
  }

  .js-infiniteloop {
    flex-shrink: 0;
    font-size: 16.2rem;
    line-height: 1.3;
    --loop-duration: 60s;
    pointer-events: none;

    @media (width <= 767px) {
      font-size: 18.4rem;
    }

    &+.js-infiniteloop {
      margin-top: -.15lh;
    }

    .js-infiniteloop-item {
      >p {
        display: flex;
        align-items: baseline;

        >* {
          flex-shrink: 0;
          margin-right: 2.4rem;
        }

        span {
          color: var(--cc-blue-A);
          opacity: .1;
        }

        img {
          border-radius: 100px;
        }
      }
    }
  }
}

/* TOP NEWS
============================================================================= */
.top-news {
  padding-block: 10.0rem 7.2rem;
  overflow: hidden;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block: 8.0rem 12.0rem;
  }

  >.inner {
    @media (width > 767px) {
      display: grid;
      grid-template-columns: 19.0rem 1fr;
      column-gap: 10.0rem;
      padding-left: 12.0rem;
    }
  }

  .text {
    display: flex;

    @media (width > 767px) {
      flex-direction: column;
    }

    @media (width <= 767px) {
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 4.8rem;
    }

    .l-heading-A {
      @media (width > 767px) {}

      .en {
        @media (width > 767px) {
          font-size: 5.2rem;
        }

        @media (width <= 767px) {
          font-size: 7.6rem;
        }
      }
    }

    .l-button-A {
      width: 19.0rem;
      height: 5.0rem;

      @media (width > 767px) {
        margin-top: auto;
      }

      @media (width <= 767px) {
        margin-right: 0;
        width: 27.5rem;
        height: 7.0rem;
        font-size: 2.4rem;
      }

      &::after {
        right: 1.6rem;
      }
    }
  }

  .news_wrap {
    @media (width > 767px) {}
  }

  .news_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5.0rem;

    @media (width <= 767px) {
      display: flex;
      column-gap: 6.4rem;
    }
  }

  .l-news_item {
    @media (width <= 767px) {
      flex-shrink: 0;
      width: 39.4rem;
    }
  }

}


/* ABOUT
============================================================================= */
.top-about {
  padding-block: 10.0rem;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block: 15.0rem 10.0rem;
  }

  .l-heading-A {
    margin-bottom: 5.0rem;

    @media (width <= 767px) {
      margin-bottom: 8.0rem;
    }
  }

  .about-text {
    font-weight: 700;

    @media (width > 767px) {
      margin-left: auto;
      width: 86.4rem;
    }

    @media (width <= 767px) {}

    .text-catch {
      margin-bottom: 3.6rem;
      font-size: 4.0rem;
      line-height: calc(60/40);

      @media (width <= 767px) {
        margin-bottom: 5.2rem;
        font-size: 4.6rem;
        line-height: calc(66/46);
      }
    }

    .text-desc {
      @media (width > 767px) {
        font-size: 2.0rem;
        line-height: calc(36/20);
      }

      &+.text-desc {
        margin-top: 1lh;
      }
    }
  }

  .about-strength {
    margin-top: 11.0rem;
    background-color: rgb(from var(--cc-white-A) r g b / .8);

    @media (width > 767px) {
      padding: 7.6rem 9.2rem;
    }

    @media (width <= 767px) {
      margin-top: 8.0rem;
      padding-block: 8.8rem 10.0rem;
    }

    .strength-heading {
      margin-bottom: 4.8rem;
      text-align: center;
      font-weight: 700;
      font-size: 2.6rem;
      line-height: calc(45/26);

      @media (width > 767px) {}

      @media (width <= 767px) {
        font-size: 3.6rem;
        line-height: calc(58/36);
      }
    }

    .strength-list {
      display: grid;

      @media (width > 767px) {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 7.2rem;
      }

      @media (width <= 767px) {
        row-gap: 10.0rem;
      }
    }

    .strength_item {
      .item-heading {
        img {
          margin-inline: auto;
        }

        span {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-block: 3.2rem 2.0rem;
          border-radius: 100px;
          height: 5.0rem;
          background-color: #CCEDF7;
          font-size: 2.0rem;
          text-align: center;

          @media (width <= 767px) {
            margin-block: 4.8rem 2.8rem;
            height: 8.8rem;
            font-size: 3.6rem;
          }
        }
      }

      .item-desc {
        @media (width > 767px) {}
      }
    }
  }

  .js-infiniteloop {
    --loop-duration: 40s;
    margin-top: 5.2rem;

    @media (width <= 767px) {
      margin-top: 10.0rem;
    }
  }
  .js-infiniteloop-item {
    img {
      padding-right:8.0rem;
    }
  }
}


/* Business
============================================================================= */
.top-business {
  padding-top: 10.0rem;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-top: 14.0rem;
  }

  .l-heading-A {
    margin-bottom: 7.2rem;

    @media (width <= 767px) {
      margin-bottom: 5.0rem;
    }
  }

  .business-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    @media (width > 767px) {
      gap: 6.0rem;
    }

    @media (width <= 767px) {
      gap: 2.0rem;
    }

    .l-button-A {
      width: 100%;

      @media (width <= 767px) {
        padding-right: 2.0rem;

        &::after {
          right: 2.2rem;
        }
      }
    }
  }

  .business-section {
    padding-top: 8.0rem;

    @media (width <= 767px) {
      padding-top: 14.0rem;
    }

    .section_header {
      position: relative;
      padding-bottom: 3.2rem;

      &.-realestate {}

      &.-parking {}
    }

    .header_text {}

    .header_heading {
      margin-bottom: 3.6rem;
      font-size: 5.0rem;
      line-height: 1;
      font-weight: 700;

      @media (width <= 767px) {
        margin-bottom: 6.0rem;
        font-size: 6.0rem;
      }
    }

    .header_catch {
      margin-bottom: 2.0rem;
      font-size: 2.8rem;
      line-height: calc(42/28);
      font-weight: 700;
      color: var(--cc-blue-A);

      @media (width <= 767px) {
        margin-bottom: 6.4rem;
        font-size: 4.2rem;
        line-height: calc(61/42);
      }
    }

    .header_desc {
      @media (width <= 767px) {}

      &+.header_desc {
        margin-top: 1lh;
      }
    }

    .header_img {
      position: absolute;

      @media (width > 767px) {
        right: 2.0rem;
        bottom: 0;
      }

      @media (width <= 767px) {
        right: 4.0rem;
        top: 0;

        &.-realestate {
          top: 2.4rem;
        }

        &.-parking {
          top: -3.2rem;
        }
      }
    }
  }

  .realestate-service {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8.0rem;
    position: relative;

    .service-heading {
      display: grid;
      text-align: center;
      margin-top: -27.0rem;
      gap: .8rem;
      position: absolute;
      line-height: 1;

      @media (width <= 767px) {
        margin-top: -20.0rem;
      }

      .en {
        font-size: 4.2rem;
        letter-spacing: .05em;
        color: var(--cc-blue-A);

        @media (width <= 767px) {
          font-size: 3.4rem;
        }
      }

      .ja {
        font-size: 2.5rem;
        font-weight: 700;

        @media (width <= 767px) {
          font-size: 2.4rem;
          line-height: calc(30/24);
        }
      }
    }

    .sabi_link {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -33.5rem;
      margin-left: -53.1rem;
      padding-bottom: .1em;
      border-radius: 100px;
      width: 13.4rem;
      height: 3.0rem;
      color: var(--cc-blue-A);
      background-color: #fff;
      position: absolute;

      @media (width <= 767px) {
        margin-top: -25.8rem;
        margin-left: -34rem;
        width: 11.8rem;
        height: 3.2rem;
        font-size: 1.9rem;
      }

      &::after {
        margin-inline: auto;
        background-color: #fff;
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 1.4rem);

        @media (width <= 767px) {
          width: 2.0rem;
          top: calc(100% + 1.2rem);
        }
      }
    }
  }
  .parking-service {
    display:grid;
    padding-top:8.8rem;
    @media (width > 767px) {
      grid-template-columns: repeat(4, 1fr);
      gap: 5.0rem 4.0rem;
    }
    @media (width <= 767px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 7.2rem 3.2rem;
    }
    .service_item {
      display:flex;
      flex-direction:column;
      &:nth-child(odd) {
        .service_heading {
          background-color:#dcf0f1;
        }
      }
      &:nth-child(even) {
        .service_heading {
          background-color:#ccedf7;
        }
      }
    }
    .service_heading {
      display:flex;
      align-items: center;
      margin-bottom:1.6rem;
      border-radius:var(--radius-C);
      font-size:1.8rem;
      line-height:calc(27/18);
      font-weight:700;
      position:relative;

      @media (width > 767px) {
        gap:2.0rem;
        padding-left:1.6rem;
        height:8.8rem;
      }
      @media (width <= 767px) {
        justify-content: center;
        flex-direction: column;
        gap:.4rem;
        margin-bottom:.8rem;
        padding-block:2.0rem;
        font-size: 3.2rem;
        text-align: center;
        line-height:calc(40/32);
        margin-bottom: 2.4rem;

        &.-sp_r2 {
          min-height:20.0rem;
        }
      }

      .link {
        display:flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        padding-bottom:1.2rem;
        width:8.2rem;
        height:auto;
        aspect-ratio: 1/1;
        font-size:1.6rem;
        background-color:var(--cc-blue-A);
        color:#fff;
        position:absolute;
        top:-4.4rem;
        right:-2.8rem;
        @media (width <= 767px) {
          width:9.8rem;
          font-size:2.3rem;
        }

        &::after {
          position:absolute;
          background-color:#fff;
          bottom:1.6rem;
          @media (width <= 767px) {
            width:2.8rem;
          }
        }
      }
    }
    .service_desc {
      flex-shrink: 0;
      line-height:calc(28/16);
      @media (width <= 767px) {
        line-height:calc(38/24);
      }
    }
  }

  .sublease-heading {
    margin-bottom:3.2rem;
    font-size:2.8rem;
    line-height:1.35;
    font-weight:700;
    color:var(--cc-blue-A);
    text-align: center;
    @media (width <= 767px) {
      font-size: 3.2rem;
    }
  }
  .sublease_contents {
    display:grid;
    @media (width > 767px) {
      grid-template-columns: 1fr 1fr;
      gap:2.0rem;
    }
    @media (width <= 767px) {
      gap:3.2rem;
    }
  }
  .sublease_contents-item {

    > .inner {
      border-radius:1.2rem;
      padding-block:4.8rem;
      background-color:#fff;
      text-align: center;
      @media (width <= 767px) {
        padding-block:5.6rem;
      }
    }

    .heading {
      margin-bottom:2.0rem;
      font-size:2.4rem;
      font-weight:700;
      line-height:calc(31/24);
      color:var(--cc-blue-A);
      @media (width <= 767px) {
        margin-bottom:2.8rem;
        font-size:2.8rem;
      }
    }
    .desc {
      margin-bottom:4.0rem;
      font-size:1.8rem;
      font-weight:700;
      line-height:calc(28/18);
      @media (width <= 767px) {
        font-size:2.2rem;
      }
    }
    .img {
      display:flex;
      justify-content:center;
    }
    .note {
      margin-top:1.6rem;
      font-size:1.55rem;
      line-height:1.8;
      @media (width <= 767px) {
        font-size: 2.0rem;
      }
    }
  }

  .business-example {
    padding-block: 10.0rem;
    overflow: hidden;

    @media (width <= 767px) {
      padding-block: 12.4rem;
    }

    .example-heading {
      margin-bottom: 4.0rem;
      font-weight: 700;
      font-size: 3.0rem;
      line-height: 1;
      text-align: center;
      margin-bottom: 4.8rem;

      @media (width <= 767px) {
        font-size: 3.8rem;
        margin-bottom: 4.8rem;
      }
    }

    .js-sp_carousel {
      overflow: visible;

      .splide__track {
        overflow: visible;
      }

      .splide__list {
        @media (width > 767px) {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.2rem 4.5rem;
        }
      }

      .splide__slide {
        .img {
          --r: .8rem;
          position: relative;

          img {
            border-radius: var(--r);
          }

          .type {
            padding-inline: 1.5rem;
            border-radius: 0 var(--r) 0 var(--r);
            font-size: 1.3rem;
            position: absolute;
            left: 0;
            bottom: 0;

            @media (width <= 767px) {
              padding-inline: 2.0rem;
              font-size: 2.6rem;
            }
          }
        }

        .name {
          margin-top: .8rem;
          margin-left: .4rem;
          @media (width > 767px) {
            line-height:calc(26/16);
            min-height:2lh;
          }
          @media (width <= 767px) {
            margin-top: .8rem;
            font-size: 2.8rem;
          }
        }
      }

      .splide__arrows {
        @media (width > 767px) {
          display: none;
        }
      }

      .js-splide_arrow-A {
        position: absolute;
        top: 13.0rem;
        z-index: 1;
        &.is-prev {
          left: -2.0rem;
        }
        &.is-next {
          right: -2.0rem;
        }
      }
    }
  }
  .business-bottom_heading {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:2.4rem;
    border-radius:100px;
    height:6.0rem;
    color:#fff;
    text-align: center;
    background-color:var(--cc-blue-C);
    font-size:2.8rem;
    line-height:calc(42/28);
    font-weight:700;
    @media (width <= 767px) {
      margin-bottom:3.2rem;
      height:7.0rem;
    }
  }

  .realestate-solpro {
    padding-block:10.0rem 14.0rem;

    @media (width > 767px) {}

    @media (width <= 767px) {
      padding-block: 12.0rem 16.0rem;
    }

    .solpro_logo {
      display:flex;
      justify-content: center;
      margin-bottom:2.8rem;
      mix-blend-mode:darken;
      @media (width <= 767px) {
        margin-bottom:4.0rem;
      }
    }
    .solpro_catch {
      margin-bottom:1.6rem;
      text-align: center;
      font-size:3.4rem;
      line-height:calc(49/34);
      font-weight:700;

      @media (width <= 767px) {
        margin-bottom:3.6rem;
        font-size:3.6rem;
        line-height:calc(58/36);
      }
    }
    .solpro_desc {
      text-align: center;
      @media (width > 767px) {
      }
      @media (width <= 767px) {
      }
    }
    .solpro-features {
      display:grid;
      margin-top:4.8rem;

      @media (width > 767px) {
        grid-template-columns: repeat(4, 1fr);
        gap:4.0rem;
      }
      @media (width <= 767px) {
        grid-template-columns: repeat(2, 1fr);
        gap:1.6rem;
      }

      .feature_item {
        display:flex;
        flex-direction: column;
        align-items: center;
        padding-block:2.4rem;
        border-radius:2.0rem;
        background-color:#fff;
        text-align: center;
        @media (width <= 767px) {
          padding-block:3.6rem;
        }

        .feature_heading {
          display:flex;
          flex-direction: column;
          align-items: center;
          margin-bottom:1.2rem;
          font-size:1.8rem;
          line-height:1;
          font-weight:700;
          @media (width > 767px) {
            gap:2.0rem;
          }
          @media (width <= 767px) {
            font-size:3.2rem;
            gap:2.4rem;
            margin-bottom:1.6rem;
          }
        }

        .feature_desc {
          @media (width > 767px) {
            line-height:calc(26/16);
          }
          @media (width <= 767px) {
            font-size:2.8rem;
            line-height:calc(42/28);
          }
        }
      }
    }
    .solpro-step {
      margin-top:6.0rem;
      @media (width <= 767px) {
        margin-top:8.0rem;
      }
      @media (width <= 767px) {
        margin-bottom:3.2rem;
      }

      .step_heading {
        display:flex;
        font-weight:700;
        margin-bottom:3.2rem;
        @media (width > 767px) {
          margin-inline:auto;
          width:fit-content;
          align-items: center;
        }
        @media (width <= 767px) {
          justify-content: center;
          margin-bottom:4.0rem;
        }
        .tag {
          display:flex;
          justify-content: center;
          align-items: center;
          margin-right:1.2rem;
          border-radius:50%;
          width:7.5rem;
          height:7.5rem;
          background-color:var(--cc-blue-C);
          color:#fff;
          font-size:2.6rem;
          letter-spacing: .1em;
          text-align: center;

          @media (width <= 767px) {
            grid-row:1/2;
            margin-right:1.2rem;
            width:12.8rem;
            height:12.8rem;
            font-size:4.4rem;
          }
        }
        .text {
          display:flex;
          align-items: baseline;
          font-size:2.7rem;
          @media (width <= 767px) {
            flex-direction:column;
            justify-content: center;
            font-size:3.2rem;
          }

          .number {
            color:var(--cc-blue-C);
            font-size:3.2rem;
            line-height:1;
            letter-spacing: -.1em;
            @media (width <= 767px) {
              font-size:4.6rem;
            }
            .n {
              margin-right:.1em;
              font-size:5.5rem;
              @media (width <= 767px) {
                margin-left:.15em;
                font-size:8.0rem;
              }
            }
          }
        }
      }

      .step_list {
        display:grid;
        gap:1.6rem;

        @media (width > 767px) {
        }
        @media (width <= 767px) {
          gap:2.0rem;
        }
      }

      .step-item {
        border:1px solid var(--cc-blue-C);
        background-color:#fff;
        @media (width > 767px) {
          display:grid;
          align-items: center;
          grid-template-columns: 36.4rem 1fr;
          border-radius:100px;
          height:9.0rem;
          padding-left:4.8rem;
        }
        @media (width <= 767px) {
          border-radius:1.2rem;
          padding:3.6rem 4.0rem;
        }

        .heading {
          display:flex;
          align-items: center;
          line-height:1;
          @media (width <= 767px) {
            margin-bottom:3.2rem;
          }
          .number {
            display:flex;
            align-items: center;
            color:var(--cc-blue-C);
            font-size:2.8rem;
            @media (width <= 767px) {
              font-size:3.8rem;
            }
            .n {
              margin-top:-.15em;
              font-size:3.7rem;
              margin-left:.15em;
              @media (width <= 767px) {
                font-size:5.4rem;
              }
            }
          }
          .ja {
            margin-left:2.4rem;
            padding-left:1.6rem;
            border-left:1px solid;
            font-size:2.0rem;
            font-weight: 700;
            @media (width <= 767px) {
              padding-left:2.0rem;
              font-size:3.2rem;
            }
          }
        }
        .desc {
          @media (width > 767px) {
            font-size:1.8rem;
            line-height:calc(27/18);
          }
        }
      }
    }
    .solpro-example {
      padding-top:8.0rem;
      .example_heading {
        margin-bottom:3.2rem;
        font-weight:700;
        font-size:2.8rem;
        line-height:1;
        letter-spacing: .05em;
        text-align: center;
        @media (width <= 767px) {
          margin-bottom:4.0rem;
          font-size:3.8rem;
        }
      }
      .example_wrap {
        display:grid;
        @media (width > 767px) {
          grid-template-columns: repeat(5,1fr);
          gap:1.2rem;
        }
        @media (width <= 767px) {
          gap:4.0rem;
        }
      }
      .example-list {
        @media (width > 767px) {
          padding:2.0rem 1.0rem 1.5rem;
          border-radius:2.0rem;
          background-color:#fff;
        }
        @media (width <= 767px) {
          position:relative;
        }
        .heading {
          font-weight:700;
          @media (width > 767px) {
            display:flex;
            justify-content: center;
            align-items: center;
            margin-bottom:.8rem;
            min-height:2lh;
            font-size:1.8rem;
            line-height:calc(23/18);
            text-align: center;
          }
          @media (width <= 767px) {
            font-size:2.8rem;
            line-height:1;
            position:absolute;
            top:4.5rem;
            left:4.5rem;
            z-index: 5;
          }
        }
        .splide__track {
          @media (width <= 767px) {
            overflow:visible;
          }
        }
        .splide__list {
          @media (width > 767px) {
            display: grid;
            gap:2.4rem;
          }
          @media (width <= 767px) {
            border-radius:2.0rem;
            background-color:#fff;
          }
        }
        .splide__slide {
          position:relative;
          @media (width <= 767px) {
            box-sizing: content-box;
            padding:10.8rem 4.5rem 4.5rem;
            width:32.4rem;
            &:last-child {
              margin-right:0 !important;
            }
          }
          &:not(:first-child) {
            &::before {
              content:"";
              width:1.5rem;
              height:1.5rem;
              border-radius:.3rem;
              background-color:#83ccd2;
              transform:rotate(45deg);
              position:absolute;

              @media (width > 767px) {
                margin-inline:auto;
                inset-inline:0;
                top:calc(-.75rem - 1.7rem);
                clip-path:polygon(100% 0, 100% 100%, 0 100%);
              }
              @media (width <= 767px) {
                margin-block:auto;
                inset-block:0 -6.3rem;
                left:.3rem;
                width:2.6rem;
                height:2.6rem;
                clip-path:polygon(0 0, 100% 0, 100% 100%);
              }
            }
          }

          .caption {
            padding:.4rem 1.0rem;
            font-size:1.0rem;
            line-height:1.6;
            background-color:#fff;
            position:absolute;
            left:0;
            bottom:0;
            @media (width <= 767px) {
              padding:.6rem 1.6rem;
              font-size:2.0rem;
              left:4.45rem;
              bottom:4.45rem;
            }
          }
        }
        .splide__arrows {
          @media (width > 767px) {
            display: none;
          }
        }

        .js-splide_arrow-A {
          position: absolute;
          top: 18.8rem;
          z-index: 10;
          &.is-prev {
            left: -2.0rem;
          }
          &.is-next {
            left: calc(100vw - 5.0rem - 6.8rem);
          }
        }
      }
      .example-link {
        margin-top:4.8rem;
        @media (width <= 767px) {
          margin-top:9.6rem;
        }
        .heading {
          margin-bottom:2.0rem;
          font-size:2.0rem;
          line-height:1;
          text-align: center;
          @media (width <= 767px) {
            margin-bottom:2.4rem;
            font-size:3.2rem;
          }
        }
      }
    }
  }
  .parking-ap {
    padding-block:10.0rem 16.0rem;
    @media (width > 767px) {}
    @media (width <= 767px) {
      padding-block: 13.0rem;
    }
    .business-bottom_heading {
      margin-bottom:3.6rem;
    }
    .ap_catch {
      display:flex;
      align-items: center;
      justify-content: center;
      gap:4.0rem;
      margin-bottom:3.6rem;
      @media (width <= 767px) {
        margin-bottom:5.0rem;
      }
      &::after {
        transform:scaleX(-1);
      }
      .text {
        display:flex;
        flex-direction: column;
        align-items: center;
        gap:1.6rem;
        font-weight:700;
        text-align: center;
        .m {
          font-size:4.8rem;
          line-height:calc(52/48);
          letter-spacing: .12em;
          @media (width <= 767px) {
            font-size:5.4rem;
            line-height:calc(54/59);
          }
        }
        .s {
          font-size:2.8rem;
          line-height:calc(36/36);
          letter-spacing: .05em;
          @media (width <= 767px) {
            font-size:3.2rem;
            line-height:calc(40/32);
          }
        }
      }
    }
    .ap_img {
      display:flex;
      justify-content: center;
      margin-bottom:2.4rem;
      @media (width <= 767px) {
        margin-bottom:3.6rem;
      }
    }
    .ap_desc {
      font-size:1.8rem;
      line-height:calc(31/18);
      text-align: center;
      color:var(--cc-blue-C);
      @media (width > 767px) {
        font-weight: 700;
      }
      @media (width <= 767px) {
        font-size:3.2rem;
        line-height:calc(50/32);
      }
    }
    .ap-free {
      margin-top:4.8rem;
      @media (width <= 767px) {
        margin-top:10.0rem;
      }
      .heading {
        margin-bottom:2.4rem;
        font-weight:700;
        font-size:2.2rem;
        line-height:1;
        letter-spacing: .05em;
        text-align: center;
        @media (width <= 767px) {
          margin-bottom:3.2rem;
          font-size:3.8rem;
        }
      }
      .list {
        display:grid;
        @media (width > 767px) {
          grid-template-columns: repeat(3, 22.8rem);
          justify-content: center;
          gap:2.0rem;
        }
        @media (width <= 767px) {
          grid-template-columns: repeat(3, 1fr);
          gap:1.0rem;
        }
      }
      .list-item {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:.4rem;
        border-radius:2.0rem;
        background-color:#fff;
        text-align: center;
        font-weight:700;
        font-size:1.8rem;
        line-height:calc(25/18);
        @media (width > 767px) {
          height:auto;
          aspect-ratio: 1/1;
        }
        @media (width <= 767px) {
          gap:.8rem;
          height:26.5rem;
          font-size:2.4rem;
          line-height:calc(33/24);
        }
      }
    }
    .ap-consult {
      margin-top:4.8rem;
      padding: 6.0rem 8.0rem;
      background-color:#daf0f1;
      @media (width <= 767px) {
        padding: 6.0rem 4.0rem 8.0rem;
      }
      .heading {
        margin-bottom:2.4rem;
        font-weight:700;
        font-size:2.2rem;
        line-height:1;
        letter-spacing: .05em;
        text-align: center;
        @media (width <= 767px) {
          margin-bottom:3.2rem;
          line-height:calc(46/32);
          font-size:3.8rem;
        }
      }
      .list {
        display:grid;
        @media (width > 767px) {
          grid-template-columns: repeat(2,1fr);
          gap:1.8rem 3.0rem;
        }
        @media (width <= 767px) {
          gap:1.2rem;
        }
      }
      .list-item {
        display:flex;
        align-items: center;
        gap:1.2rem;
        padding-left:1.6rem;
        min-height:6.4rem;
        background-color:#fff;
        font-size:1.9rem;
        line-height:calc(27/19);
        letter-spacing: .05em;
        @media (width <= 767px) {
          gap:1.6rem;
          min-height:8.2rem;
          font-size:2.8rem;
          line-height:calc(34/28);
        }

        &::before {
          flex-shrink: 0;
          background-color:var(--cc-blue-C);
        }
      }
      .l-button-A {
        margin-top:3.2rem;
        @media (width <= 767px) {
          margin-top:4.0rem;
        }
      }
    }
    .ap-aside {
      display:grid;
      margin-top:6.0rem;
      gap:4.8rem;
      @media (width > 767px) {
        grid-template-columns:repeat(2,1fr);
      }
      @media (width <= 767px) {
        margin-top:12.0rem;
      }

      .item {
        border:1px solid var(--cc-blue-C);
        background-color:#fff;
        @media (width > 767px) {
          height:44.0rem;
          padding-top:6.8rem;
          padding-inline:4.0rem;
        }
        @media (width <= 767px) {
          padding-block:7.2rem 6.0rem;
        }

        .l-button-A {
          --my-bg:#4dbbaa;
          margin-top:2.8rem;
          @media (width <= 767px) {
            width:calc(100% - 10.0rem);
            font-size:3.0rem;
          }
          @media (hover:hover) {
            &:hover {
              --my-color:#4dbbaa;
              --my-bg:#fff;
            }
          }
        }
      }
      .item_heading {
        display:flex;
        justify-content: center;
        margin-bottom:4.4rem;
        @media (width > 767px) {
          align-items: center;
          min-height:7.8rem;
        }
        @media (width <= 767px) {
          margin-bottom:3.3rem;
        }
      }
      .item_desc {
        text-align: center;
        @media (width > 767px) {
          font-size:1.8rem;
          line-height:calc(34/18);
        }
        @media (width <= 767px) {
          font-size:3.2rem;
          line-height:calc(50/32);
        }
      }
    }
  }
}

/* COMPANY
============================================================================= */
.top-company {
  padding-block: 12.0rem 10.0rem;

  @media (width > 767px) {}
  @media (width <= 767px) {
    padding-block: 18.0rem 14.0rem;
  }

  .l-heading-A {
    margin-bottom: 5.0rem;

    @media (width <= 767px) {
      margin-bottom: 6.0rem;
    }
  }

  .company-contents {
    display: grid;
    gap: 4.0rem;

    @media (width <= 767px) {
      gap: 10.0rem;
    }
  }

  .contents-item {
    padding-block: 7.2rem;
    background-color: rgb(from var(--cc-white-A) r g b / .8);

    @media (width > 767px) {
      padding-inline: 11.6rem;
    }

    @media (width <= 767px) {}

    .item-heading {
      display: flex;
      align-items: baseline;
      gap: 2.4rem;
      margin-bottom: 2.8rem;
      line-height: 1;
      color:var(--cc-blue-A);

      @media (width <= 767px) {
        flex-wrap:wrap;
        margin-bottom: 4.8rem;
      }

      .ja {
        font-weight: 700;
        font-size: 2.4rem;
        letter-spacing: .05em;

        @media (width <= 767px) {
          font-size: 3.2rem;
        }
      }

      .en {
        font-size: 2.4rem;

        @media (width <= 767px) {
          font-size: 2.8rem;
        }
      }
    }

    .item-catch {
      margin-bottom: 2.4rem;
      font-weight: 700;
      font-size: 2.8rem;
      line-height: calc(41/28);

      @media (width <= 767px) {
        margin-bottom: 3.0rem;
        font-size: 3.8rem;
        line-height: calc(54/38);
      }
    }

    .item-desc {
      @media (width > 767px) {
        font-size: 1.8rem;
      }
    }

    .item-values {
      display: grid;
      gap: 3.2rem;

      @media (width <= 767px) {
        gap: 10.0rem;
        margin-top: 10.0rem;
      }
    }

    .value_item {}

    .value-title {
      display: flex;
      margin-bottom: 1.6rem;
      line-height: 1;

      @media (width > 767px) {
        align-items: baseline;
        column-gap: 1.6rem;
      }

      @media (width <= 767px) {
        flex-direction: column;
        row-gap: 3.0rem;
        margin-bottom: 4.0rem;
      }

      .en {
        display: flex;
        align-items: baseline;
        column-gap: 2.0rem;
        color: var(--cc-blue-A);

        @media (width <= 767px) {
          column-gap: 3.0rem;
        }

        .number {
          font-size: 3.7rem;

          @media (width <= 767px) {
            font-size: 6.8rem;
          }
        }

        .title {
          font-size: 3.4rem;

          @media (width <= 767px) {
            font-size: 6.0rem;
          }
        }
      }

      .ja {
        font-weight: 700;
        font-size: 1.8rem;
        padding-left: 2.2rem;
        position: relative;

        @media (width <= 767px) {
          margin-left: 1.0rem;
          font-size: 3.8rem;
          padding-left: 4.8rem;
        }

        &::before {
          content: "";
          height: .9em;
          border-left: 2px solid;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }

    .value-desc {
      @media (width > 767px) {
        font-size: 1.8rem;
        line-height: calc(27/18);
      }
    }
  }

}


/* PROFILE
============================================================================= */
.top-profile {
  padding-block: 12.0rem 18.0rem;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block: 14.0rem 20.0rem;
  }

  .l-heading-A {
    margin-bottom: 4.0rem;
  }

  .profile-table {
    display: grid;
    line-height: calc(30/16);

    @media (width > 767px) {
      grid-template-columns: 30.0rem 1fr;
      column-gap: 2.6rem;
    }

    @media (width <= 767px) {
      font-size: 2.4rem;
      line-height: calc(46/24);
    }

    >div {
      @media (width > 767px) {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: subgrid;
      }

      @media (width <= 767px) {
        padding-block: 2.8rem;
        border-bottom: 1px solid var(--cc-blue-A);
      }

      > :is(dt, dd) {
        @media (width > 767px) {
          padding-block: 1.6rem;
        }
      }

      >dt {
        color: var(--cc-blue-A);
        font-weight: 700;

        @media (width > 767px) {
          grid-column: 1/2;
          border-bottom: 1px solid var(--cc-blue-A);
        }

        @media (width <= 767px) {}
      }

      >dd {
        @media (width > 767px) {
          grid-column: 2/3;
          border-bottom: 1px solid #E1E1E1;
          padding-left: .8rem;
        }

        @media (width <= 767px) {}

        a {
          color: var(--cc-blue-A);
          text-decoration: underline;

          @media (hover:hover) {
            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

/* ACCESS
============================================================================= */
.top-access {
  padding-block: 12.0rem 18.0rem;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block: 14.0rem 20.0rem;
  }

  .l-heading-A {
    margin-bottom: 4.0rem;

    @media (width <= 767px) {
      margin-bottom: 10.0rem;
    }
  }

  .access-contents {
    display: grid;
    gap: 5.0rem;
    line-height: calc(26/16);

    @media (width > 767px) {}

    @media (width <= 767px) {
      gap: 13.0rem;
      line-height: calc(46/24);
    }
  }

  .contents-item {
    display: grid;

    @media (width > 767px) {
      grid-template-columns: auto auto;
      grid-template-rows: auto 44.5rem;
      align-items: flex-end;
      grid-auto-flow: column;
      justify-content: space-between;
      row-gap: 2.0rem;
    }

    @media (width <= 767px) {}

    .text {
      @media (width <= 767px) {
        margin-bottom: 3.6rem;
      }
    }

    .text-place {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: .8rem;
      border-radius: 100px;
      padding: .2rem 2.6rem;
      width: fit-content;
      text-align: center;

      @media (width <= 767px) {
        margin-bottom: 2.4rem;
        padding: .4rem 0;
        min-width: 21.6rem;
      }
    }

    .map {
      @media (width > 767px) {
        grid-row: 2/3;
        grid-column: 1/-1;
        height: 100%;
      }

      @media (width <= 767px) {
        margin-bottom: 3.6rem;
        height: 35.0rem;
      }

      iframe {
        width: 100%;
        height: 100%;
      }
    }

    .l-button-A {
      @media (width > 767px) {
        width: 38.0rem;
        height: 6.0rem;
      }

    }
  }
}

/* HISTORY
============================================================================= */
.top-history {
  padding-block: 12.0rem 17.0rem;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block: 14.0rem 16.0rem;
  }

  .l-heading-A {
    margin-bottom: 4.0rem;
  }

  .history-table {
    display: grid;
    font-weight: 700;
    line-height: calc(26/16);

    @media (width > 767px) {
      grid-template-columns: 28.5rem 1fr;
    }

    @media (width <= 767px) {
      line-height: calc(46/24);
    }

    >div {
      border-bottom: 1px solid #E1E1E1;

      @media (width > 767px) {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: subgrid;
        padding-block: 1.4rem;
      }

      @media (width <= 767px) {
        padding-block: 2.4rem;
      }

      >dt {
        color: var(--cc-blue-A);

        @media (width > 767px) {
          grid-column: 1/2;
        }

        @media (width <= 767px) {}
      }

      >dd {
        @media (width > 767px) {
          grid-column: 2/3;
        }

        @media (width <= 767px) {}
      }
    }
  }
}



/* CSR
============================================================================= */
.top-csr {
  padding-block: 11.2rem 10.0rem;
  position: relative;

  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-bottom: 16.0rem;
  }

  .l-heading-A {
    @media (width <= 767px) {
      margin-bottom: 7.2rem;
    }
  }

  .csr-desc {
    margin-bottom: 5.2rem;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: calc(45/28);
    text-align: center;

    @media (width <= 767px) {
      margin-bottom: 4.0rem;
      font-size: 3.8rem;
      line-height: calc(54/38);
    }
  }

  .athtag {
    padding-block: 6.0rem;

    @media (width <= 767px) {
      padding-block: 7.2rem;
    }
  }

  .athtag-img {
    display: flex;
    justify-content: center;
    margin-bottom: 2.0rem;

    @media (width <= 767px) {
      margin-bottom: 4.4rem;
    }
  }

  .athtag-heading {
    margin-bottom: 2.4rem;
    font-weight: 700;
    font-size: 3.3rem;
    line-height: calc(45/33);
    text-align: center;

    @media (width <= 767px) {
      margin-bottom: 3.6rem;
      font-size: 3.8rem;
      line-height: calc(54/38);
    }
  }

  .athtag-desc {
    @media (width > 767px) {}

    @media (width <= 767px) {}

    &+.athtag-desc {
      margin-top: 1lh;
    }
  }

  .csr-link {
    margin-top: 6.0rem;

    @media (width <= 767px) {
      margin-top: 4.8rem;
    }
  }
}


/* RECRUIT
============================================================================= */
.top-recruit {
  padding-block: 14.0rem;
  position: relative;
  z-index: 0;

  @media (width > 767px) {
    background-color: var(--cc-white-A);
  }

  @media (width <= 767px) {
    padding-top: 8.5rem;
    background-color: var(--cc-gray-B);
  }

  .l-heading-A {
    margin-bottom: 16.0rem;

    @media (width <= 767px) {
      margin-bottom: 32.0rem;
    }
  }

  .bg {
    z-index: -1;

    img {
      object-position: center top;
    }
  }
}


/* Sample
============================================================================= */
.top-selectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}