@use "sass:map";
@use "sass:math";




/* ブレイクポイント指定 */

$pc: 1600px; // PC
$pc_m: 1400px; // PC_M
$tab: 1100px; // タブレット
$sp: 768px; // スマホ

$mobail-max: 769px;

$xs-max: 575.98px;
$sm-max: 767.98px;
$md-max: 991.98px;
$lg-max: 1199.98px;

$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;

@mixin pc {
  @media (max-width: $pc) {
    @content;
  }
}

@mixin pc_m {
  @media (max-width: $pc_m) {
    @content;
  }
}

@mixin pc-only {
  @media (min-width: $mobail-max) {
    @content;
  }
}

@mixin tab {
  @media (max-width: $tab) {
    @content;
  }
}

@mixin sp {
  @media (max-width: $sp) {
    @content;
  }
}

$breakpoint: (
  sp: "screen and (max-width: 749px)",
  pc: "screen and (min-width: 750px)",
);

$breakpoint-up: (
  xs: "screen and (min-width: 540px)",
  sm: "screen and (min-width: 769px)",
  md: "screen and (min-width: 901px)",
  lg: "screen and (min-width: 1025px)",
  xl: "screen and (min-width: 1400px)",
  xxl: "screen and (min-width: 1920px)",
  ) !default;

$breakpoint-down: (
  xs: "screen and (max-width: 539px)",
  sm: "screen and (max-width: 768px)",
  md: "screen and (max-width: 900px)",
  lg: "screen and (max-width: 1024px)",
  xl: "screen and (max-width: 1399px)",
  xxl: "screen and (max-width: 1919px)",
  ) !default;

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

@mixin mq-up($bp: sm) {
  @media #{map-get($breakpoint-up, $bp)} {
    @content;
  }
}

@mixin mq-down($bp: sm) {
  @media #{map-get($breakpoint-down, $bp)} {
    @content;
  }
}

@mixin trans_x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%
  );
}

@mixin trans_y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin trans_xy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin flex-sb {
  display: flex;
  justify-content: space-between;
}

@mixin flex-all-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin bg-cover {
  background: no-repeat 50% 50% / cover;
}

@mixin bg-gold-gd {
  background: rgb(168, 126, 42);
  background: linear-gradient(90deg, rgba(168, 126, 42, 1) 0%, rgba(219, 180, 110, 1) 50%, rgba(168, 126, 42, 1) 100%);
}


/* 

フォント読み込み

⚫︎使い方

@include font-face('Lora', 'fonts/Lora', 400, italic, ttf);
@include font-face('Samplinal', 'fonts/Samplinal', bold, normal, eot woff2 woff);
-----------------------------------------------------------------------------------*/



@mixin font-face($family, $path, $weight: normal, $style: normal, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: '?',
    svg: '#' + str-replace($family, ' ', '_'),
  );

$formats: (
  otf: 'opentype',
  ttf: 'truetype',
);

@each $ext in $exts {
  $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
  $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
  $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)),
    comma);
}

@font-face {
  font-family: quote($family);
  font-style: $style;
  font-weight: $weight;
  src: $src;
}
}


// --- Font ---
@mixin fontPc($unit: "", $size, $lineheight: "", $weight: "", $space: 0.022em) {
  @if ($unit =="rem") {
    font-size: calc($size / $baseFontsize) * 1rem;
  }

  @else if ($unit =="em") {
    font-size: calc($size / 16) * 1em;
  }

  letter-spacing: $space;

  @if ($lineheight !="") {
    line-height: calc($lineheight / $size) * 1em;
  }

  @if ($weight !="") {
    font-weight: $weight;
  }
}

@mixin fontSp($size, $lineheight: "", $weight: "", $space: 0.05em) {
  font-size: calc($size / 375) * 100vw;
  letter-spacing: $space;

  @if ($lineheight !="") {
    line-height: calc($lineheight / $size) * 1em;
  }

  @if ($weight !="") {
    font-weight: $weight;
  }
}


@mixin c-squareDeco01($bg-color, $line-height, $min-size, $max-size) {
  position: relative;
  $width: fluidSize($max-size, $min-size, 1920, 414);
  padding-left: calc(#{$width} + 10px);
  line-height: $line-height;

  &::before {
    content: "";
    position: absolute;
    width: $width;
    height: fluidSize($max-size, $min-size, 1920, 414);
    background-color: $bg-color;
    top: calc(0.5 * #{$line-height}em);
    left: 0;
    transform: translateY(-50%);
    border-radius: fluidSize(3, 1, 1920, 414);
  }
}


/* 

上向き(upward)、右向き(rightward)、下向き(downward)、左向き(leftward)、左上(upper-left)、右上(upper-right)、右下(lower-right)、左下(lower-left)の８方向から選択します


@include triangle(upward, 20px, 15px, #cd5c5c);

@include triangle(upper-left, 12px, 12px);
---*/



@mixin triangle($direction, $width, $height, $color: currentColor) {

  // 定義されている方向が指定されている、もしくは方向が指定されていなかったらエラーを返す
  @if not index(upward rightward downward leftward upper-left upper-right lower-right lower-left, $direction) {
    @error 'triangle()の方向は"upward","rightward","downward","leftward","upper-left","upper-right","lower-right","lower-left"から指定してください';
  }

  border-style: solid;
  height: 0;
  width: 0;

  @if $direction ==upward {
    border-color: transparent transparent $color transparent;
    border-width: 0 calc($width / 2) $height calc($width / 2);
  }

  @if $direction ==rightward {
    border-color: transparent transparent transparent $color;
    border-width: calc($height / 2) 0 calc($height / 2) $width;
  }

  @if $direction ==downward {
    border-color: $color transparent transparent transparent;
    border-width: $height calc($width / 2) 0 calc($width / 2);
  }

  @if $direction ==leftward {
    border-color: transparent $color transparent transparent;
    border-width: calc($height / 2) $width calc($height / 2) 0;
  }

  @if $direction ==upper-left {
    border-color: $color transparent transparent transparent;
    border-width: $height $height 0 0;
  }

  @if $direction ==upper-right {
    border-color: transparent $color transparent transparent;
    border-width: 0 $height $height 0;
  }

  @if $direction ==lower-right {
    border-color: transparent transparent $color transparent;
    border-width: 0 0 $height $height;
  }

  @if $direction ==lower-left {
    border-color: transparent transparent transparent $color;
    border-width: $height 0 0 $height;
  }
}