/* ==========================================================================
   Case List Page Specific Styles
   ========================================================================== */


/* ====== CATEGORY TABS (大カテゴリ タブ / 小カテゴリ リンク) ====== */

.case-tabs {
  margin-bottom: var(--sp-2xl);
}

/* ── タブナビゲーション（大カテゴリ） ── */
.case-tabs__nav {
  display: flex;
  gap: 1em;
}

.case-tabs__btn {
  flex: 1;
  position: relative;
  padding: 0.5em 1em;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  transition: color var(--duration) var(--ease),
              background var(--duration) var(--ease);
  /* アクティブ時に bottom-border を消すため margin-bottom で引き下げ */
  margin-bottom: -1px;
}


/* アクティブタブ: 白背景 + 上部アクセントライン + 下ボーダーを消す */
.case-tabs__btn.is-active {
  background: var(--color-bg-light);
  color: var(--color-heading);
    box-shadow: var(--shadow-sm-md);
}


/* 非アクティブタブ ホバー */
.case-tabs__btn:not(.is-active):hover {
    color: var(--color-text);
    background: var(--color-border-light);
    box-shadow: var(--shadow-sm-md);
}

/* ── タブパネル（小カテゴリ） ── */
.case-tabs__panel {
  display: none;
  padding: var(--sp-md) 0;
  background: var(--color-white);
}

.case-tabs__panel.is-active {
  display: block;
}

/* 小カテゴリリンク群: 4列グリッド */
.case-tabs__sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xs) 0;
}

/* 小カテゴリ 個別リンク: 「>」付きテキストリンク */
.case-tabs__sub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  padding: 0.25em 1.5em;
  transition: color var(--duration) var(--ease);
}

.case-tabs__sub-link::before {
  content: '>';
  font-size: 0.8em;
  color: var(--color-text-muted);
  transition: color var(--duration) var(--ease);
}

.case-tabs__sub-link.is-active,
.case-tabs__sub-link:hover {
  color: var(--color-blue);
}

.case-tabs__sub-link.is-active::before,
.case-tabs__sub-link:hover::before {
  color: var(--color-blue);
}


/* ====== CASE CARD GRID ====== */
.case-list {
  margin-bottom: var(--sp-3xl);
}

/* PC 3列グリッド */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2xl) var(--sp-lg);
}

.cases__item {
  overflow: hidden;
}

.cases__item a {
  display: block;
}

/* 画像エリア: バッジ絶対配置のため relative */
.cases__item .card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-light);
  margin-bottom: var(--sp-2xs);
}

.cases__item .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
}

.cases__item:hover .card__image img {
  transform: scale(1.03);
}

/* ロットバッジ: 画像右下に絶対配置 */
.cases__item .card__lot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: rgba(32, 32, 36, 0.88);
  padding: 0.2em 0.85em;
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.cases__item .card__body {
  padding: var(--sp-sm) 0 0;
}

.cases__item .card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.4;
  margin-bottom: var(--sp-xs);
}

/* 本文: 3行で省略 */
.cases__item .card__text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ====== PAGINATION ====== */
.case-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  margin-top: var(--sp-2xl);
}

/* 数字: 背景・枠線なしのシンプルテキストリンク */
.case-pagination__num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
  line-height: 1;
}

.case-pagination__num:hover {
  color: var(--color-text);
}

.case-pagination__num.is-active {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* 前後矢印: 正円ボタン */
.case-pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
    padding-right: -5px;
    padding-bottom: 8px;
    font-size: 1.5rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid #333;
  border-radius: 50%;
  text-decoration: none;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
  line-height: 1;
}

.case-pagination__arrow:hover {
  background: var(--color-bg-light);
}


/* ==========================================================================
   RESPONSIVE - 1280px (Desktop mid)
   ========================================================================== */
@media (max-width: 1280px) {
  .cases__grid {
    gap: var(--sp-xl) var(--sp-md);
  }
}


/* ==========================================================================
   RESPONSIVE - 1024px (Tablet Landscape)
   ========================================================================== */
