/* =========================================
   Layout Foundations (1080 tight)
   ========================================= */

:root{
  --container-max: 1080px;
  --gutter-sp: 10px;
}

/* 全体 */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body{ margin: 0; }

/* =========================================
   Containers
   -----------------------------------------
   - .l-container : 通常コンテンツ（max 1080 / PCはpadding 0）
   - .l-full      : 背景を画面幅いっぱい
   - .l-full-bleed: FVなど制約なし
   ========================================= */

/* 通常コンテンツの箱：基本は1080ビッタビタ（padding 0） */
.l-container{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* 画面が狭い時だけ左右10px確保（SP余白ルール） */
@media (max-width: 1100px){
  .l-container{
    padding-left: var(--gutter-sp);
    padding-right: var(--gutter-sp);
  }
}

/* 背景や帯を画面幅いっぱいに */
.l-full{
  width: 100%;
}

/* FVなど、コンテナ制約を外す */
.l-full-bleed{
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* main */
.site-main{ display: block; }