/* ══════════════════════════════════════════════════════════
   大分類ハブ — 共通カードグリッド (2026-09-11)
   既定: 細長い縦型カード 214×424 / 動画は停止(ポスター表示)
   hover: カードが 342px に拡張 + 動画再生 + 隣接カードが押し出される
   列数: 2→2列 / 3→3列 / 4→4列 / 5→2+3 / 6→3+3 (行は中央揃え)
   ══════════════════════════════════════════════════════════ */
.hgrid{
  width:1320px;max-width:calc(100% - 40px);margin:0 auto;
  display:flex;flex-direction:column;gap:26px;
}
.hgrid-row{display:flex;justify-content:center;gap:24px;align-items:flex-start}

.hgc{
  position:relative;display:block;overflow:hidden;text-decoration:none;isolation:isolate;
  flex:0 0 214px;width:214px;height:424px;border-radius:26px;
  transition:flex-basis .62s cubic-bezier(.16,1,.3,1),
             width .62s cubic-bezier(.16,1,.3,1),
             box-shadow .45s cubic-bezier(.16,1,.3,1);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.hgc:hover{flex-basis:342px;width:342px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.hgc:focus-visible{outline:3px solid #1F3DFF;outline-offset:4px}

/* メディア */
.hgc-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.hgc-vid,.hgc-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:brightness(.88);transition:filter .4s ease;
  -webkit-user-drag:none;pointer-events:none;
}
.hgc:hover .hgc-vid,.hgc:hover .hgc-img{filter:brightness(1)}

/* 下部グラデーション */
.hgc-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(18,20,24,0) 26%, rgba(18,20,24,.55) 46%,
    rgba(18,20,24,.86) 68%, rgba(18,20,24,.96) 100%);
}

/* テキスト + ボタン */
.hgc-body{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:block}
.hgc-title{
  display:block;color:#fff;font-weight:700;font-size:16px;line-height:22px;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hgc-desc{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  color:rgba(255,255,255,.88);font-weight:400;font-size:12px;line-height:17px;margin-top:9px;
}
.hgc-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:36px;margin-top:15px;border-radius:18px;background:#FAFAFA;
  transition:background-color .3s ease;
}
.hgc-btn-tx{color:#1A1A1A;font-weight:700;font-size:13px;line-height:1}
.hgc-btn-ar{
  position:absolute;right:16px;width:7px;height:7px;
  border-right:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;
  transform:rotate(-45deg);opacity:0;transition:opacity .3s ease;
}
.hgc:hover .hgc-btn-ar{opacity:1}

/* リンク未定のカード */
.hgc.is-disabled{cursor:default}
.hgc.is-disabled:hover{flex-basis:214px;width:214px;box-shadow:none}
.hgc.is-disabled:hover .hgc-vid,.hgc.is-disabled:hover .hgc-img{filter:brightness(.88)}

@media (prefers-reduced-motion:reduce){
  .hgc,.hgc-vid,.hgc-img,.hgc-btn-ar{transition:none}
}

/* 画面が狭い場合 — 行を折り返して縮小 */
@media (max-width:1200px){
  .hgrid{width:auto;max-width:calc(100% - 32px)}
  .hgrid-row{flex-wrap:wrap;gap:20px}
}

/* アイコン素材(明るい背景)のカード — 白文字のコントラストを確保 */
.hgc-icon .hgc-img{filter:brightness(.84)}
.hgc-icon:hover .hgc-img{filter:brightness(.96)}
.hgc-icon .hgc-shade{
  background:linear-gradient(180deg,
    rgba(16,18,22,0) 16%, rgba(16,18,22,.50) 36%,
    rgba(16,18,22,.88) 58%, rgba(16,18,22,.97) 100%);
}

/* 横1列固定 — 画面幅に応じてカードを縮小し、hover 拡張分まで収める */
.hgrid-row{flex-wrap:nowrap}
@media (max-width:1400px){
  .hgc{flex-basis:196px;width:196px}
  .hgc:hover{flex-basis:312px;width:312px}
  .hgc.is-disabled:hover{flex-basis:196px;width:196px}
}
@media (max-width:1240px){
  .hgc{flex-basis:172px;width:172px}
  .hgc:hover{flex-basis:274px;width:274px}
  .hgc.is-disabled:hover{flex-basis:172px;width:172px}
  .hgrid-row{gap:18px}
  .hgc-title{font-size:15px;line-height:20px}
  .hgc-desc{font-size:11.5px;line-height:16px}
}

/* タイトル内のカウントバッジ (例: 19社掲載) */
.hgc-title .hgc-badge{
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.20);font-size:10.5px;font-weight:700;font-style:normal;
  line-height:1.5;vertical-align:2px;white-space:nowrap;
}