/************************************************************
 * WORKS（実績）ページ CSS  —— page-id-25 専用
 * - 旧テーブル表示(.achievement-table など)は全削除
 * - カードレイアウト＋見出し(左:カテゴリ+件数 / 右:凡例)
 * - 既存のカテゴリーピルは踏襲（整理済）
 ************************************************************/

#headerimg h1 {
	display: none;
}

/* ===== 共通カラー（参考） =====
  #F8F7F4: ページ/薄ベージュ, #ECE9E4: 濃ベージュ, #5c524a: 文字,
  #B6A996: ゴールド(現投資先), #c9d6dc: スカイ(Exit)
*/

/* ========== メインビジュアル ========== */
.page-id-25 .main-visual {
  position: relative;
  width: 100%;
  min-height: 360px;
  background: url("../images/pc/page-works-mv-bg.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 80px 0;
  box-sizing: border-box;
  color: #5c524a;
  text-align: center;
  overflow: hidden;
}
.page-id-25 .main-visual__overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1px);
  z-index: 1;
}
.page-id-25 .main-visual__inner {
  position: relative;
  z-index: 2;
  max-width: 128rem;
  width: 100%;
  margin: 0 auto;
}
.page-id-25 .breadcrumb {
  color: #fff;
  font-size: 2rem !important;
}
.page-id-25 .main-visual__inner .main-title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin: 40px auto 80px;
  color: #fff;
}
@media (max-width: 600px) {
  .page-id-25 .main-visual__inner .main-title {
    font-size: 24px;
  }
}

/* ========== カテゴリーのジャンプピル ========== */
.page-id-25 .category-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.page-id-25 .category-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  background-color: #fff;
  border-radius: 9999px;
  font-size: 16px;
  color: #5c524a;
  text-decoration: none;
  transition: background-color 0.2s;
}
.page-id-25 .category-item:hover {
  background-color: #f5f5f5;
}
.page-id-25 .category-name {
  color: #5f5c5d;
}
.page-id-25 .category-count {
  margin-left: 12px;
  padding-left: 8px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  color: #b6aa96;
}
@media (max-width: 600px) {
  .page-id-25 .category-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
    max-width: 320px;
    margin: 0 auto;
  }
  .page-id-25 .category-item {
    font-size: 10px !important;
    justify-content: space-between;
    padding: 12px 24px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .page-id-25 .category-count {
    font-size: 13px;
  }
}

/* ========== コンテンツ幅 ========== */
.page-id-25 .achievements {
  max-width: 1440px;
  margin: 80px auto 120px;
  padding: 0 80px;
}

.page-id-25 .achievement-category-all-wrapper::before {
  content: "";
  display: block;
  padding-top: 60px;
  margin-top: -60px;
}

/* ========== カテゴリー見出し（左：カテゴリ＋件数 ／ 右：凡例） ========== */
.page-id-25 .achievement-category-all-wrapper {
  margin-top: 84px;
}
.page-id-25 .achievement-category-all-wrapper:first-of-type {
  margin-top: 0;
}

.page-id-25 .achievement-category-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-radius: 0;
  scroll-margin-top: 120px;
  --leading-trim: 0; /* 他CSSの margin-block 補正を打ち消し */
  margin-block: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 24px 0 0;
}

/* 左：カテゴリ名＋件数（PCは固定幅、タブレット以下は%管理） */
.page-id-25 .achievement-badge {
  display: inline-flex;
  gap: 0;
  background: transparent;
  border-radius: 0;
}
.page-id-25 .achievement-badge__label {
  width: 272px;
  background: #b6a996;
  color: #fff;
  padding: 10px 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 0;
}
.page-id-25 .achievement-badge__count {
  width: 121px;
  background: #5e5c5d;
  color: #fff;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 0;
}

/* 右：凡例（PCは横並び右寄せ） */
.page-id-25 .achievement-heading-right {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  background: transparent;
  border-radius: 0;
}
.page-id-25 .legend {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #8b877f;
  font-size: 14px;
}
.page-id-25 .legend__bar {
  width: 56px;
  height: 6px;
  display: inline-block;
  background: #b6a996;
}
.page-id-25 .legend__text {
  width: 60px;
  text-align: right;
}
.page-id-25 .legend__bar--sky {
  background: #c9d6dc;
}

