@charset "UTF-8";

/*==================================================
  Layout (layout.css)
  Shamham Theme

  役割: サイト全体の「幅」と「カラム配置」をここで一元管理する。

  - ヘッダー内側 (#header-container-in) と
    コンテンツ内側 (#content-in) を同じ max-width で中央寄せ
    → ロゴ左端と記事エリア左端が揃う
  - #content-in を flex 化して
    メイン + サイドバーの2カラムと間隔を明示的に指定
    → 親テーマCSSの構造依存をなくす

  幅を変えたいときは下の3つの変数だけ触ればOK。
==================================================*/

:root{
  --site-width:1236px;   /* サイト全体の幅 */
  --sidebar-width:336px; /* サイドバーの幅 */
  --column-gap:28px;     /* メインとサイドバーの間隔 */
}

/*--------------------------------------------------
  PCのみ (Cocoonのデスクトップ判定 1023px以上)
--------------------------------------------------*/
@media (min-width:1023px){

  /* 幅と中央寄せ: ヘッダーとコンテンツで共通 */
  #header-container-in,
  #content-in{
    width:100%;
    max-width:var(--site-width);
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }

  /* 2カラムレイアウト */
  #content-in{
    display:flex;
    align-items:flex-start;
    gap:var(--column-gap);
  }

  #main{
    flex:1;
    min-width:0; /* テーブル等ではみ出さないための保険 */
    margin:0;
  }

  #sidebar{
    width:var(--sidebar-width);
    flex-shrink:0;
    margin:0;
  }

}

/*--------------------------------------------------
  画面幅がサイト幅より狭いPCでは、
  ヘッダーとコンテンツに同じ左右余白を付けて
  「揃えたまま」画面端から離す
--------------------------------------------------*/
@media (min-width:1023px) and (max-width:1279px){

  #header-container-in,
  #content-in{
    padding-left:18px;
    padding-right:18px;
  }

}