/* =================================================================
 * c-works — TOP「製作事例」WORKS セクション（PC・カルーセル）
 * Figma: 3084:44112
 *
 * 構成:
 *   .c-works                  セクション
 *     └─ .c-works__inner       gap32 / padding 96px 0（横はカルーセルが全幅のため0）
 *         ├─ .c-works__header   見出し（padding 0 70px）
 *         └─ .c-works__content  gap48
 *             ├─ .c-works__carousel  100vw フルブリード viewport（overflow hidden）
 *             │   └─ .c-works__track[data-pc-carousel-track]  flex nowrap / gap24 / padding-inline 70
 *             │       └─ .c-works__card.pc-carousel-item × N  （306px固定）
 *             └─ .c-works__footer   一覧ボタン + 罫線 + 前後ボタン
 *
 * ※ カルーセル挙動は pc.blade.php 末尾の共通JS（setupSlideCarousel）が
 *    [data-pc-carousel-track] / [data-pc-carousel-controls] / .pc-carousel-item / [data-dir] を見て駆動。
 *    これらのフックは変更しないこと。
 * ※ TOP では .top-pc（PC表示）専用。SP表示は別 blade（front/top/mobile）が担当。
 * 色・タイポは tokens.css 経由（ハードコード禁止）。
 * =================================================================*/

.c-works {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.c-works__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  padding: 96rem 0;
  box-sizing: border-box;
}

/* ---------- 見出し ---------- */
.c-works__header {
  width: 100%;
  padding: 0 70rem;
  box-sizing: border-box;
}

.c-works__heading {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-works__label {
  margin-top: -2rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-key);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 24rem;
}

.c-works__title-en {
  font-family: var(--font-en-condensed);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-h1-pc);           /* 56px */
  letter-spacing: var(--letter-spacing-heading);
  line-height: 84rem;
}

.c-works__rule {
  width: 60rem;
  height: 2rem;
  background-color: var(--color-key);
}

/* ---------- コンテンツ ---------- */
.c-works__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48rem;
}

/* カルーセル viewport（画面端まで全幅） */
.c-works__carousel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  box-sizing: border-box;
}

/* トラック（JSがtransformで動かす） */
.c-works__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: max-content;
  min-width: 100%;
  gap: 24rem;
  padding-inline: 70rem;
  will-change: transform;
}

/* ---------- カード ---------- */
.c-works__card {
  flex: 0 0 auto;
  width: 306rem;
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

/* 画像（白角丸ボックスに商品画像を中央表示） */
.c-works__card-media {
  position: relative;
  width: 306rem;
  height: 229.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rem;
  background-color: var(--color-white);
  border-radius: 24rem;
  box-sizing: border-box;
  overflow: hidden;                  /* hover時の画像 1.1x をボックス内にクリップ */
}

.c-works__card-imgwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
}

.c-works__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 指示 5693:90668: hover時に画像 1.1x 拡大（カード全体ホバーで反応） */
.c-works__card:hover .c-works__card-img { transform: scale(1.1); }

/* ↗ バッジ（画像ボックス右下） */
.c-works__card-badge {
  position: absolute;
  bottom: 14rem;
  right: 14rem;
  width: 14rem;
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
}

/* テキスト */
.c-works__card-body {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
}

.c-works__card-text {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.c-works__card-title {
  align-self: flex-start;             /* テキスト幅に揃え hover下線がテキスト下に収まる */
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-body);
  line-height: 28.8rem;
  text-decoration: none;
  /* 指示 5693:90577 / 90669: 事例カードタイトルは hover で左→右へ 1px 下線スライドイン (0.3s ease-in-out) */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease-in-out;
}
.c-works__card:hover .c-works__card-title { background-size: 100% 1px; }

.c-works__card-client {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  font-size: var(--fs-body-sm);         /* 14px */
  letter-spacing: 0.56rem;
  line-height: 25.2rem;
}

.c-works__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-works__card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24rem;
  padding: 3rem 14rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-04);
  border-radius: 12rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-02);
  font-size: var(--fs-body-xs);         /* 12px */
  letter-spacing: 0.48rem;
  line-height: 18rem;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ---------- フッター（一覧ボタン + 罫線 + 前後ボタン） ---------- */
.c-works__footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32rem;
  padding: 0 70rem;
  box-sizing: border-box;
}

.c-works__more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  height: 56rem;
  padding: 16rem 20rem 16rem 40rem;
  background-color: var(--color-white);
  border: 2rem solid var(--color-key);
  border-radius: 32rem;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
}

.c-works__more-text {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
  font-size: var(--fs-body);            /* 16px */
  letter-spacing: var(--letter-spacing-heading);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-default);
}

