/* =========================================
   case study detail
   ======================================= */

body {
 opacity: 1;
 background: transparent;
}
.case-study-detail {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.case-study-detail .container {
 max-width: unset;
 width: auto;
 margin: unset;
 padding: unset;
 margin-inline: 60px;
}
.section-title-case-study-detail {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 16px;
 margin-inline: 60px;
 margin-bottom: 40px;
 font-size: 52px;
 width: auto;
 text-align: left;
 letter-spacing: 0.02em;
 color: #393939;
 font-style: normal;
 text-transform: uppercase;
 font-weight: 600;
 padding-left: 28px;
 position: relative;
 line-height: 1;
}
.case-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 12px;
 margin-bottom: 24px;
}
.recommended-tags {
 margin-top: 24px;
 text-transform: uppercase;
 margin-bottom: 80px;
}
.recommended-tags h2.h6 {
 margin-bottom: 15px;
}
.recommended-tags .tags-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.recommended-tags .rec-badge {
 background-color: #eee;
 color: #444;
 border-radius: 999px;
 text-decoration: none;
 transition: background-color 0.2s;
}
.recommended-tags .rec-badge.active {
 background-color: #ffeb3b;
 color: #333;
}

/* 重要タグ（固定表示エリア）のサイズアップ */
.case-study-detail .important-tags .tag-pill {
 font-size: 15px;
 font-weight: 500;
 padding: 0.8em 1.2em;
 border-radius: 999px;
 background: #eee;
 color: #444;
 text-decoration: none;
 transition: background-color 0.2s;
 text-transform: uppercase;
}

/* JSON 内タグバッジ（Summary/KeyPoints/Results 下など）のサイズアップ */
.case-study-detail .tags-list .badge {
 padding: 0.8em 1.2em;
 font-size: 1rem;
 font-weight: 600;
}

.case-study-detail a {
 text-decoration: none;
}

/* バッジ（.case-tags内） */
.case-tags .badge {
 font-size: 1rem;
 padding: 0.8em 1.2em;
 border-radius: 12px;
 font-weight: 600;
}

/* 重要タグエリア */
.important-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 position: sticky;
 background: #fff;
 text-transform: uppercase;
}
.important-tags .tag-pill {
 font-size: 15px;
 font-weight: 500;
 padding: 0.8em 1.2em;
 border-radius: 999px;
 background: #eee;
 color: #444;
 text-decoration: none;
 transition: background-color 0.2s;
 text-transform: uppercase;
}
.important-tags .tag-pill.active {
 background-color: #ffeb3b;
 color: #333;
}
.case-study-detail .meta {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 0.9rem;
 color: #666;
 margin-bottom: 24px;
}

.case-study-detail .meta .badge {
 background-color: #e74c3c;
 color: white;
 font-size: 0.75rem;
 padding: 4px 8px;
 border-radius: 8px;
}

/* 目的 */
.case-study-detail p.fw-semibold {
 font-size: 1.1rem;
 margin-bottom: 32px;
}

/* メイン画像 */
.case-study-detail .main-image {
 width: 100%;
 max-width: 800px;
 margin: 0 auto 32px;
 display: block;
 border-radius: 8px;
 object-fit: cover;
}

/* サブ画像ギャラリー */
.case-study-detail .sub-gallery {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: center;
 margin-bottom: 32px;
}

.case-study-detail .sub-gallery img {
 width: calc(33.333% - 10px);
 border-radius: 6px;
 object-fit: cover;
}

/* 各セクション見出し */
.case-study-detail h2.h5 {
 font-size: 1.25rem;
 margin-bottom: 8px;
 color: #333;
 font-weight: 600;
}

.case-study-detail .mb-4 {
 margin-bottom: 32px;
}

/* スタッフ・企業リスト */
.case-study-detail .row {
 display: flex;
 flex-wrap: wrap;
 gap: 32px;
 margin-bottom: 32px;
}

.case-study-detail .row .col-md-6 {
 flex: 1 1 calc(50% - 16px);
}

.case-study-detail ul {
 margin: 0;
 padding-left: 1.2em;
}

.case-study-detail ul li {
 margin-bottom: 4px;
 color: #555;
}

/* JSON 内タグバッジ */
.case-study-detail .tags-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: unset;
}

/* Recommended tags inside case-study */
.case-study-detail .recommended-tags .rec-badge {
 font-size: 15px;
 font-weight: 500;
 padding: 0.8em 1.2em;
 border-radius: 999px;
 background: #eee;
 color: #444;
 text-decoration: none;
 transition: background-color 0.2s;
 text-transform: uppercase;
}
.case-study-detail .recommended-tags .rec-badge.active {
 background-color: #ffeb3b;
 color: #333;
}

