/* Letslearn.html 専用（競合回避のため ll- 接頭辞のみ） */

.ll-hero{
  grid-template-columns: 1.2fr 0.8fr;
}

.ll-hero-right{
  display:flex;
  justify-content:flex-end;
}

.ll-note{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:14px;
  width:100%;
}

.ll-notetitle{
  font-weight:800;
  margin-bottom:8px;
}

.ll-bullets{
  margin:0;
  padding-left: 1.2em;
  color:var(--muted);
  line-height:1.7;
}

/* まずはこの4本：PCは4列 */
.cards.ll-grid2{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* サムネは16:9で統一（大きさはカード幅に追従） */
.ll-pick-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid var(--line);
}

/* タブレット：2列 */
@media (max-width: 980px){
  .cards.ll-grid2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホ：1列 */
@media (max-width: 560px){
  .cards.ll-grid2{
    grid-template-columns: 1fr;
  }
}

.ll-vcard{
  padding:0;            /* 既存 .card の padding を上書き（このカードだけ） */
  overflow:hidden;
}

.ll-thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
}

.ll-vbody{
  padding:12px 14px;
}

.ll-muted{
  color:var(--muted);
  font-size:12px;
  margin:10px 0 0;
}

.ll-details{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}

.ll-details summary{
  cursor:pointer;
  font-weight:800;
  list-style: none;
}

.ll-details summary::-webkit-details-marker{
  display:none;
}

.ll-details summary::after{
  content:"▼";
  float:right;
  color:var(--muted);
}

.ll-details[open] summary::after{
  content:"▲";
}

.ll-detailsbody{
  padding-top:12px;
}

.ll-next{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* スマホ */
@media (max-width: 860px){
  .ll-hero{ grid-template-columns: 1fr; }
  .cards.ll-grid2{ grid-template-columns: 1fr; }
}