/* ============================================================
   pages/works.css
   /works/ Case Study ページ固有スタイル
   Design System v2.0 参照
============================================================ */

/* ---- Concept バッジ --------------------------------------- */
.works-concept-badge {
  display:        block;
  padding:        var(--space-1) var(--space-3);
  border:         1px solid var(--color-border-strong);
  font-family:    var(--font-en);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  var(--space-6);
}

/* ---- パンくず --------------------------------------------- */
.works-breadcrumb {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0;
  list-style:     none;
  padding:        0;
  font-family:    var(--font-en);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-8);
}
/* セパレーター（CSSで生成） */
.works-breadcrumb li + li::before {
  content:       '/';
  margin:        0 var(--space-2);
  color:         var(--color-border-strong);
  font-weight:   var(--weight-normal);
}
.works-breadcrumb a {
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
}
.works-breadcrumb a:hover {
  color: var(--color-text-sub);
}

/* ---- ページタイトルエリア ---------------------------------- */
.works-page-title {
  font-size:     var(--text-h2);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  line-height:   var(--leading-heading);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .works-page-title {
    font-size: var(--text-h1);
  }
}

.works-overview {
  font-size:     var(--text-base);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  max-width:     720px;
  margin-bottom: var(--space-8);
}

/* ---- サービスタグリスト ------------------------------------ */
.works-services {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  list-style: none;
  padding:    0;
  margin:     0;
}
.works-service-tag {
  display:        inline-flex;
  align-items:    center;
  padding:        var(--space-1) var(--space-3);
  border:         1px solid var(--color-border-strong);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-sub);
  letter-spacing: 0.06em;
}

/* ---- ヒーロー画像 ----------------------------------------- */
/* LCP対象：eager + fetchpriority="high" で優先読み込み */
.works-hero-image {
  width:    100%;
  overflow: hidden;
}
.works-hero-img {
  display: block;
  width:   100%;
  height:  auto;
}

/* ---- チャプター（各フェーズセクション） ------------------- */
.works-chapter {
  border-top:     1px solid var(--color-border);
  padding-top:    var(--space-20);
  padding-bottom: var(--space-20);
}
@media (min-width: 768px) {
  .works-chapter {
    padding-top:    var(--space-24);
    padding-bottom: var(--space-24);
  }
}
.works-chapter--alt {
  background-color: var(--color-surface);
}

/* ---- チャプター：ラベル・見出し ----------------------------- */
.works-chapter__label {
  display:        block;
  font-family:    var(--font-en);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-2);
}
.works-chapter__title {
  font-size:     var(--text-h3);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  line-height:   var(--leading-heading);
  margin-bottom: var(--space-4);
}
.works-chapter__text {
  font-size:     var(--text-sm);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  max-width:     640px;
  margin-bottom: var(--space-8);
}

/* ---- 画像 -------------------------------------------------- */
.works-img {
  display: block;
  width:   100%;
  height:  auto;
}

/* 縦長画像（スマートフォン・UI画面など）表示幅を制限 */
.works-img--portrait {
  max-width: 380px;
  margin:    0 auto;
}

/* 縦長だがやや幅広い画像（フルページスクロールスクショなど） */
.works-img--portrait-lg {
  max-width: 560px;
  margin:    0 auto;
}

/* ---- 画像補足テキスト ------------------------------------- */
.works-img-caption {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  line-height: var(--leading-body);
  margin-top:  var(--space-3);
  text-align:  center;
}

/* ---- 画像の間隔 ------------------------------------------- */
.works-img-stack {
  margin-bottom: var(--space-8);
}

/* ---- 2カラム画像レイアウト --------------------------------- */
.works-image-row {
  display: grid;
  gap:     var(--space-6);
}
@media (min-width: 640px) {
  .works-image-row--2col {
    grid-template-columns: 1fr 1fr;
    align-items:           start;
  }
}

/* ---- 戻るリンク ------------------------------------------- */
.works-back-section {
  border-top:     1px solid var(--color-border);
  padding-top:    var(--space-8);
  padding-bottom: var(--space-8);
}
.works-back {
  display:         inline-flex;
  align-items:     center;
  font-family:     var(--font-en);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
}
.works-back::before {
  content:      '← ';
  margin-right: var(--space-1);
}
.works-back:hover {
  color: var(--color-text);
}
.works-back:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 3px;
}

/* ---- モーション軽減対応 ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .works-back {
    transition: none;
  }
}

/* ---- モバイル対応 ----------------------------------------- */
@media (max-width: 639px) {
  .works-img--portrait,
  .works-img--portrait-lg {
    max-width: 100%;
  }
}