/* =========================================================
   Container / Layout base
   file: assets/css/2_layout/container.css
   依存: assets/css/0_tokens/tokens.css
========================================================= */

/* 1) トークン橋渡し（fallback 付き） */
:root{
  --container-max: var(--wan-container-xl, 1056px);
  --container-pad: var(--wan-container-padding, 16px);
}

/* 2) 基本のコンテナ群（SWELL互換含む） */
.l-container,
.container,
#content_inner,
.content_inner{
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
	padding-top:0;
	margin-top:var(--wan-space-4);
}

/* 3) SWELL主要エリアをセンター&左右余白（必要に応じて追加） */
:where(
  .l-main,              /* 本文+サイドバーの外側 */
  .p-breadcrumb,
  .post_content,        /* 記事本文 */
  .p-contents,
  .p-fixedFooter__inner,
  .w-beforeFooter,
  .l-footer__inner
){
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* 4) 例外：全幅にしたい所（親・子どちらにも効く） */
.is-fullwidth,
.is-fullwidth :where(.l-container, .l-main, .post_content){
  max-width: none;
  padding-inline: 0;
}

/* 5) 大画面で少しだけ広げたい（任意） */
@media (min-width: 1440px){
  :where(.l-container, .l-main, .post_content, .p-breadcrumb){
    max-width: 1120px;
  }
}