@charset "UTF-8";

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

Works CSS

・事例紹介用CSS「.works-×××」

上記はここに記述する

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

.works-intro {
  padding-bottom:16.0rem;
  @media (width <= 767px) {
    padding-bottom:8.0rem;
  }
  .imgs {
    --loop-duration:50s;
    margin-top:16.0rem;
    @media (width <= 767px) {
      margin-top:4.0rem;
    }
    .item {
      padding-right:4.0rem;
      gap:4.0rem;
      @media (width <= 767px) {
        padding-right:1.6rem;
        gap:1.6rem;
      }
    }
  }
}


/* SelectorName
----------------------------------------------------------------------------- */
.works-contents {
  display:grid;
  gap:10.0rem;
  padding-block:16.0rem;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    gap:10.0rem;
    padding-block:8.0rem;
  }

  .i {
    display:grid;
    background-color:#fff;
    position:relative;

    @media (width > 767px) {
      grid-template-columns:10.0rem 1fr 48.0rem;
      grid-template-rows:auto 1fr auto;
      grid-template-areas:
        ". heading img"
        ". desc img"
        "button button ."
      ;
      &:not(:has(.i_img)) {
        grid-template-areas:
          ". heading heading"
          ". desc desc"
          "button button button"
        ;
        .i_desc {
          margin-right:6.0rem;
        }
      }
      &:is(:has(.i_img)) {
        .i_desc {
          margin-right:4.0rem;
        }
      }
      min-height:33.6rem;
    }
    @media (width <= 767px) {
      grid-template-columns:2.0rem 1fr 24.2rem 2.0rem;
      grid-template-rows:auto auto 1fr auto;
      grid-template-areas:
        ". . img img"
        ". heading heading ."
        ". desc desc ."
        "button button button button"
      ;
      &:not(:has(.i_img)) {
        margin-top:-4.0rem;
        padding-top:6.8rem;
        grid-template-areas:
          ". . . ."
          ". heading heading ."
          ". desc desc ."
          "button button button button"
        ;
      }
    }

    &::before {
      content:"";
      width:4px;
      height:7.0rem;
      background-image:linear-gradient(210deg,var(--cc-blue-A) -10%,var(--cc-green-D) 150%);
      position:absolute;
      top:0;
      left:0;
      @media (width <= 767px) {
        height:5.0rem;
      }
    }
  }
  .i_number {
    font-size:3.0rem;
    letter-spacing: .05em;
    line-height:1.1;
    position:absolute;
    top:3.8rem;
    left:3.5rem;
    color:var(--cc-blue-A);
    @media (width <= 767px) {
      font-size:2.0rem;
      top:3.0rem;
      left:2.0rem;
    }
  }
  .i_heading {
    grid-area:heading;
    font-size:3.6rem;
    line-height:1.6;
    @media (width > 767px) {
      margin-block:7.6rem 2.4rem;
    }
    @media (width <= 767px) {
      margin-bottom:.8rem;
      font-size:2.0rem;
    }
  }
  .i_desc {
    grid-area:desc;

    @media (width > 767px) {
      font-size:1.6rem;
      line-height:2.2;
    }
    @media (width <= 767px) {
    }
  }
  .works-modal_button {
    grid-area:button;
    @media (width <= 767px) {
      margin-top:2.4rem;
    }
  }
  .i_img {
    grid-area:img;
    @media (width <= 767px) {
      margin-block:-5.0rem 2.0rem;
    }
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.works-modal_button {
  display:flex;
  align-items: center;
  background-color:var(--cc-white-C);
  width:18.0rem;
  height:4.0rem;
  font-size:1.5rem;
  text-align:center;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    width:100%;
  }

  &.js-modal-close .icon::after {
    content:none;
  }

  .icon {
    flex-shrink: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:var(--cc-blue-A);
    width:auto;
    height:100%;
    aspect-ratio:1/1;
    position:relative;

    &::before,
    &::after {
      content:"";
      width:1.2rem;
      height:2px;
      background-color:#fff;
      position:absolute;
    }
    &::after {
      transform:rotate(90deg);
    }
  }
  :not(.icon) {
    flex:1;
  }
}

.works-modal {
  &[open] {
    display:flex;
    justify-content: center;
    align-items: flex-start;
    margin-block:env(safe-area-inset-top) env(safe-area-inset-bottom);
  }
  .i {
    display:grid;
    background-color:#fff;
    margin-block:auto;
    position:relative;

    @media (width > 767px) {
      grid-template-columns:10.0rem 1fr 10.0rem;
      grid-template-rows:auto 1fr auto;
      grid-template-areas:
        ". heading . "
        ". desc . "
        "button button button"
      ;
    }
    @media (width <= 767px) {
      margin-inline:2.0rem;
      grid-template-columns:2.0rem 1fr 2.0rem;
      grid-template-rows:auto auto 1fr auto;
      grid-template-areas:
      ". heading . "
      ". desc . "
      "button button button"
      ;
      padding-top:6.0rem;
    }

    &::before {
      content:"";
      width:4px;
      height:7.0rem;
      background-image:linear-gradient(210deg,var(--cc-blue-A) -10%,var(--cc-green-D) 150%);
      position:absolute;
      top:0;
      left:0;
      @media (width <= 767px) {
        height:5.0rem;
      }
    }
  }
  .i_number {
    font-size:3.0rem;
    letter-spacing: .05em;
    line-height:1.1;
    position:absolute;
    top:3.8rem;
    left:3.5rem;
    color:var(--cc-blue-A);
    @media (width <= 767px) {
      font-size:2.0rem;
      top:3.0rem;
      left:2.0rem;
    }
  }
  .i_heading {
    grid-area:heading;
    font-size:3.6rem;
    line-height:1.6;
    @media (width > 767px) {
      margin-block:7.6rem 2.4rem;
    }
    @media (width <= 767px) {
      margin-bottom:.8rem;
      font-size:2.0rem;
    }
  }
  .i_desc {
    grid-area:desc;

    @media (width > 767px) {
      font-size:1.6rem;
      line-height:2.2;
    }
    @media (width <= 767px) {
    }
  }
  .works-modal_button {
    grid-area:button;
    margin-top:8.0rem;
    @media (width <= 767px) {
      margin-top:2.4rem;
      position:sticky;
      bottom:0;
    }
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.works-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}