@charset "UTF-8";

/* ==========================================================================
   layout.css
   全体レイアウト（土の上の骨格）
   目的：
   - サイト最大幅の定義
   - 横余白の基準管理
   - container責務のみ
   ========================================================================== */

/* --------------------------------------------------------------------------
   01) Site Width Base
   -------------------------------------------------------------------------- */

:root {
  --site-max: 1150px;

  /* 横余白 */
  --pad-pc: 40px;
  --pad-tab: 30px;
  --pad-sp: 16px;
}

/* --------------------------------------------------------------------------
   02) Container
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--site-max), 100% - (var(--pad-pc) * 2));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   03) Responsive Padding Control
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .container {
    width: min(var(--site-max), 100% - (var(--pad-tab) * 2));
  }
}

@media (max-width: 767px) {
  .container {
    width: min(var(--site-max), 100% - (var(--pad-sp) * 2));
  }
}