@charset "utf-8";
/* =========================================
   導入実績（横スライド）
   株式会社スリーエス

   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま（増やしていません）
   ・セクションは画面幅100%、カードだけ左右に余白
   ・色は :root の既存カラーのみ（新規カラーなし）
   ・スライド自体はCSSの scroll-snap。JSは矢印・ページ送り・
     PCのドラッグだけを担当します
========================================= */

.works-section {
  /* --- 表示件数 -------------------------------------------------
     ここを変えるだけで1画面に並ぶ枚数が変わります。
     JSは件数を知らないので、CSSだけで完結します。
       1440px以上   6件
       1200-1439px  4件
       981-1199px   3件
       701-980px    2件
       700px以下    1件
  ------------------------------------------------------------- */
  --works-per: 6;
  --works-gap: var(--space-20);
  /* カード部分の左右の余白（セクションは100%幅のまま） */
  --works-pad: clamp(var(--container-padding-sp), 2vw, var(--space-60));
  --works-radius: 10px;

  /* --- アニメーションの順番（他セクションと同じ仕組み） --- */
  --works-lead-delay: 0.4s;
  --works-cards-delay: 1s;

  --works-title: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); /* 他セクションの見出しと同値 */

  background: var(--color-white);
}

/* =========================================
   見出し
========================================= */
.works-section__head {
  margin-bottom: var(--space-30);
  text-align: center;
}

.works-section__title {
  color: var(--color-teal);
  font-size: var(--works-title);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.works-section__lead {
  --wipe-delay: var(--works-lead-delay);
  margin-top: var(--space-10);
  color: var(--color-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  line-break: strict;
}

/* =========================================
   スライダー
========================================= */
.works-slider {
  --deal-base: var(--works-cards-delay);
  position: relative;
}

/*
 * 横スクロールする本体。
 * scroll-padding を左の余白と合わせることで、
 * 矢印で送ったときにカードの左端がきれいに揃います。
 */
.works-slider__track {
  display: grid;
  grid-auto-flow: column;
  /*
   * カード1枚の幅。
   * ここでの 100% は「左右の余白を除いた内側の幅」です。
   * padding をもう一度引くと二重に狭くなるので引いていません。
   * --works-peek は、次の1枚をちらっと見せるための差し引きです。
   */
  grid-auto-columns: calc(
    (100% - var(--works-gap) * (var(--works-per) - 1)) / var(--works-per) - var(--works-peek, 0px)
  );
  gap: var(--works-gap);
  padding-inline: var(--works-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--works-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.works-slider__track::-webkit-scrollbar {
  display: none;
}

.works-slider__item {
  min-width: 0;
  scroll-snap-align: start;
}

/* ドラッグ中はカーソルを変え、文字を選択させない */
.works-slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* 画像・リンクを「つかんで持ち運ぶ」ブラウザ標準の動作を止める
   （これが始まるとスライドのドラッグが中断されます） */
.works-slider__track img,
.works-slider__track a {
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================
   カード（全体がリンク）
========================================= */
.works-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--works-radius);
  background: var(--color-white);
  color: var(--color-base);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.works-card:hover,
.works-card:focus-visible {
  border-color: var(--color-teal);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(var(--color-border-rgb), 0.55);
}

.works-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
}

.works-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.works-card:hover .works-card__thumb img {
  transform: scale(1.05);
}

.works-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-20);
}

.works-card__badge {
  padding: 4px var(--space-10);
  border-radius: 999px;
  background: var(--color-surface-blue);
  color: var(--color-navy);
  font-size: var(--font14-size);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.works-card__title {
  color: var(--color-text-strong);
  /*
   * 1440pxで6枚並べるとカードが約214pxまで細くなるため、
   * 画面幅に合わせて見出しも少しずつ小さくします。
   * （ブレイクポイントは増やさず、clampで連続的に変えています）
   */
  font-size: clamp(var(--font-size-caption), 0.6rem + 0.45vw, var(--font18-size));
  font-weight: 700;
  line-height: 1.5;
  line-break: strict;
}

.works-card__area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-mute);
  font-size: var(--font14-size);
  line-height: 1.5;
}

.works-card__area i {
  color: var(--color-teal);
  font-size: 0.9em;
}

/*
 * カードの一言は2行で打ち切ります。
 * 文章の長さでカードの高さがバラバラにならないようにするためです。
 */
.works-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--color-base);
  font-size: var(--font14-size);
  line-height: 1.7;
  line-break: strict;
}

/* =========================================
   矢印とページ送り
========================================= */
.works-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  margin-top: var(--space-20);
  padding-inline: var(--works-pad);
}

/* 1画面に収まりきる場合は、操作するものが無いので隠す */
.works-slider--static .works-slider__nav {
  display: none;
}

.works-slider__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-teal);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.works-slider__arrow:hover:not(:disabled),
.works-slider__arrow:focus-visible:not(:disabled) {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: var(--color-white);
}

/* 端まで来たら押せないことが分かるようにする */
.works-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.works-slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
}

.works-slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.works-slider__dot:hover {
  background: var(--color-teal);
}

.works-slider__dot.is-current {
  background: var(--color-teal);
  transform: scale(1.3);
}

/* =========================================
   もっと見るボタン
========================================= */
.works-section__action {
  margin-top: var(--space-30);
  text-align: center;
}

/* =========================================
   1439px以下：small-pc → 4件
========================================= */
@media screen and (max-width: 1439px) {
  .works-section {
    --works-per: 4;
  }
}

/* =========================================
   1199px以下：タブレット → 3件
========================================= */
@media screen and (max-width: 1199px) {
  .works-section {
    --works-per: 3;
  }
}

/* =========================================
   980px以下 → 2件
   （common.css の --width980 と同じ境界）
========================================= */
@media screen and (max-width: 980px) {
  .works-section {
    --works-per: 2;
  }
}

/* =========================================
   700px以下：スマートフォン → 1件
   指で送るので、矢印は隠してページ送りだけ残します
========================================= */
@media screen and (max-width: 700px) {
  .works-section {
    --works-per: 1;
    --works-gap: var(--space-10);
    /* 次の1枚を少しだけ見せて、横に続くことが分かるようにする */
    --works-peek: 40px;
  }

  .works-slider__arrow {
    display: none;
  }

  .works-card__body {
    padding: var(--space-10) var(--space-20) var(--space-20);
  }

  .works-section__action .ts-button {
    margin-inline: auto;
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .works-section {
    --works-pad: var(--container-padding-xs);
  }

  .works-card__body {
    padding: var(--space-10);
  }
}