/* ================= LC-8300: Left column responsive & centering ================ */
/* 初期化：ここから必要な最小ルールだけ足していきます（772–980調整用） */










/* ================= LC-8303: 764–980 固定レイアウト修正（縦積み＋2列カード） ================ */
@media (min-width: 764px) and (max-width: 980px) {

  /* 親をGridで1列に強制（他のflex row/nowrapより強い） */
  .columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
    column-gap: 0 !important;
  }

  /* 各カラムを全幅に統一（センター固定幅の打ち消しもここで） */
  .left-column,
  .center-column,
  #right-column-placeholder {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }


  /* 右カラムの固定を解除（sticky/fixed/float などをリセット） */
  #right-column-placeholder,
  #right-column-placeholder .right-column {
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* カードの2列化 */
  .type-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .type-container > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}









/* ================= LC-8304: 764–980 カード最大幅を制限して中央寄せ ================ */
@media (min-width: 764px) and (max-width: 980px) {
  :root{
    --card-max-764: 360px;   /* ← お好みで 320〜380 に調整OK */
    --grid-gap-764: 16px;
  }



  .type-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--grid-gap-764) !important;

    /* 2枚分＋ギャップ分だけに上限を設定して中央寄せ */
    max-width: calc(var(--card-max-764) * 2 + var(--grid-gap-764)) !important;
    margin-inline: auto !important;
  }

  /* 各カードの最大幅を固定し、セル内で中央に置く */
  .type-container > *{
    max-width: var(--card-max-764) !important;
    width: 100% !important;
    justify-self: center !important; /* セル中央寄せ */
  }
}



/* ================= LC-8305: 764–980 列幅固定で広がり防止 ================ */
@media (min-width: 764px) and (max-width: 980px) {
  :root{
    --card-max-764: 340px;   /* ← ここを180/320/360などに変更すれば即反映 */
    --grid-gap-764: 16px;
  }

  /* 2列の各トラック幅を “最大340px” に固定し、中央寄せ */
  .type-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, var(--card-max-764))) !important;
    justify-content: center !important;         /* 余白は左右に逃がす */
    gap: var(--grid-gap-764) !important;
  }

  /* 子要素も上限を超えないよう安全柵 */
  .type-container > *,
  .type-container > * > *{
    max-width: var(--card-max-764) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-self: center !important;
  }
}







/* ================= LC-8306: 764–980 カード列の最大幅を強制（center用セレクタで上書き） ================ */
@media (min-width: 764px) and (max-width: 980px) {
  :root{ --card-max-764: 340px; --grid-gap-764: 16px; }

  /* ← 既存の強いセレクタに合わせて上書き */
  .center-column > .type-container,
  main.main-content > .type-container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, var(--card-max-764))) !important;
    justify-content: center !important;                 /* 余白は左右へ */
    gap: var(--grid-gap-764) !important;
    max-width: calc(var(--card-max-764)*2 + var(--grid-gap-764)) !important;
    margin-inline: auto !important;
  }

  /* 子要素の横伸びガード（他のflex指定を無効化） */
  .center-column > .type-container > *,
  main.main-content > .type-container > *{
    flex: initial !important;
    max-width: var(--card-max-764) !important;
    width: 100% !important;
    justify-self: center !important;
    box-sizing: border-box !important;
  }
}