@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * SCSS Information
 * ===============================================================
 *
 * File name: _variables.scss
 * Summary:   変数定義用ファイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
*/

/* =01
// ========================================
// breakpoints
// ========================================
*/
/* $mq-breakpoints: (
  "xnarrow": 320px,
  "narrow": 640px,
  "medium": 768px,
  "tablet": 1024px,
  "wide": 1440px,
  "xwide": 1440px,
); */
:root {
  --width-narrow: 640px;
  --width-medium: 768px;
  --width-tablet: 1024px;
  --width-wide: 1280px;
  --width-xwide: 1440px;
}

/* =02
// ========================================
// width
// ========================================
*/
:root {
  --width-inner: 1440px;
  --width-inner-narrow: 1120px;
}

/* =03
// ========================================
// color
// ========================================
*/
:root {
  --color-main: #ea545d;
  --color-main-deep: #e83544;
  --color-sub: #3fabd2;
  --color-base: #040a30;
  --color-base-bright: #fff;
  --color-text: #000;
  --color-text-light: #9b9b9b;
  --color-text-bright: #fff;
  --color-border: var(--color-main);
  --color-border-pale: #ddd;
  --color-accent: #e60012;
  --color-error: #e60012;

  --color-gradient-1: var(--color-main-deep);
  --color-gradient-2: #b85175;
  --color-gradient-3: #7d5c9f;
  --color-gradient-4: #658cbd;
  --color-gradient-5: var(--color-sub);

  --color-gradient: linear-gradient(
    to right,
    var(--color-gradient-1) 0%,
    var(--color-gradient-2) 25%,
    var(--color-gradient-3) 50%,
    var(--color-gradient-4) 75%,
    var(--color-gradient-5) 100%
  );
}

/* =04
// ========================================
// typography
// ========================================
*/
:root {
  --sans-serif-ja: "M PLUS 1", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  --sans-serif-en: "Orbitron", "Helvetica", "Arial", sans-serif;
  --serif-ja: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho",
    "Yu Mincho", "MS PMincho", serif;
  --serif-en: "Times New Roman", serif;
}

/* =05
// ========================================
// layout
// ========================================
*/
:root {
  --col-max: 12; /* 何分割するか */
  --col-gap: 16px; /* カラム間のgapをpxにするか */
  --col-gap-narrow: 8px; /* カラム間のgap（狭） */
  --col-gap-wide: 40px; /* カラム間のgap（広） */
}

/* =06
// ========================================
// opacity
// ========================================
*/
:root {
  --opacity-hover: 0.5;
  --opacity-disabled: 0.2;
}

/* =07
// ========================================
// border-radius
// ========================================
*/
:root {
  --border-radius: 8px;
  --border-radius-small: 4px;
  --border-radius-large: 16px;
  --border-radius-round: 100vmax;
}

/* =07
// ========================================
// easing-function
// 参考: https://easings.net/ja
// ========================================
*/
:root {
  --easing-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}