.c-works__more-arrow {
  flex-shrink: 0;
  width: 14rem;                          /* Figma: Primary_link btn_white の LinkIcon 14px */
  height: 14rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-arrow.svg") no-repeat center / contain;
  transition: background-color var(--duration-fast) var(--easing-default);
}

/* hover: Figma 未確定のため控えめに key 反転（要確認） */
.c-works__more:hover {
  background-color: var(--color-key);
}
.c-works__more:hover .c-works__more-text {
  color: var(--color-white);
}
.c-works__more:hover .c-works__more-arrow {
  background-color: var(--color-white);
}

.c-works__footer-line {
  flex: 1;
  height: 2rem;
  /* Figma 3084:55263 — 点線（stroke-dasharray 2 2 / Neutral 04） */
  background-image: repeating-linear-gradient(
    to right,
    var(--color-neutral-04) 0 2rem,
    transparent 2rem 4rem
  );
}

.c-works__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16rem;
}

.c-works__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44rem;
  height: 44rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-default);
}

.c-works__nav-btn:hover { transform: scale(1.08); }
.c-works__nav-btn:active { transform: scale(0.96); }

.c-works__nav-icon {
  display: block;
  width: 44rem;
  height: 44rem;
  pointer-events: none;
}

/* 空表示 */
.c-works__empty {
  padding: 24rem 70rem;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-01);
}

/* =================================================================
 * SP（TOP モバイル）— .SP ツリー専用オーバーライド
 *   front/top/mobile（works partial）に c-works を @include した際の SP。
 *   Figma SP: 1200:8450（見出し中央 → 隣カード peek のカルーセル → 点線+前後丸ボタン → 一覧ボタン）。
 *   カルーセル挙動は mobile.blade の SP用JS（.SP [data-carousel-track]/.sp-carousel-item/[data-dir]）。
 *   PCのJSは min-width:1024、SPのJSは max-width:1023.98 で排他のため二重駆動しない。
 *   ※ .SP スコープで PCツリー(.top-pc)に影響させない。
 * =================================================================*/

.SP .c-works__inner {
  padding: 40rem 0;
  gap: 24rem;
  align-items: stretch;
}

/* 見出し（中央寄せ） */
.SP .c-works__header {
  display: flex;
  justify-content: center;
  padding: 0 16rem;
}

.SP .c-works__heading {
  align-items: center;
  gap: 4rem;
}

.SP .c-works__label {
  margin-top: 0;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 12rem;
}

.SP .c-works__title-en {
  font-size: 34rem;
  letter-spacing: 1.36rem;
  line-height: 34rem;
}

.SP .c-works__rule {
  margin-top: 6rem;
}

/* ---------- カルーセル（transform 方式・シームレス無限ループ／中央カード＋両隣 peek） ----------
   製品カルーセル（products.css の .SP）と全く同じ方式。mobile.blade の SP用JS（setupLoopCarousel）
   が track の中身をクローンで複製し transform で 1 枚ずつスライド、active カードを中央に寄せて
   左右へ対称に隣カードを peek させる。track は definite width（100%）にする（max-content だと
   .SP .sp-carousel-item の flex-basis:84% が循環参照でカードが暴走するため）。 */
.SP .c-works__carousel {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  overflow: hidden;           /* 両隣 peek の超過分をクリップ */
}

.SP .c-works__track {
  width: 100%;
  gap: 12rem;
  padding: 0;
  overflow: visible;
  will-change: transform;
}

/* カード幅 250px（top-main.css の .SP .sp-carousel-item の flex:0 0 84% を上書き） */
.SP .c-works__card.sp-carousel-item {
  flex: 0 0 250rem;
  max-width: 250rem;
  width: 250rem;
  gap: 12rem;
}

/* 画像ボックス 250×188（Figma 指定。製品カードと共通）。flex 中央寄せ＋padding 16 */
.SP .c-works__card-media {
  width: 100%;                /* カード 250px に追従 */
  height: 188rem;
  aspect-ratio: auto;         /* 旧 1.33/1 を解除 */
  padding: 16rem;
  gap: 8rem;
}

.SP .c-works__card-badge {
  bottom: 10rem;
  right: 10rem;
}

.SP .c-works__card-body {
  gap: 12rem;
  padding: 0 8rem;
}

.SP .c-works__card-text {
  gap: 4rem;
}

/* ---------- フッター（点線 + 前後ボタン → 一覧ボタンを下段フル幅） ---------- */
.SP .c-works__footer {
  flex-wrap: wrap;
  justify-content: center;
  gap: 24rem 16rem;
  padding: 0 16rem;
}

.SP .c-works__footer-line {
  order: 1;
  height: 0;
  background: none;
  border-top: 2rem dotted var(--color-neutral-04);
}

.SP .c-works__nav {
  order: 2;
}

.SP .c-works__more {
  order: 3;
  width: 100%;
  justify-content: center;
}