/* —— タブレット以下：%レイアウト＆凡例は縦並び —— */
@media (max-width: 1024px) {
  .page-id-25 .achievements {
	  padding: 0 40px;
  }
  .page-id-25 .achievement-category-heading {
    gap: 12px;
  }
  /* 左 60% */
  .page-id-25 .achievement-badge {
    flex: 0 1 60%;
    width: 60%;
    min-width: 0;
  }
  .page-id-25 .achievement-badge__label {
    flex: 0 0 70%;
    width: auto;
    padding: 10px 16px;
    font-size: 15px;
  }
  .page-id-25 .achievement-badge__count {
    flex: 0 0 30%;
    width: auto;
    padding: 10px 12px;
    font-size: 13px;
  }
  /* 右 40%（縦積み・右寄せ） */
  .page-id-25 .achievement-heading-right {
    flex: 0 0 40%;
    width: 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .page-id-25 .legend {
    gap: 12px;
    font-size: 13px;
  }
  .page-id-25 .legend__bar {
    width: 56px;
    height: 6px;
  }
}

/* —— スマホ：タブの横2カラムレイアウトを継承（縮尺のみ調整） —— */
@media (max-width: 600px) {
  .page-id-25 .achievements {
  padding: 0;
  }
  .page-id-25 .achievement-category-heading {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 16px 0 0;
  }
  .page-id-25 .achievement-badge {
    flex: 0 1 60%;
    width: 60%;
  }
  .page-id-25 .achievement-badge__label {
    padding: 8px 12px;
    font-size: 14px;
  }
  .page-id-25 .achievement-badge__count {
    padding: 8px 10px;
    font-size: 12px;
  }
  .page-id-25 .achievement-heading-right {
    flex: 0 0 40%;
    width: 40%;
    gap: 6px;
  }
  .page-id-25 .legend {
    gap: 10px;
    font-size: 12px;
  }
  .page-id-25 .legend__bar {
    width: 48px;
    height: 5px;
  }
}

.page-id-25 .group-caption {
  z-index: 1;
}

/* クリック可能なグループ名（リンク）の見た目 */
.page-id-25 .group-caption--link{
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* テキストとアイコンの間隔 */
  text-decoration: none;
  color: #8b877f;           /* 既存のgroup-captionと同色 */

}

.page-id-25 .group-caption--link:hover{
  color: #5c524a;           /* うっすらトーンUP */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-id-25 .group-caption--link:focus-visible{
  outline: 2px solid #B6A996;  /* アクセシビリティ用フォーカス */
  outline-offset: 2px;
  border-radius: 2px;
}

/* 右側の外部リンクアイコン（テキスト色に追随） */
.page-id-25 .group-caption--link::after{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;  /* テキスト色と同じ色で描画 */
  /* マスクにSVGを使って色を塗る */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\
<path d=\"M15 3h6v6\"/>\
<path d=\"M10 14L21 3\"/>\
<path d=\"M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>\
</svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\
<path d=\"M15 3h6v6\"/>\
<path d=\"M10 14L21 3\"/>\
<path d=\"M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>\
</svg>') center / contain no-repeat;
}



/* ========== グループ枠（◯◯グループ） ========== */
.page-id-25 .group-block {
  --block-pad-x: 60px; /* group-block 左右 */
  --grid-pad-x: 50px; /* card-grid 左右 */
  --pad-top: 54px; /* group-block 上部の余白 */

  position: relative;
  background-color: #f8f7f4;
  padding: var(--pad-top) var(--block-pad-x); /* 上のみ余白。下はグリッド側で付与 */
}
/* グループ名：カードの左端（内側 = block + grid の合計）に揃える */
.page-id-25 .group-caption {
  position: absolute;
  left: calc(var(--block-pad-x) + var(--grid-pad-x));
  top: 80px;
  color: #8b877f;
  font-size: 16px;
  letter-spacing: 0.08em;
}
/* グループ内のカードグリッド（濃ベージュ背景／左右は変数から） */
.page-id-25 .group-block .card-grid {
  background-color: #ece9e4;
  padding: 60px var(--grid-pad-x);
}

/* ========== カードグリッド（単体） ========== */
.page-id-25 .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 68px;
  background-color: #f8f7f4;
  padding: 54px 110px; /* ※ group-block 配下では上の指定が勝つ */
}
@media (max-width: 1024px) {
  .page-id-25 .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 54px 40px;
  }
  /* ← 以前はここで .group-block の padding を 8px に上書きしていたため左揃えがズレていました。
        変数を更新するだけに変更（calc一貫） */
  .page-id-25 .group-block {
    --block-pad-x: 24px; /* 8 */
    --grid-pad-x: 24px; /* 24 -> 合計 32px（下のcaptionと一致） */
    --pad-top: 40px;
  }
  .page-id-25 .group-block .card-grid {
    padding: 60px var(--grid-pad-x);
  }
  .page-id-25 .group-caption {
    top: 65px;
    left: calc(var(--block-pad-x) + var(--grid-pad-x)); /* = 32px */
  }
}
@media (max-width: 640px) {
  .page-id-25 .card-grid {
    grid-template-columns: 1fr;
    padding: 54px 32px;
  }
  /* SP も変数で統一（calcで常に内側左に合う） */
  .page-id-25 .group-block {
    --block-pad-x: 0px;
    --grid-pad-x: 32px; /* = 左32px */
    --pad-top: 32px;
  }
  .page-id-25 .group-caption {
    left: calc(var(--block-pad-x) + var(--grid-pad-x));
	  top: 56px;
  }
}

