text: @charset "utf-8";
  
  // -----------------------------------------------------
  // Media Query
  // -----------------------------------------------------
  @mixin max($width: $mq-max) {
    @media only screen and (max-width: $width) {
      @content;
    }
  }
  
  @mixin min($width: $mq-min) {
    @media only screen and (min-width: $width) {
      @content;
    }
  }
  
  // -----------------------------------------------------
  // Position
  // -----------------------------------------------------
  @mixin fit-full($position: absolute) {
    width: 100%;
    height: 100%;
    position: $position;
    top: 0;
    left: 0;
  }
  
  @mixin center($position: absolute) {
    position: $position;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  @mixin center-vertical($position: absolute) {
    position: $position;
    top: 50%;
    transform: translateY(-50%);
  }
  
  @mixin center-horizontal($position: absolute) {
    position: $position;
    left: 50%;
    transform: translateX(-50%);
  }
  
  @mixin center-flex() {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  // -----------------------------------------------------
  // Transition
  // -----------------------------------------------------
  @mixin transition-fade {
    transition: opacity 0.1s linear;
  }
  @mixin transition-collection {
    transition: opacity 0.1s linear, color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
  }
  
  // -----------------------------------------------------
  // Hover
  // -----------------------------------------------------
  @mixin hover-fade {
    @include transition-fade;
    @include min { 
      &:hover {
        opacity: 0.7;
      }
    }
  }
  
  // -----------------------------------------------------
  // Background
  // -----------------------------------------------------
  @mixin bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  // -----------------------------------------------------
  // Border
  // -----------------------------------------------------
  @mixin b($color: $color-border) {
    border: $width-border-form solid $color;
  }
  
  @mixin radius {
    border-radius: 0;
  }
  
  @mixin dot-border {
    background-image: linear-gradient(to right, $color-border, $color-border 50%, transparent 50%, transparent 100%);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 20px 1px;
  }
  
  // -----------------------------------------------------
  // Text
  // -----------------------------------------------------
  @mixin font-sans {
    font-family: YuGothic, Meiryo, sans-serif;
  }
  
  @mixin font-en {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  @mixin font-source {
    font-family: Menlo, Monaco, 'Courier New', Consolas, monospace;
  }
  
  @mixin hide-text {
    font: 0 / 0;
    color: transparent;
  }
  
  // -----------------------------------------------------
  // Text
  // -----------------------------------------------------
  @mixin fz-xs {
    @include max {
      font-size: 10px;
    }
    @include min {
      font-size: 12px;
    }
  }
  @mixin fz-s {
    @include max {
      font-size: 12px;
    }
    @include min {
      font-size: 14px;
    }
  }
  
  @mixin fz-sm {
    @include max {
      font-size: 14px;
    }
    @include min {
      font-size: 16px;
    }
  }
  
  @mixin fz-m {
    @include max {
      font-size: 14px;
    }
    @include min {
      font-size: 16px;
    }
  }
  
  @mixin fz-ml {
    @include max {
      font-size: 14px;
    }
    @include min {
      font-size: 18px;
    }
  }
  
  @mixin fz-l {
    @include max {
      font-size: 18px;
    }
    @include min {
      font-size: 28px;
    }
  }
  
  @mixin fz-xl {
    @include max {
      font-size: 24px;
    }
    @include min {
      font-size: 32px;
    }
  }
  
  @mixin fz-grande {
    @include max {
      font-size: 32px;
    }
    @include min {
      font-size: 48px;
    }
  }
  
  @mixin fz-venti {
    @include max {
      font-size: 32px;
    }
    @include min {
      font-size: 64px;
    }
  }
  
  @mixin fz-poem {
    @include max {
      font-size: 16px;
    }
    @include min {
      font-size: 20px;
    }
  }
  
  @mixin fz-detail {
    @include max {
      font-size: 20px;
    }
    @include min {
      font-size: 22px;
    }
  }
  
  @mixin fz-form {
    @include max {
      font-size: 16px;
    }
    @include min {
      font-size: 14px;
    }
  }
  
  @mixin lh-base {
    @include max {
      line-height: 1.8;
    }
    @include min {
      line-height: 2;
    }
  }
  
  @mixin lh-0 {
    line-height: 0;
  }
  
  @mixin lh-1 {
    line-height: 1;
  }
  
  @mixin lh-min {
    line-height: 1.2;
  }
  
  @mixin lh-en {
    line-height: 1.4;
  }