.vf-section {
  background: #fff;
  margin: 0 auto;
  padding: 2.5rem 4% 20px;
}
.vf-results{
  max-width:1280px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* 1件の行（丸ごとクリック） */
.vf-result{
  display:flex;
  gap:12px;
  text-decoration:none;
  padding:10px;
  border-radius: 4px;
  transition:background .15s ease, transform .05s ease;
  align-items:flex-start;
}
.vf-result:hover{ background:#f5f7f9; }
.vf-result:active{ transform:translateY(1px); }

/* サムネ（16:9固定） */
.vf-thumb{
  flex:0 0 196px;            /* PC基準の幅 */
  max-width:196px;
  aspect-ratio:16/9;
  border-radius: 4px;
  overflow:hidden;
  background:#e9ecef;
}
.vf-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 右側テキスト領域 */
.vf-meta{
  min-width:0;               /* 省略記号を効かせるため */
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* タイトル */
.vf-title{
  margin:0;
  font-size:1.05rem;
  line-height:1.35;
  color:#111;
  display:-webkit-box;
  -webkit-line-clamp:2;      /* 2行で省略 */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* サブ行（再生数など） */
.vf-sub{
  font-size:.88rem;
  color:#6b7280;
  display:flex;
  gap:10px;
  align-items:center;
}

/* レスポンシブ */
@media (max-width:980px){
  .vf-thumb{ flex-basis:168px; max-width:168px; }
}
@media (max-width:720px){
  .vf-result{ gap:10px; padding:8px; }
  .vf-thumb{ flex-basis:40%; max-width:40%; }
  .vf-title{ font-size:1rem; -webkit-line-clamp:2; }
}
@media (max-width:520px){
  .vf-result{ flex-direction:column; }
  .vf-thumb{ width:100%; max-width:none; }
  .vf-title{ -webkit-line-clamp:3; }
}