/* l-inner レイアウトコンポーネント *

/* =========================================
   l-inner レイアウトコンポーネント
   ========================================= */
.l-inner {
  /* カスタムプロパティ（プライベート変数） */
  --_max-width: var(
    --width__contents,
    1240
  ); /* 最大の横幅（左右の余白を除く） */
  --_padding-inline: var(--space-inline__base, 25); /* 左右の余白 */
  --_padding-right: var(--_padding-inline); /* 右の余白 */
  --_padding-left: var(--_padding-inline); /* 左の余白 */
  --_padding-inline__total: calc(var(--_padding-right) + var(--_padding-left));

  max-width: calc(
    (var(--_max-width) * 1px) +
      calc(var(--_padding-inline__total) * 1rem / var(--font-size__base))
  );
  margin-inline: auto;
  padding-right: calc(var(--_padding-right) * 1rem / var(--font-size__base));
  padding-left: calc(var(--_padding-left) * 1rem / var(--font-size__base));
}

@media (max-width: 767px) {
  .l-inner {
    --_max-width: var(--max-width__base, 680);
  }
}

.l-inner--fluid {
  max-width: calc(
    calc(var(--_max-width) * 1rem / var(--font-size__base)) +
      calc(var(--_padding-inline__total) * 1rem / var(--font-size__base))
  );
}

@media (min-width: 768px) {
  .l-inner--800 {
    --_max-width: 800;
  }

  .l-inner--1000 {
    --_max-width: 1000;
  }

  .l-inner--1100 {
    --_max-width: 1100;
  }

  .l-inner--1200 {
    --_max-width: 1180;
  }

  .l-inner--1400 {
    --_max-width: 1400;
  }

  .l-inner--1600 {
    --_max-width: 1600;
  }

  .l-inner--1840 {
    --_max-width: 1840;
  }
}

@media (max-width: 767px) {
  .l-inner--324 {
    --space-inline__base: 42;
  }
}

/* 左側だけはみ出すインナー */
.l-inner--release-left {
}

.l-inner--release-left .l-inner__content {
  margin-left: calc(50% - var(--js-width__viewport) / 2);
  padding-left: calc(var(--js-width__viewport) / 2 - 50%);
}

/* 右側だけはみ出すインナー */
.l-inner--release-right {
}

.l-inner--release-right .l-inner__content {
  margin-right: calc(50% - var(--js-width__viewport) / 2);
  padding-right: calc(var(--js-width__viewport) / 2 - 50%);
}