@charset "UTF-8";

// ============================================================
//  _assets.scss
//
//    1.0 - Variables
//
//    2.0 - Mixin
//      2.1 - Mixin /add
//
// ============================================================




// ============================================================
// 1.0 - Variables
// ============================================================

  // 1.1 - font-style
  // ==================================================
  $font_size: 14px;
  $font_family_mincho: "ヒラギノ明朝 Pro W3", "HiraMinPro-W3", "游明朝", "YuMincho", "Yu Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  $font_family_gothic: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "YuGothic", verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;


  // 1.2 - width, space
  // ==================================================
  $max_width: 980;
  $breakpoint: 767;
  $space: 20px;

  $header_h: 50px;
  $drawer_w: 260px;


  // 1.3 - color
  // ==================================================
  //  base, light, darkの設定
  //  色の出力例 / color: color(black, light);
  // ==================================================
  $palettes: (
      white: (
          base:  #fff,
          dark:  #f3f3f3
      ),
      black: (
          base:  #000,
          light: #333
      ),
      gray: (
          base:  #ccc,
          light: #e7e7e7,
          dark:  #767676
      ),
      red: (
          base:  #b71a16,//
          light: lighten(#b71a16, 10%),//
          dark:  darken(#b71a16, 10%)//
      ),
      pink: (
          base:  #F7CAC9,//
          light: lighten(#F7CAC9, 10%),//
          dark:  darken(#F7CAC9, 10%)//
      ),
      magenta: (
          base:  lighten(#ba1f5f, 10%),
          light: lighten(#ba1f5f, 20%),
          dark:  #ba1f5f
      ),
      orange: (
          base:  #fe911d,
          light: #edaf8d,
          dark:  darken(#fe911d, 10%)//
      ),
      yellow: (
          base:  lighten(#c18d13, 10%),
          light: lighten(#c18d13, 20%),
          dark:  #c18d13
      ),
      green: (
          base:  lighten(#599628, 10%),
          light: lighten(#599628, 20%),
          dark:  #599628
      ),
      mint: (
          base:  #5abeb2,
          light: #7ec9c3,
          dark:  darken(#5abeb2, 10%)
      ),
      turquoise: (
          base:  #4bbecc,
          light: lighten(#4bbecc, 10%),
          dark:  #2ac0c9
      ),
      sky: (
          base:  darken(#e5ecf8, 10%),
          light: #e5ecf8,
          dark:  darken(#e5ecf8, 10%)
      ),
      blue: (
          base:  #3151a2,
          light: #2868d5,
          dark:  #023894
      ),
      indigo: (
          base:  #859fd2,
          light: #b7c9e9,
          dark:  #1a6fa0
      ),
      lavender: (
          base:  #626bd8,
          light: lighten(#626bd8, 10%),
          dark:  darken(#626bd8, 10%)
      ),
      purple: (
          base:  #8a7db9,
          light: lighten(#8a7db9, 10%),
          dark:  darken(#8a7db9, 10%)
      ),
      taupe: (
          base:  lighten(#615d4c, 10%),
          light: lighten(#615d4c, 20%),
          dark:  #615d4c
      )
  );

  // `map-get()`関数をネストして値を取得する。
  // ネストしたvelueのデフォルトはbaseとする。
  // ==================================================
  @function color($key, $tone: base) {
      @return map-get( map-get($palettes, $key), $tone);
  }


  // Floor Color
  // ==================================================
  $floor_color: (
    office:    color(yellow, dark),
    serviceap: color(indigo, dark),
    business: color(green, dark),
    bus: color(green, dark),
    shop:      color(magenta, dark),
    parking:   color(turquoise, dark)
  );


  // 付与するベンダープレフィックス
  // ==================================================
  $set_prefix: -webkit-, -moz-, -ms-, -o-, '';








// ============================================================
// 2.0 - Mixin
// ============================================================
  @mixin border-radius($radius) {
    @each $prefix in $set_prefix {
      #{$prefix}border-radius: $radius;
    }
  }

  @mixin box-shadow($value...) {
    @each $prefix in $set_prefix {
      #{$prefix}box-shadow: $value;
    }
  }

  @mixin box-sizing($value) {
    @each $prefix in $set_prefix {
      #{$prefix}box-sizing: $value;
    }
  }

  @mixin breakpoint($width: $breakpoint) {  //default:SP
    @media screen and (max-width: $width + "px") {
      @content;
    }
  }

  @mixin breakpoint-set($min: $breakpoint + 1, $max: $max_width - 1) {  //default:tablet
    @media screen and (min-width: $min + "px") and (max-width: $max + "px") {
      @content;
    }
  }

  @mixin breakpoint-max($width: $max_width ) {  //default:PC
    @media screen and (min-width: $width + "px") {
      @content;
    }
  }

  //クラス名（idかclassか）,背景色か,文字色か
  // ==================================================
  @mixin set-color( $class: '.', $bg_color: true, $font_color: false ) {
    @each $name, $color in $set_color {
      &#{$class}#{$name} {
        @if $bg_color == true {
          background-color: $color;
        }
        @if $font_color == true {
          color: $color;
        }
      }
    }
  }

  @mixin filter($filter) {
    @each $prefix in $set_prefix {
      #{$prefix}filter: $filter;
    }
  }

  //(高さ / 横幅) × 100 = padding-bottomの%(パーセント)
  // ==================================================
  @mixin imagePercentage( $width, $height ) {
    padding-top: percentage($height / $width);
  }

  @mixin linear-gradient($value...) {
    @each $prefix in $set_prefix {
      #{$prefix}linear-gradient: $value;
    }
  }

  @mixin opacity($value) {
    filter: alpha(opacity = $value*100);
    -moz-opacity: ($value);
    opacity: ($value);
  }

  @mixin smoothing($value: '') {
    @if $value == 'none' {
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
    } @else {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  @mixin text-shadow($value...) {
    @each $prefix in $set_prefix {
      #{$prefix}text-shadow: $value;
    }
  }

  @mixin transform($value...) {
    @each $prefix in $set_prefix {
      #{$prefix}transform: $value;
    }
  }

  @mixin transition($value...) {
    @each $prefix in $set_prefix {
      #{$prefix}transition: $value;
    }
  }


  // 2.1 - Mixin / Class
  // ==================================================
  @mixin inline-block() {
    font-size: 0;
    list-style: none;
    >* {
      display: inline-block;
      vertical-align: top;
      font-size: $font_size;
    }
  }  //inline-block()

  @mixin table-cell() {
    display: table;
    width: 100%;
    table-layout: fixed;
    >* {
      display: table-cell;
      vertical-align: top;
    }

    &.none-tablet {
      @include breakpoint-set {  //tablet
        display: block;
        >* {
          display: block;
        }
      }
    }

    &.none-sp {
      @include breakpoint {  //SP
        display: block;
        >* {
          display: block;
          max-width: 100%;
        }
      }
    }
  }  //table-cell()

  @mixin icon-arrow() {
    position: absolute;
    content: '';
    margin: auto 0;
    top: 0; bottom: 0;
    width: 16px; height: 16px;
    background: url(../img/common/icon_arrow.png) no-repeat;
    background-size: auto 100px;
  }