@media (max-width: 1024px) {
  .case-tabs__btn {
    font-size: var(--fs-xs);
    padding: 0.75em 0.5em;
  }

  .case-tabs__sub-link {
    font-size: var(--fs-xs);
  }

  .cases__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-lg) var(--sp-sm);
  }
}


/* ==========================================================================
   RESPONSIVE - 768px (Tablet Portrait / Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
.cases__item .card__image {
  margin-bottom: var(--sp-sm);
}

    .case-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.case-tabs__nav > * {
  flex: 0 0 calc(50% - 0.4em); 
}
  .case-tabs {
    margin-bottom: var(--sp-xl);
  }

  .case-tabs__btn {
    font-size: var(--fs-md);
    padding: 0.7em 0.0em;
  }
.case-tabs__sub-link {
  gap: 0.3em;
  font-size: var(--fs-md);
  padding: 0.25em 0em;
}

  .case-tabs__panel {
    padding: var(--sp-sm-md) 0;
  }

  .case-tabs__sub {
    grid-template-columns: repeat(3, 1fr);
  }

  .case-tabs__sub-link {
    font-size: var(--fs-md);
  }

  .cases__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md) var(--sp-sm);
  }

  .cases__item .card__title {
    font-size: var(--fs-md);
  }

  .cases__item .card__lot {
    font-size: var(--fs-4xs);
    bottom: 6px;
    right: 6px;
  }

  .case-pagination__arrow {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
  }

  .case-pagination__num {
    font-size: var(--fs-md);
  }
}


/* ==========================================================================
   Case Detail Page Specific Styles  (.p-case-detail scope)
   ========================================================================== */

/* ── ページタイトル ── */
/*.p-case-detail__title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.3;
}*/

/*.p-case-detail__title::before {
  content: '▶';
  font-size: 0.6em;
  color: var(--color-blue);
  flex-shrink: 0;
}*/


/*  <div class="p-case-detail__title-wrap">
    <img src="../assets/images/common/Parts20.svg" alt="" class="p-case-detail__title-deco" loading="lazy" aria-hidden="true">
    <h2 class="p-case-detail__title">スピンドルシャフト</h2>
  </div>
*/



/* タイトル行：Parts20.svg（三角飾り）+ 赤縦線 + テキスト */
.p-case-detail__title-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-xl);
    border-bottom: 1px solid #8B94C3;
    padding-bottom: var(--sp-sm);
}

.p-case-detail__title-deco {
  flex-shrink: 0;
  /* SVGの縦サイズはタイトルの行高に合わせる */
  height: 2.4em;
  width: auto;
  margin-right: 6px;
  display: block;
}

/* ページタイトル (H2): 赤い太い縦線を左に */
.p-case-detail__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    color: var(--color-heading);
    line-height: 1.3;
    padding-left: var(--sp-sm);
    margin: 0;
}




/* ── ギャラリー ── */
.p-case-detail__gallery {
  display: grid;
  grid-template-columns: 1fr calc(20% - (var(--sp-sm) * 137 / 115));
  gap: var(--sp-sm);
  align-items: start;
  margin-bottom: var(--sp-lg);
}

.p-case-detail__gallery-main {
  overflow: hidden;
  background: var(--color-bg-light);
  aspect-ratio: 38 / 23;
  width: 100%;
  border-radius: var(--sp-lg);
}

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

.p-case-detail__gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  width: 100%;
}

.p-case-detail__thumb {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-light);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--duration) var(--ease);
  width: 100%;
  aspect-ratio: 38 / 23; 
  border-radius: var(--sp-md);
}

.p-case-detail__thumb.is-active {
  border-color: var(--color-blue);
}

.p-case-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.6;
  transition: opacity var(--duration) var(--ease);
}

.p-case-detail__thumb.is-active img,
.p-case-detail__thumb:hover img {
  opacity: 1;
}

.p-case-detail__thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: var(--fs-3xs);
  text-align: center;
  padding: 2px 0;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  line-height: 1.5;
}


/* ── 動画 CTAバナー ── */
.p-case-detail__video-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-darkblue);
  background-image: url(../images/common/Parts17.svg);
    background-position: right -10px bottom -15px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  padding: var(--sp-md) var(--sp-xl);
  margin-bottom: var(--sp-md);
  text-decoration: none;
  transition: opacity var(--duration) var(--ease);
  border-radius: var(--radius-lg);
}

