/**
 * 変数
 */

// RWDのブレークポイント
$breakPoint: 768px;

// カラム間のマージン
$multiColumnGridMargin: 20px;

// RWDでカラムが落ちた時の下マージン
$multiColumnGridMarginBottomWhenClearedFloat: 20px;

// ボタンのフォーカス時のカラー
$btnGlowColor: #0570c7;

// トリム画像ブロックの縦横比
$trimImageAspectRatio: 1; // 4:3の場合は3/4

/** ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- *
 *
 * フォントの定義
 * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
 * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 *
 * ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- **/
@font-face {
  font-family: FontAwesome;
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
  url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
  url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),
  url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

// ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- /
// グリッドシステム
//
// 編集非推奨
//
// ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- /
$span1: 8.3333%;
$span2: 16.6666%;
$span3: 25%;
$span4: 33.3333%;
$span5: 41.6666%;
$span6: 50%;
$span7: 58.3333%;
$span8: 66.6666%;
$span9: 75%;
$span10: 83.3333%;
$span11: 91.6666%;
$span12: 100%;
$divide5: 20%; // 12グリッドシステムでは再現できない5分割

// ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- /
//
// ミックスイン
//
// ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- /
@mixin bge-icon {
  font-family: FontAwesome, serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/** ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- *
 *
 * マルチカラムブロックのレイアウト
 *
 * ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- **/

%column2-layout {
  /* 2列ブロック */
  .bgt-grid {
    /* 2列ブロック内 レイアウト用コンテナ */
    width: $span6;
    float: left;

    @media screen and (max-width: $breakPoint) {
      width: 100%;
      float: none;

      [data-bgt] > :last-child {
        /* 下マージンはブロック内のタイプの要素に対して指定する (空画像対策) */
        margin-bottom: $multiColumnGridMarginBottomWhenClearedFloat;

        &[data-bge-empty='1'] {
          margin-bottom: 0;
        }
      }

      &:last-child,
      &[class*='bgt-sp-grid'] {
        [data-bgt] > :last-child {
          margin-bottom: 0;
        }
      }
    }

    &:nth-child(1) {
      /* 2列ブロック内 レイアウト用最初のコンテナ */
      padding-right: ($multiColumnGridMargin / 2);

      @media screen and (max-width: $breakPoint) {
        padding-right: 0;
      }
    }

    &:nth-child(2) {
      /* 2列ブロック内 レイアウト用最後のコンテナ */
      padding-left: ($multiColumnGridMargin / 2);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
      }
    }
  }
}

%column3-layout {
  /* 3列ブロック */
  .bgt-grid {
    /* 3列ブロック内 レイアウト用コンテナ */
    width: $span4;
    float: left;
    padding-left: ($multiColumnGridMargin * 1 / 3);
    padding-right: ($multiColumnGridMargin * 1 / 3);

    @media screen and (max-width: $breakPoint) {
      width: 100%;
      float: none;
      padding-left: 0;
      padding-right: 0;

      [data-bgt] > :last-child {
        /* 下マージンはブロック内のタイプの要素に対して指定する (空画像対策) */
        margin-bottom: $multiColumnGridMarginBottomWhenClearedFloat;

        &[data-bge-empty='1'] {
          margin-bottom: 0;
        }
      }

      &:last-child,
      &[class*='bgt-sp-grid'] {
        [data-bgt] > :last-child {
          margin-bottom: 0;
        }
      }
    }

    &:nth-child(1) {
      /* 3列ブロック内 レイアウト用最初のコンテナ */
      padding-left: 0;
      padding-right: ($multiColumnGridMargin * 2 / 3);

      @media screen and (max-width: $breakPoint) {
        padding-right: 0;
      }
    }

    &:nth-child(3) {
      /* 3列ブロック内 レイアウト用最初のコンテナ */
      padding-left: ($multiColumnGridMargin * 2 / 3);
      padding-right: 0;

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
      }
    }
  }
}

%column4-layout {
  /* 4列ブロック */
  .bgt-grid {
    /* 4列ブロック内 レイアウト用コンテナ */
    width: $span3;
    float: left;

    @media screen and (max-width: $breakPoint) {
      width: 100%;
      float: none;

      [data-bgt] > :last-child {
        /* 下マージンはブロック内のタイプの要素に対して指定する (空画像対策) */
        margin-bottom: $multiColumnGridMarginBottomWhenClearedFloat;

        &[data-bge-empty='1'] {
          margin-bottom: 0;
        }
      }

      &:last-child,
      &[class*='bgt-sp-grid'] {
        [data-bgt] > :last-child {
          margin-bottom: 0;
        }
      }
    }

    &:nth-child(1) {
      /* 4列ブロック内のコンテナ */
      padding-left: 0;
      padding-right: ($multiColumnGridMargin * 3 / 4);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(2) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 1 / 4);
      padding-right: ($multiColumnGridMargin * 2 / 4);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(3) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 2 / 4);
      padding-right: ($multiColumnGridMargin * 1 / 4);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(4) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 3 / 4);
      padding-right: 0;

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}

%column5-layout {
  /* 5列ブロック */
  .bgt-grid {
    /* 5列ブロック内 レイアウト用コンテナ */
    width: $divide5;
    float: left;

    @media screen and (max-width: $breakPoint) {
      width: 100%;
      float: none;

      [data-bgt] > :last-child {
        /* 下マージンはブロック内のタイプの要素に対して指定する (空画像対策) */
        margin-bottom: $multiColumnGridMarginBottomWhenClearedFloat;

        &[data-bge-empty='1'] {
          margin-bottom: 0;
        }
      }

      &:last-child,
      &[class*='bgt-sp-grid'] {
        [data-bgt] > :last-child {
          margin-bottom: 0;
        }
      }
    }

    &:nth-child(1) {
      /* 4列ブロック内のコンテナ */
      padding-left: 0;
      padding-right: ($multiColumnGridMargin * 4 / 5);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(2) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 1 / 5);
      padding-right: ($multiColumnGridMargin * 3 / 5);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(3) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 2 / 5);
      padding-right: ($multiColumnGridMargin * 2 / 5);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(4) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 3 / 5);
      padding-right: ($multiColumnGridMargin * 1 / 5);

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &:nth-child(5) {
      /* 4列ブロック内のコンテナ */
      padding-left: ($multiColumnGridMargin * 4 / 5);
      padding-right: 0;

      @media screen and (max-width: $breakPoint) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}