@charset "UTF-8";
/*
  /asuracore/asset/css/layout/l-common.css
  コンテンツ幅、セクション縦余白、全体レイアウト系を定義

  セクション間の縦余白はこのファイルが単一の管理元です。
  セクション個別のCSSで margin-top / margin-bottom を追加しないでください。
*/

/* メインコンテンツ（固定ヘッダー分の上余白） */
.l-common-main {
  padding: 105px 0 0 0;

  @media screen and (max-width: 1024px) {
    padding: 50px 0 0 0;
  }

  &.l-common-main--no-header {
    padding: 0;
  }
}

/* セクション */
.l-common-section {
  padding: 70px 0;

  @media screen and (max-width: 840px) {
    padding: 50px 0;
  }

  /* 上余白なし */
  &.l-common-section--nopadding {
    padding: 0 0 70px;

    @media screen and (max-width: 840px) {
      padding: 0 0 50px;
    }
  }

  /* 上余白を圧縮 */
  &.l-common-section--small-padding {
    padding: 30px 0 70px;

    @media screen and (max-width: 840px) {
      padding: 20px 0 50px;
    }
  }
}

/* コンテンツ幅 */
.l-common-section__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  @media screen and (max-width: 1200px) {
    padding: 0 20px;
    max-width: 100%;
  }
}

/*
  隣接セクションの余白圧縮。背景色が同じ場合のみ、境界の二重余白を自動で圧縮する。
  .l-common-section--keep を付けると圧縮しない（opt-out）。
*/

/* PC：前セクションの下余白と次セクションの上余白を50pxへ */
@media screen and (min-width: 841px) {
  /* 白 × 白 */
  .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep):has(
      + .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep)
    ) {
    padding-bottom: 50px;
  }
  .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep)
    + .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep) {
    padding-top: 50px;
  }

  /* 白背景Utility同士 */
  .l-common-section.u-color-bg-white:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-white:not(.l-common-section--keep)
    ) {
    padding-bottom: 50px;
  }
  .l-common-section.u-color-bg-white:not(.l-common-section--keep)
    + .l-common-section.u-color-bg-white:not(.l-common-section--keep) {
    padding-top: 50px;
  }

  /* ベース背景同士 */
  .l-common-section.u-color-bg-base:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-base:not(.l-common-section--keep)
    ) {
    padding-bottom: 50px;
  }
  .l-common-section.u-color-bg-base:not(.l-common-section--keep)
    + .l-common-section.u-color-bg-base:not(.l-common-section--keep) {
    padding-top: 50px;
  }

  /* グレー背景同士 */
  .l-common-section.u-color-bg-gray:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-gray:not(.l-common-section--keep)
    ) {
    padding-bottom: 50px;
  }
  .l-common-section.u-color-bg-gray:not(.l-common-section--keep)
    + .l-common-section.u-color-bg-gray:not(.l-common-section--keep) {
    padding-top: 50px;
  }
}

/* SP：前セクションの下余白を0に */
@media screen and (max-width: 840px) {
  /* 白 × 白 */
  .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep):has(
      + .l-common-section:not([class*="u-color-bg-"]):not(.l-common-section--keep)
    ) {
    padding-bottom: 0;
  }

  /* 白背景Utility同士 */
  .l-common-section.u-color-bg-white:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-white:not(.l-common-section--keep)
    ) {
    padding-bottom: 0;
  }

  /* ベース背景同士 */
  .l-common-section.u-color-bg-base:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-base:not(.l-common-section--keep)
    ) {
    padding-bottom: 0;
  }

  /* グレー背景同士 */
  .l-common-section.u-color-bg-gray:not(.l-common-section--keep):has(
      + .l-common-section.u-color-bg-gray:not(.l-common-section--keep)
    ) {
    padding-bottom: 0;
  }
}

/* 2カラムレイアウト */
.l-common-2column {
  display: flex;
  flex-wrap: wrap;
}

.l-common-2column-main {
  width: calc(100% - 250px);
  padding: 0 60px 0 0;

  @media screen and (max-width: 840px) {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
  }
}

.l-common-2column-side {
  width: 250px;

  @media screen and (max-width: 840px) {
    width: 100%;
    padding: 0 20px;
  }
}