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


// --- Base ---
$pcBase: 1400px;
$spBase: 375px;
$w100: calc(100vw - (100vw - 100%));

// --- Layout ---
$sp-w: 375;

$pc-rem: 16;

$baseFontsize: 16;

@function rem($pixels) {
      @return math.div($pixels, $baseFontsize) * 1rem;
}

@function fz($pixels) {
      @return math.div($pixels, $baseFontsize) * 1rem;
}

// --- VW ---
@function vw($px, $width: $spBase) {
      @return math.div($px * 100, $width) * 1vw; // ここで修正
}


/* @function rem($px, $rem: $pc-rem) {
  @return calc($px / $rem) * 1rem;
} */

@function em($px, $fontSize: $baseFontsiz) {
      @return math.div($px, $fontSize) * 1em;
}

// --- PERCENT ---
@function percent($px, $width) {
      @return math.div($px, $width) * 100%;
}

@mixin font($size, $height: false, $weight: false, $spacing: false) {
      font-size: calc($size / $baseFontsize * 1rem);

      @if $weight {
            font-weight: $weight;
      }

      @if $height {
            line-height: math.div($height, $size);
      }

      @if $spacing {
            letter-spacing: math.div($spacing, 1000) * 1em;
      }
}

// 呼び出し例
// @include font(フォントサイズ, 行送り , 太さ, トラッキング)


@mixin lh($pixels , $height) {
      line-height: calc($height / $pixels);
}