.case-media {
 display: block;
 margin: 0 auto 24px;
 /* 横は親いっぱいまでOK */
 max-width: min(100%, 1000px);
 /* 高さは画面の70vhを上限に（PCで大きすぎない） */
 max-height: clamp(320px, 70vh, 820px);
 /* ここで「はみ出さずに収める」 */
 object-fit: contain;
 object-position: center;
 /* 画像でも動画でも効くように width/height の扱いを統一 */
 width: auto; /* 画像が縦長のとき、幅を無理に100%にしない */
 height: auto; /* まずは自然サイズ */
}

/* 画像の場合、max-height を優先させたいので縦長対策 */
img.case-media {
 /* 自然比率を維持しつつ、どちらかが上限を超えたら縮む */
 max-width: 100%;
 height: auto;
}

/* ===== ギャラリー（サムネ整列） ===== */
.media-gallery .gallery-item {
 /* 3カラム相当。隙間も考慮して調整 */
 width: calc(33.333% - 10px);
 /* サムネは統一比率でトリミング（見栄え重視） */
 aspect-ratio: 4 / 3;
 object-fit: cover;
 object-position: center;
 border-radius: 6px;
 display: block;
}

.media-board.compact {
 --gap: 8px;
 display: grid;
 gap: var(--gap);
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 幅の最小値を決めて自動調整 */
 margin-bottom: 24px;
 padding: 4px 0;
}

/* 各タイルの比率を16:9で統一 */
.media-board.compact :is(img.board-item, video.board-item) {
 width: 100%;
 aspect-ratio: 16 / 9; /* ←これで常に16:9 */
 object-fit: cover; /* 見栄え優先。containにすれば黒帯あり */
 object-position: center;
 border-radius: 8px;
 display: block;
 background-color: #000; /* 動画の余白が目立たないように */
}

/* 1枚あたりの高さ＝ボード高 / 行数。これで「行」で収める */
.media-board.compact .board-item {
 /* 画像も動画も同じ見た目でタイル化 */
 width: 100%;
 height: calc((var(--board-max-h) - (var(--rows) - 1) * var(--gap)) / var(--rows));
 object-fit: cover; /* 見栄え優先。全体を見せたければ contain に変更 */
 object-position: center;
 border-radius: 8px;
 display: block;
}

/* 画像のレンダリング品質 */
.media-board.compact img.board-item {
 image-rendering: auto;
}

/* 単一メディア表示（大きく見せる） */
.media-board.single {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 24px;
}

.media-board.single .board-item {
 max-width: min(100%, 1000px);
 max-height: calc(100vh - (var(--header-height, 64px) + 140px));
 object-fit: contain;
 object-position: center;
 border-radius: 8px;
}

@media (min-width: 769px) {
 .case-study-detail .important-tags .tag-pill:hover:not(.active),
 .case-study-detail .recommended-tags .rec-badge:hover:not(.active) {
  background: #444;
  color: #fff;
 }
 .works-list .case-item:hover img,
 .works-list .case-item:hover video {
  transform: scale(1.1);
 }
}

/* レスポンシブ */
@media (max-width: 768px) {
 .section-title-case-study-detail {
  margin-inline: 30px;
  margin-bottom: 30px;
  font-size: 40px;
  padding-left: 22px;
 }
 .case-study-detail .container {
  margin-inline: 30px;
 }
 .case-study-detail .sub-gallery img {
  width: calc(50% - 8px);
 }
 .case-study-detail .meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
 }
 .case-study-detail .row {
  flex-direction: column;
 }
 .case-study-detail .case-thumb {
  display: block; /* ブロック要素にして余白制御しやすく */
  width: 100%; /* 横幅は親要素いっぱい */
  max-width: 100%; /* 親要素以上には広がらない */
  height: auto; /* アスペクト比を維持 */
 }
 .media-gallery .gallery-item {
  width: calc(50% - 8px);
  aspect-ratio: 4 / 3;
 }
 .media-board.compact {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 }
 /* 既存の巨大化を無効化（万一の干渉回避） */
 .case-media,
 .gallery-item,
 .case-thumb {
  max-height: none !important;
  height: auto !important;
  width: auto !important;
 }
}

@media (max-width: 600px) {
 .case-study-detail {
  padding-block: 30px 0;
 }
 .section-title-case-study-detail {
  margin-inline: 20px;
  margin-bottom: 20px;
  font-size: 30px;
  padding-left: 20px;
 }
 .case-study-detail .container {
  margin-inline: 20px;
 }
 .case-study-detail .important-tags .tag-pill,
 .case-study-detail .recommended-tags .rec-badge {
  font-size: 13px;
 }
 .recommended-tags {
  margin-bottom: 60px;
 }
}


.media-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

    .media-modal.is-open {
        display: block;
    }

.media-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}

.media-modal-content {
    position: absolute;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    pointer-events: none;
}

.media-modal-item {
    display: none;
    max-width: min(92vw, 1400px);
    max-height: 88vh;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    pointer-events: auto;
}

    .media-modal-item.is-active {
        display: block;
    }

.media-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10002;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

body.modal-open {
    overflow: hidden;
}