/* case-study.css — 事例セクション（Figma: Frame 9 2008:10348 / CASE STUDY）
   実値: py 120px gap 80px / 青い矢羽根バナー 1568x544（左48 上80 180度回転）
         カード p 32 gap 40 radius 16 影 0,0,17.5,10% / 画像 300x292
         タグ 14.222px / 見出し 21.333px Bold / 本文 16px lh 1.8 */

.case-study {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
  /* ⚠ pb40 はFigmaと不一致。Figmaのコンポーネント実値は py120（4083:8853 = py-[120px]。
     このファイル冒頭の「実値: py 120px」も同じ）。サービスTOPのみ下120pxに直してあり
     （下の .page-template-page-service .case-study）、他5ページはFigma未確認のため
     pb40 のまま。各ページのFigmaを確認でき次第、base を pb120 に寄せて上書きを消すこと。 */
  padding: var(--space-120) 0 var(--space-40);
  overflow: hidden;
}

/* サービスTOPでは「支援事例を見る」ボタン下端からCLIENTSバンド上端まで120px。
   CLIENTS側（4083:8854）はフレーム＝青バンドで上下padding 0のため、余白はこちらが持つ。
   SPのレイアウトはFigma未確認のため、PC幅のみに当てる。 */
@media (min-width: 768px) {
  .page-template-page-service .case-study {
    padding-bottom: var(--space-120);
  }
}

.case-study__bg {
  position: absolute;
  top: 5rem;
  left: 3rem;
  /* 1440pxで右に176pxはみ出し。1440px超は差分を足して同じ見え方を維持 */
  width: max(98rem, calc(100% + 8rem));
  height: 34rem;
  transform: rotate(180deg);
  pointer-events: none;
}

.case-study__watermark {
  position: absolute;
  z-index: 0; /* カードの背面 */
  /* body（カード）基準で配置。見出しの行数に依らず、カード上端から一定の位置に出す。
     基準は /ai/ の元実装位置（2行見出し時 top:290px ＝ カード上端 -124px 相当）。 */
  top: -7.75rem;
  left: max(2.5rem, calc(50% - 42.5rem)); /* 1440pxで左40px。1440px超は中央基準で追従 */
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap; /* 「CASE STUDY」を1行で（無指定だとSTUDYが2行目に折返しカード背後に隠れる） */
  color: var(--color-white);
  opacity: 0.2;
  pointer-events: none;
}

.case-study__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.case-study__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.case-study__label {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
}

.case-study__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.case-study__lead {
  margin: 0;
  max-width: 48rem;
  color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-align: center;
}

.case-study__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

/* Swiperカルーセル（中央カード中心のピーク型）。フル幅で左右のカードがのぞく */
/* Swiper標準の .swiper { overflow: hidden } を上書き（詳細度で勝つ）。
   overflow:hiddenだとカードの影が上下で途切れるため visible にし、
   横方向のはみ出しはセクション（.case-study{overflow:hidden}）でクリップする。 */
.case-study .case-study__swiper {
  width: 100%;
  overflow: visible;
}

/* スライド幅はカード幅（801px）に合わせる（slidesPerView: 'auto'） */
.case-study__swiper .swiper-slide {
  width: auto;
  height: auto;
}

/* --- 事例カード --- */
.case-card {
  display: flex;
  gap: var(--space-40);
  align-items: flex-start;
  flex-shrink: 0;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-drop);
}

.case-card__image {
  width: 18.75rem;
  height: 18.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.case-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 24.8125rem;
}

/* タグ（Figma: px16 py4 14.222px 白文字） */
.case-card__tag {
  display: inline-block;
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.case-card__tag--black {
  background: var(--color-black);
  border-radius: 0;
}

.case-card__result-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.case-card__result {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.case-card__line {
  display: block;
  width: 100%;
  border-top: var(--border-width) solid var(--color-black);
}

.case-card__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.case-card__text {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
}

/* カルーセルドット（自前生成。Figma: 10px円 gap 8px） */
.case-study__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

.case-study__dot {
  width: .625rem;
  height: .625rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-dot-inactive);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.case-study__dot.is-active {
  background: var(--color-primary);
}

/* --- SP: カードは縦積み・幅はビューポート基準（左右にピークを残す）-------- */
@media (max-width: 767px) {
  .case-study {
    gap: var(--space-40);
    padding: var(--space-48) 0 var(--space-32);
  }
  /* サービスTOPのみ下48px。他5ページはSPのFigma未確認のため base の pb32 のまま
     （PC側の pb120 上書きと同じ切り分け） */
  .page-template-page-service .case-study {
    padding-bottom: var(--space-48);
  }
  .case-study__body {
    position: static;
  }
  /* 矢羽根帯：縦積みで背の高くなった見出し領域を覆うよう引き伸ばす */
  .case-study__bg {
    top: 0;
    left: -15%;
    width: 130%;
    height: 36rem;
  }
  .case-study__head {
    padding: 0 var(--space-24);
  }
  .case-card {
    flex-direction: column;
    gap: var(--space-24);
    width: calc(100vw - var(--space-48));
    padding: var(--space-24);
  }
  .case-card__title {
    font-size: var(--font-size-h3);
  }
  .case-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio-16-9); /* SPはポリシー・メディアカードと比率統一 */
  }
  .case-card__body {
    width: 100%;
  }
}