@charset "UTF-8";

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

各事業紹介用 CSS

・事業内容用CSS「.service-×××」
対象
/signdisplay/
/print/
/silkscreen/
/indigodyeing/
/design/
/webdesign/
/architecture/

上記はここに記述する

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

/* プリミティブカラー振り分け
$service_categoryで振り分け（ディレクトリ名を入れてください）
----------------------------------------------------------------------------- */
body.service_signdisplay {
  --primitive-color: var(--cc-shinshu-A);
}
body.service_print {
  --primitive-color: var(--cc-green-A);
}
body.service_silkscreen {
  --primitive-color: var(--cc-natane-A);
}
body.service_indigodyeing {
  --primitive-color: var(--cc-ruri-A);
}
body.service_design {
  --primitive-color: var(--cc-seiheki-A);
}
body.service_webdesign {
  --primitive-color: var(--cc-taisha-A);
}
body.service_architecture {
  --primitive-color: var(--cc-ayame-A);
}

/* 冒頭
----------------------------------------------------------------------------- */
.service-intro {
  padding-block:24.8rem 20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:15.4rem 16.0rem;
  }

  .heading {
    @media (width > 640px) {
      position:sticky;
      top:12.0rem;
    }
    @media (width <= 640px) {
      margin-bottom:4.8rem;
    }
  }

  .desc {
    @media (width > 640px) {
      width:fit-content;
      margin-left:auto;
      padding-block:25dvh 25dvh;
    }
    @media (width <= 640px) {
    }
  }
}



/* 特徴
----------------------------------------------------------------------------- */
.service-feature {
  padding-bottom:20.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-bottom:12.0rem;

  }
  &:has(+.service-groupphoto) {
    padding-bottom:16.0rem;
    @media (width <= 640px) {
      padding-bottom:8.0rem;
    }
  }
  .js-infiniteloop {
    --loop-duration:32s;
    @media (width <= 640px) {
      --loop-duration:16s;
    }
    .js-infiniteloop-item img {
      margin-right:10.0rem;
      @media (width <= 640px) {
        margin-right:3.2rem;
      }
    }
  }

  .feature_heading {
    margin-block:4.8rem 12.0rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .2em;
    @media (width > 640px) {
      text-align: right;
    }
    @media (width <= 640px) {
      margin-block:2.4rem 8.0rem;
      text-align: center;
      font-size:1.2rem;
    }
  }

  .contents {
    display:grid;
    @media (width > 640px) {
      justify-content: space-between;
      grid-template-rows:1fr auto 20.0rem auto 1fr;
      grid-template-columns:47.5rem 47.5rem;
    }
    @media (width <= 640px) {
      gap:6.4rem;
    }
  }
  .contents_item {
    --number-w:8.8rem;
    display:grid;
    grid-template-columns:var(--number-w) 1fr;
    @media (width > 640px) {
      &:nth-child(1) {
        grid-row:1/3;
        grid-column:1/2;
      }
      &:nth-child(2) {
        grid-row:2/5;
        grid-column:2/3;
      }
      &:nth-child(3) {
        grid-row:-3/-1;
        grid-column:1/2;
      }
    }
    @media (width <= 640px) {
      --number-w:5.6rem;
    }
    .number {
      grid-row:1/3;
      grid-column:1/2;
      color:var(--primitive-color);
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      gap:1.2rem;
      margin-top:1.6rem;

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

      .f {
        writing-mode: vertical-rl;
        font-size:1.5rem;
        line-height:3.2rem;
        letter-spacing: .07em;
        @media (width <= 640px) {
          font-size:1.3rem;
          line-height:2.3rem;
        }
      }
      .n {
        border-bottom: 1px solid;
        font-size:2.4rem;
        letter-spacing: .07em;
        line-height:1.1;
        @media (width <= 640px) {
          font-size:1.8rem;
        }
      }
    }
    .heading {
      margin-bottom:4.8rem;
      word-break: keep-all;
      @media (width <= 640px) {
        margin-bottom:3.2rem;
      }
    }
    .desc {

    }
  }

  .carousel_wrap {
    margin-top:16.0rem;
    overflow:hidden;
    @media (width <= 640px) {
      margin-top:8.0rem;
    }
  }
  .carousel_inner {

  }
  .carousel {
    @media (width > 640px) {
      width:104.0rem;
    }

    .splide__track {
      overflow:visible;
    }

    .splide__slide {
      @media (width > 640px) {
        display:flex;
      }
      .img {
        @media (width > 640px) {
          flex-shrink: 0;
        }
      }
      .text {
        @media (width > 640px) {
          flex: 1;
          display:flex;
          flex-direction: column;
          justify-content: center;
          padding-inline:6.4rem 9.6rem;
        }
        .heading {
          margin-bottom:4.0rem;
          @media (width <= 640px) {
            margin-block:3.6rem 2.4rem;
          }
        }
      }
    }

    .splide__pagination {
      display:flex;
      align-items: center;
      gap:.7rem;
      margin-top:8.0rem;
      position:static;
      @media (width > 640px) {
        margin-left:8.0rem;
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
      }
    }
    .splide__pagination__page {
      width:4px;
      height:4px;
      background-color:var(--cc-white-A);
      transition-duration:var(--duration-hover-A);
      transition-property: background-color;

      &.is-active {
        background-color:var(--primitive-color);
      }
    }

    .count {
      display:flex;
      align-items: center;
      justify-content: center;
      gap:.8rem;
      font-size:2.0rem;
      margin-top:2.0rem;
      text-align: center;
      line-height:1;
      @media (width > 640px) {
        margin-left:8.5rem;
      }
      @media (width <= 640px) {
        margin-top:1.6rem;
        margin-inline:0;
        width:100%;
        font-size:1.8rem;
      }
      .timebar {
        margin-right:1.6rem;
        width:6.4rem;
        height:1px;
        background-color:#d3d3d3;
        position:relative;
        &::after {
          content:"";
          display:block;
          background-color:var(--primitive-color);
          width:calc(100% * var(--progress));
          height:100%;
          position:absolute;
          top:0;
          left:0;
        }
      }
      .button {
        margin-top:-.04rem;
        width:2.0rem;

        &.is-prev {
          transform:scaleX(-1);
        }
      }
    }
  }
}



