// 変数

// カラー設定
$mainColorDark: #333333;
$mainColorMid: #858585;
$mainColorLight: #c1c1c1;
$mainColorXLight: #eaeaea;
$subColorDarker: #837447;
$subColorDark: #b69f59;
$subColorMid: #c9c0a5;
$subColorLight: #e4dfd2;
$accentColor01Dark: #c83c1e;
$accentColor01Mid: #de8a78;
$accentColor01Light: #eec4bb;
$accentColor02Dark: #46b4a5;
$accentColor02Mid: #90d2c9;
$accentColor02Light: #c7e8e4;
$accentColor03Dark: #f5e600;
$accentColor03Mid: #f9f066;
$accentColor03Light: #fcf7b2;

// フォント設定
$h1FontSize: 3.2rem;
$h2FontSize: 2.8rem;
$h3FontSize: 2.2rem;
$xxLargeFontSize: 2.4rem;
$xLargeFontSize: 2rem;
$largeFontSize: 1.8rem;
$mediumFontSize: 1.6rem;
$mSmallFontSize: 1.5rem;
$smallFontSize: 1.4rem;
$xSmallFontSize: 1.2rem;
$xxSmallFontSize: 1rem;

// 日本語のゴシック体
@mixin ff_japanese_thin_gothic {
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
}
// 日本語のゴシック体Bold
@mixin ff_japanese_thin_gothic_bold {
  font-family: a-otf-futo-go-b101-pr6n, sans-serif;
  font-weight: 500;
  font-style: normal;
}
// 日本語の明朝体
@mixin ff_japanese_mincho {
  font-family: dnp-shuei-mincho-pr6, sans-serif;
  font-weight: 400;
  font-style: normal;
}

// 欧文
@mixin ff_western_category_title {
  font-family: poynter-oldstyle-display, serif;
  font-weight: 400;
  font-style: normal;
}
// 中韓
@mixin ff_kr_cn_tw_thin_gothic {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-style: normal;
}
@mixin ff_kr_cn_tw_thin_gothic_bold {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-style: normal;
}


// line-height
$clearLineHeight: 1;
$xSmallLineHeight: 1.2;
$smallLineHeight: 1.4;
$mediumLineHeight: 1.6;
$largeLineHeight: 1.8;

// border-radius
$borderRadius_5px: 5px;
$borderRadius_10px: 10px;

// transition
$transition_c3s: .3s cubic-bezier(0.39, 0.575, 0.565, 1);
$transition_c5s: .5s cubic-bezier(0.39, 0.575, 0.565, 1);
$transition_1s: 1s cubic-bezier(0.39, 0.575, 0.565, 1);

// opcity
$opacity: .5;

// easing
$easing: cubic-bezier(1.000, 0.000, 0.000, 1.000);

// 米印インデント調整
@mixin indent {
  padding-left: 1em;
  text-indent: -1em;
}

// 最大横幅設定
@mixin maxWidth {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

// 横並び設定
@mixin flex {
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
	-ms-flex-pack: start;
  justify-content: flex-start;
}

// ボタンロールオーバー
@mixin btnEffect($fontColor, $bgColor) {
  position: relative;
  cursor: pointer;
  &:before {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    content: '';
    background: $bgColor;
    transition: $transition_c5s;
  }
  &:hover {
    color: $fontColor;
    background: transparent;
    &:before {
      right: auto;
      left: 0;
      width: 100%;
    }
    span {
      transition: $transition_c5s;
      border-color: $fontColor $fontColor transparent transparent;
      path{
        fill:$fontColor;
      }
    }
  }
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0;
  }
}

// テキストロールオーバー
@mixin textEffect($color) {
  position: relative;
  padding-bottom: 1px;
  &:before {
    content: '';
    position: absolute;
    display: block;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: $color;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform $transition_c5s;
  }
  &:hover {
    &::after {
      transform-origin: left;
      transform: scaleX(1);
      transition: transform $transition_c5s;
    }
  }
}

// テキストロールオーバー
@mixin textEffectMenu($color) {
  position: relative;
  padding-bottom: 4px;
  &:before {
    content: '';
    position: absolute;
    display: block;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4px;
    background-color: $color;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform $transition_c5s;
  }
  &:hover {
    &::after {
      transform-origin: left;
      transform: scaleX(1);
      transition: transform $transition_c5s;
    }
  }
}

// ブレイクポイント設定
$breakPoints: (
  'small': 'screen and (min-width: 481px)',
  'middle': 'screen and (min-width: 768px)',
  'demi': 'screen and (min-width: 959px)',
  'large': 'screen and (min-width: 1280px)',
);

@mixin mq($breakPoint) {
  @media #{map-get($breakPoints, $breakPoint)} {
    @content;
  }
}