@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● column.css                                          */
/*    共通部品                                            */
/*    ・段組み                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Column Setting                                 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ColumnGroup
--------------------------------------------------- */
.ColumnGroup{
  display: flex;
  // justify-content: center;
  // justify-content: left;
  justify-content: space-between;
  flex-wrap: wrap;
}
    /* - - column common - -  */
    .ColumnGroup > .Column{
      width: 100%;
      margin-left: initial;
      margin-right: initial;
      
      //display: inline-block;
      //vertical-align: top;
      
    }
    .ColumnGroup:not(.NoMargin) > .Column{
      // margin-top: 1em;
      // margin-bottom: 1em;
    }
    
    
    /* 要素数をクラス名に持たせて自動配置 ※ulにクラス名をつけて使用  */
    /* ColumnGroup（数字）elements が横並び数（幅に応じて変化）       */
    
    $column-spacing: 0.0625;  //カラム数が1より大きいときにつける余白（大きいほど広い余白）

    /* - - two columns - - */
    .ColumnGroup2elements{
      > .Column{
        width: calc(100% / (2 + #{$column-spacing}));
      }
      &:not(.FixedNumber){
        @include media-query(under-bp-m) {
          > .Column{
            width: calc(100% / 1);
          }
        }
      }
    }

    /* - - three columns - - */
    .ColumnGroup3elements{
      > .Column{
        width: calc(100% / (3 + #{$column-spacing}));
      }
      &:not(.FixedNumber){
        @include media-query(under-bp-m) {
          > .Column{
            width: calc(100% / 1);
          }
        }
      }
    }

    /* - - four columns - - */
    .ColumnGroup4elements{
      > .Column{
        width: calc(100% / (4 + #{$column-spacing}));
      }
      &:not(.FixedNumber){
        @include media-query(under-bp-m) {
          > .Column{
            width: calc(100% / (2 + #{$column-spacing}));
          }
        }
      }
    }

    /* - - five columns - - */
    .ColumnGroup5elements{
      > .Column{
        width: calc(100% / (5 + #{$column-spacing}));
      }
      &:not(.FixedNumber){
        @include media-query(under-bp-m) {
          > .Column{
            width: calc(100% / (2 + #{$column-spacing}));
          }
        }
      }
    }

    /* - - six columns - - */
    .ColumnGroup6elements{
      > .Column{
        width: calc(100% / (6 + #{$column-spacing}));
      }
      &:not(.FixedNumber){
        @include media-query(under-bp-m) {
          > .Column{
            width: calc(100% / (2 + #{$column-spacing}));
          }
        }
      }
    }