/* 組写真
----------------------------------------------------------------------------- */
.service-groupphoto {
  margin-bottom:20.0rem;
  --loop-duration:32s;
  @media (width <= 640px) {
    margin-bottom:8.0rem;
  }
  .js-infiniteloop-item {
    @media (width > 640px) {
      display:flex;
    }
    @media (width <= 640px) {
      display:grid;
      gap:.4rem;
      width:100%;
      animation:unset;
      &.is-clone {
        display:none !important;
      }
    }
    .photo {
      @media (width > 640px) {
        flex-shrink: 0;
        padding-right:.4rem;
      }
    }
    img {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        width:100%;
      }
    }
  }
}




/* WORKS
----------------------------------------------------------------------------- */
.service-works {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .works-header {
    display:flex;
    justify-content: center;
    margin-bottom:20.0rem;
    height:100dvh;
    position:relative;
    @media (width > 640px) {
      align-items: center;
    }
    @media (width <= 640px) {
      margin-bottom:8.0rem;
    }
    .heading {
      font-size:16.8rem;
      line-height:1.2;
      letter-spacing: .04em;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        margin-top:-.5lh;
        font-size:7.2rem;
      }
    }
    .bg {
      margin:auto;
      position:absolute;
      inset:-100dvh 0 0;
      z-index: -1;
      overflow:visible;
      clip-path:polygon(0 100dvh, 100% 100dvh, 100% 100%, 0 100%);
    }
    .bg_inner {
      height:100dvh;
      position:sticky;
      top:0;
    }
  }

  /* バナー */
  .banners {
    display:grid;
    gap:3.0rem;
    @media (width <= 640px) {
      gap:2.4rem;
    }
  }
  .banners_item {
    position:relative;
    z-index: 1;

    > .link {
      display:flex;
      align-items: center;
      height:32.0rem;
      @media (width <= 640px) {
        height:14.4rem;
      }
    }
    .logo {
      position:absolute;
      left:6.8rem;
      @media (width <= 640px) {
        left:2.0rem;
      }
    }
    .l-button-A {
      position:absolute;
      right:8.4rem;
      bottom:6.8rem;
      @media (width <= 640px) {
        right:2.0rem;
        bottom:3.4rem;
      }
    }
    .bg {
      position:absolute;
      inset:0;
      z-index: -1;
    }
  }

  .instagram {
    display:flex;
    align-items: center;
    gap:1.0rem;
    margin-top:8.0rem;
    margin-inline:auto;
    border-bottom:1px solid;
    padding-bottom:.7rem;
    width:fit-content;
    font-size:1.8rem;
    letter-spacing: .08em;
    line-height:1;
    @media (width <= 640px) {
      margin-top:5.6rem;
      font-size:1.5rem;
    }
    &::before {
      width:2.0rem;
      @media (width <= 640px) {
        width:1.7rem;
      }
    }
  }

  .gallery-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18.8rem;
    margin-bottom: 12.0rem;
  
    @media (width <= 640px) {
      grid-template-columns: 1fr;
      gap: 4.8rem;
      margin-bottom: 6.0rem;
    }
  
    .gallery-header_logo {
      @media (width <= 640px) {
        width: 22.6rem;
        margin: auto;
      }
    }
  
    .gallery-header_logo img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  
    .gallery-header_text {
      font-size: 1.6rem;
    }
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14.4rem;
    @media (width <= 640px) {
      grid-template-columns: 1fr;
      gap: 4.8rem;
    }
  }

  .gallery_item {
    position: relative;

    .gallery_img {
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    .gallery_title {
      margin-top: 0.8rem;
      text-align: right;

      .gallery_link {
        position: relative;
        display: inline-block;
        font-size: 1.4rem;
        text-decoration: none;
        color: inherit;
        line-height: 2;
        border-bottom: solid 1px white;

        &::after {
          content: '';
          display: inline-block;
          margin-left: 0.8rem;
          width: 1.1rem;
          height: 1.1rem;
          background: url('/assets/images/webdesign/link-arrow.svg') no-repeat center/contain;
        }
      }
    }
  }
}



/* .その他リンク
----------------------------------------------------------------------------- */
.service-others {
  padding-block:24.0rem;

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

  .others-heading {
    display:flex;
    margin-bottom:8.0rem;
    font-size:4.0rem;
    line-height:1.1;
    letter-spacing: .05em;
    background-image:var(--grad-A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    @media (width > 640px) {
      justify-content: center;
    }
    @media (width <= 640px) {
      font-size:1.8rem;
      margin-bottom:4.0rem;
    }
    > span {
    }
  }
}



/* SelectorName
----------------------------------------------------------------------------- */
.service-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}