.p-case-detail__video-cta:hover {
  opacity: 0.85;
}

.p-case-detail__video-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.p-case-detail__video-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* HTML側の height="20" を上書きし、デザイン通りの大きさに調整 */
.p-case-detail__video-cta-icon img {
  width: auto;
  height: 32px; 
}

.p-case-detail__video-cta-text {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.05em; /* ほんの少し字間を空けて読みやすく */
}

/* 矢印は絶対配置で右端に固定（テキストの中央揃えを邪魔しない） */
.p-case-detail__video-cta-arrow {
  position: absolute;
  right: var(--sp-xl); /* 右端からの距離（paddingと同じにすると綺麗です） */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
}

.p-case-detail__video-cta-arrow img {
  width: auto;
  height: 20px;
}
/* ── コンテンツ 2カラム (左: 動画+スペック / 右: 説明文) ── */
.p-case-detail__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  margin-bottom: var(--sp-3xl);
  align-items: start;
}

/* ── スペックボックス (薄グレー背景 + 角丸) ── */
.p-case-detail__spec-box {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: var(--sp-lg) var(--sp-xl);
}

.p-case-detail__spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm-md);
}
.p-case-detail__spec-item:first-child {
  border-top: 1px solid var(--color-white);
    padding-top: var(--sp-md) ;
}

.p-case-detail__spec-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xs) 0 var(--sp-md) 0; /* 上下にパディングを追加 */
  border-bottom: 1px solid var(--color-white);
}

/* dt: グレーバッジ (pill) */
.p-case-detail__spec-dt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 130px;
  padding: 0.25em 1em;
  background: #747474;
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: 50vh;
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
}

/* dd: 太字ブラック */
.p-case-detail__spec-dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}



/* ── 説明テキスト (右カラム) ── */
.p-case-detail__desc {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 2.2;
}

/* ── 関連事例セクション ── */
.p-case-detail__related {
  margin-bottom: var(--sp-3xl);
}

.p-case-detail__related-heading {
  background: var(--color-darkblue-80);
  color: var(--color-white);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-midium);
  padding: var(--sp-xs) var(--sp-sm);
  margin-bottom: var(--sp-xl);
  line-height: 1.4;
}

.p-case-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}

.p-case-detail__related-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.p-case-detail__related-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-light);
  margin-bottom: var(--sp-sm);
}

.p-case-detail__related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
  display: block;
}

.p-case-detail__related-item:hover .p-case-detail__related-img img {
  transform: scale(1.04);
}

.p-case-detail__related-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-align: left;
  line-height: 1.5;
}

/* ── 一覧に戻るボタン ── */
.p-case-detail__back {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3xl);
}

.p-case-detail__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: var(--sp-md) var(--sp-3xl);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--duration) var(--ease);
}

.p-case-detail__back-btn:hover {
  background: #444;
}


/* ==========================================================================
   RESPONSIVE - Detail Page
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE - Detail Page
   ========================================================================== */

@media (max-width: 1280px) {
}

@media (max-width: 1024px) {

  .p-case-detail__content {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }

  .p-case-detail__video-cta-text {
    font-size: var(--fs-lg);
  }
}

@media (max-width: 768px) {
  .p-case-detail__title {
    font-size: var(--fs-xl);
  }

  .p-case-detail__gallery {
    grid-template-columns: 1fr;
  }

  .p-case-detail__gallery-thumbs {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--sp-sm);
    padding-bottom: var(--sp-xs);
  }

  .p-case-detail__thumb {
    flex-shrink: 0;
    width: calc((100% - (var(--sp-sm) * 3)) / 4);
    border-radius: var(--sp-sm);
  }

  .p-case-detail__video-cta {
    padding: var(--sp-sm-md) var(--sp-md);
  }

  .p-case-detail__video-cta-text {
    font-size: var(--fs-md);
  }

  .p-case-detail__video-cta-icon {
    width: 30px;
    height: 30px;
  }

  .p-case-detail__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-case-detail__back-btn {
    min-width: unset;
    width: 100%;
    padding: var(--sp-md);
  }
}