/* ========== カード ========== */
.page-id-25 .inv-card {
  background: #fff;
  color: #5c524a;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border: 1px solid #ece9e4;
}
.page-id-25 .inv-card__bar {
  height: 8px;
  width: 100%;
  background: #b6a996;
}
.page-id-25 .inv-card--exited .inv-card__bar {
  background: #c9d6dc;
}

.page-id-25 .inv-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto; /* ← 高さ調整でフッターを押し下げる */
  min-height: 0;
}
.page-id-25 .inv-card__logo {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}
.page-id-25 .inv-card__logo img {
  max-width: 100%;
  max-height: 66px;
  object-fit: contain;
}

.page-id-25 .inv-card__name {
  height: auto;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 400;
  word-break: break-word;
  margin: 0 0 20px;
}
@media (max-width: 1024px) {
  .page-id-25 .inv-card__name {
    font-size: 22px;
  }
}
@media (max-width: 640px) {
  .page-id-25 .inv-card__name {
    height: auto;
    margin: 0;
  }
  .page-id-25 .inv-card__logo {
    padding: 40px 20px;
  }
}

/* ------- メタ領域（業種 / 投資時期） ------- */
.page-id-25 .inv-card__meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-id-25 .tag-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.page-id-25 .inv-card__desc {
  font-size: 12px;
}
.page-id-25 .tag-label {
  font-size: 14px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 300;
  color: #4d4d4d;
  background: #ece9e4;
  padding: 4px 8px;
  line-height: 1;
  width: 80px;
  text-align: center;
}
.page-id-25 .tag-text {
  flex: 1;
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 14px;
  font-weight: 400;
}

/* ▼ タブレットサイズ以下：1行目=70%・2行目=30% の2カラムにする */
@media (max-width: 1024px) {
  .page-id-25 .inv-card__meta {
    display: grid;
    grid-template-columns: 65% 30%;
    column-gap: 12px;
    row-gap: 24px;
  }
  .page-id-25 .inv-card__meta .tag-row {
    flex-direction: column;
    width: auto;
  }
  .page-id-25 .inv-card__meta .tag-label {
    width: 100%;
  }
  .page-id-25 .inv-card__meta .tag-row:nth-child(1) {
    grid-column: 1;
  }
  .page-id-25 .inv-card__meta .tag-row:nth-child(2) {
    grid-column: 2;
  }
  .page-id-25 .inv-card__meta .tag-row:nth-child(n + 3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 320px) {
  .page-id-25 .inv-card__meta .tag-label {
    font-size: 11px;
  }
}

/* ===== 各行ごとにボタン位置を揃える（実績カード） ===== */
.page-id-25 .card-grid {
  align-items: stretch;
}
.page-id-25 .card-grid > .inv-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.page-id-25 .inv-card__footer {
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid #ece9e4;
  display: flex;
  justify-content: center;
}
.page-id-25 .inv-card__footer--empty {
  min-height: 51px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ==== site-btn：テキスト中央 / アイコン右寄せ ==== */
.page-id-25 .site-btn {
  display: inline-block !important;
  width: 100%;
  position: relative;
  text-align: center;
  padding: 10px 14px 10px 14px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: #b6aa96;
  background: #fff;
  letter-spacing: 0.2em;
}
.page-id-25 .site-btn svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}
.page-id-25 .site-btn:hover {
  opacity: 0.9;
}

/* 常にフッター高さを確保（空でも同じ高さ） */
.page-id-25 .inv-card__footer {
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid #ece9e4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 51px; /* ← 以前の .inv-card__footer--empty と同値 */
}