/* =====================================================
   mindas. — column.css
   コラム系ページ専用スタイル（テーマカラー: グリーン）
   ===================================================== */

/* ── lower-hero グリーン上書き ─────────────────── */
.lower-title-en::after { background: var(--clr-column); }
.lower-title-en .h1st  { color: var(--clr-column); }

/* ── コラムリストページ基本レイアウト ────────────── */
.top-column { margin-bottom: var(--sp-xl); }

/* ── PC: #lower ページでは2カラムグリッド（quiz_list と統一） ── */
#lower .column-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  flex-direction: unset;
}
#lower .column-card {
  flex-direction: column;
}
#lower .column-card-img {
  width: calc(100% - 16px);
  margin: 8px auto 0;
  aspect-ratio: 5/2;
}

/* ── SP: 1カラム表示（クイズ一覧と統一） ───────────── */
@media (max-width: 767px) {
  #lower .column-slider-wrap { overflow: visible; }
  #lower .column-slider-wrap::after { display: none; }

  #lower .column-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    /* スライダー設定を解除 */
    flex-direction: unset;
    flex-wrap: unset;
    overflow-x: unset;
    scroll-snap-type: unset;
    padding: 0;
  }

  #lower .column-card {
    flex-direction: column;
    flex: unset;
    max-width: unset;
    scroll-snap-align: none;
  }

  #lower .column-card-img {
    width: calc(100% - 16px);
    margin: 6px auto 0;
    aspect-ratio: 5/2;
  }

  #lower .column-dots { display: none; }

  /* カード内コンパクト化（クイズ一覧と統一） */
  #lower .column-card-body {
    padding: 8px;
    gap: 6px;
  }
  #lower .column-card-body h2,
  #lower .column-card-body h3 {
    font-size: var(--fs-base);
    line-height: 1.5;
  }

  /* 「続きを読む」ボタン（クイズの btn-quiz と統一） */
  #lower .column-card-body .btn-more {
    display: flex;
    width: 100%;
    font-size: var(--fs-xs);
    padding: 6px 8px;
    gap: 4px;
    margin: 8px 0 4px;
  }
  #lower .column-card-body .btn-more i {
    font-size: var(--fs-sm);
  }
}

/* ── さらに読み込みで表示される追加リスト ── */
#col-list-more {
  margin-top: var(--sp-md);
}

/* ── さらに読み込むボタン ────────────────────────── */
.col-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: var(--sp-lg) 0 var(--sp-md);
}
/* BUTTON SYSTEM が適用される（追加スタイルのみ） */
.btn-col-load {
  margin: var(--sp-md) auto 0;
  width: fit-content;
}
.btn-col-load i {
  font-size: 1.1em;
  transition: transform var(--tr);
}
.btn-col-load:hover i {
  transform: translateY(2px);
}
@media (max-width: 767px) {
  .btn-col-load {
    width: 100%;
    max-width: 320px;
  }
}

/* ── #lower コラムカード「続きを読む」全幅（quiz_listと統一） ── */
#lower .column-card-body .btn-more {
  width: 100%;
  align-self: stretch;
}