mio-U-M

@mixin simple-before {
  &::before {
    content: '';
    @content;
  }
}

@mixin simple-after {
  &::after {
    content: '';

mio-U-M

@mixin position-ab($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  margin: auto;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

mio-U-M

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

mio-U-M

$img_dir: '/img/';

@function image-url ($url) {
    @return url("#{$img_dir}#{$url}");
}

mio-U-M

// image-urlを使う想定

@mixin bg-contain($path) {
  background-image: image-url($path);
  background-repeat: no-repeat;
  background-size: contain;
}

mio-U-M

// size
$pc-min-width: 1440px;
$tablet_max_width: 769px;
$sp_max_width: 375px;

@function pSize($value) {
  @return $value / $pc_min_width * 100 + vw;
}

@function tSize($value) {

mio-U-M

/**
 * 画像サイズを返してくれる。
 * @param {String} パス
 */
img-size($path)
    image-size($img_dir + $path)

/**
 * 画像アスペクト比を返してくれる。
 * @param {String} パス

mio-U-M

/**
 * PC表示の時にのみ適用。
 */
pc-layout()
  @media (min-width $pc_min_width)
    {block}

/**
 * SP表示の時にのみ適用。
 */

mio-U-M

var easing = {
		linear : function (t){
			return t;
		},
		easeInQuad: function (t) {
			return t*t;
		},
		easeOutQuad: function (t) {
			return -1 *t*(t-2);
		},

mio-U-M

@mixin form-style-reset {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;