@use "sass:map";

// ------------------------------
//　設定
// ------------------------------
$enable-iphonex: true;

// ------------------------------
//　余白
// ------------------------------
// グリッドの間隔
$col-gutter: 2rem;
$unit-gutter-var: var(--gutter);

// ------------------------------
//　エントリー
// ------------------------------
$entry-el-margin-xxs: 0.5rem !default; // 8
$entry-el-margin-xs: 1rem !default; // 16
$entry-el-margin-sm: 1.5rem !default; // 24
$entry-el-margin-md: 2rem !default; // 32
$entry-el-margin-lg: 3rem !default; // 48

$entry-el-padding-xxs: 0.5rem !default; // 8
$entry-el-padding-xs: 1rem !default; // 16
$entry-el-padding-sm: 1.5rem !default; // 24
$entry-el-padding-md: 2rem !default; // 32

$unit-margin-md: 2rem;

// ------------------------------
//　コンテイナー
// ------------------------------
$container: calc(70rem + $col-gutter); //1120px
$container-md: calc(58rem + $col-gutter); // 928px
$container-sm: calc(45rem + $col-gutter); // 736px

// ------------------------------
//　ファイルのパス
// ------------------------------
$icon-font-path: "/themes/system/fonts/"; // フォントのパスを上書き
$root-theme-img: "../../images/";

// ------------------------------
//　フォント
// ------------------------------
/* stylelint-disable max-line-length */
$font-hiragino: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
$font-yu-gothic: "Helvetica Neue", arial, yugothic, "yu gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",meiryo, sans-serif;
$font-meiryo: "Helvetica Neue", arial, meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;
$font-base: $font-hiragino;
$font-size: 1rem;
$font-scale: 1.25;
$font-scales: (
  display-m: $font-size * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale,
  display-s: $font-size * $font-scale * $font-scale * $font-scale * $font-scale * $font-scale,
  heading-l: $font-size * $font-scale * $font-scale * $font-scale * $font-scale,
  heading-m: $font-size * $font-scale * $font-scale * $font-scale,
  heading-s: $font-size * $font-scale * $font-scale,
  heading-ss: $font-size * $font-scale,
  body-m: $font-size,
  body-s: calc($font-size / $font-scale)
) !default;
/* stylelint-enable max-line-length */

$line-height-base: 1.5 !default;
$line-height-ss: 1 !default;
$line-height-sm: 1.4 !default;
$line-height-lg: 1.7 !default;

// ------------------------------
//　カラー
// ------------------------------

// プライマリーカラー
$color-primary: var(--color-primary);
$color-primary-hover: var(--color-primary-hover);
$color-primary-light: var(--color-primary-light);
$color-primary-bg: $color-primary-light;
$color-primary-bg-hover: var(--color-primary-bg-hover);

// セカンダリーカラー
$color-secondary: var(--color-secondary);

// ターシャリーカラー
$color-highlight: var(--color-highlight);
$color-highlight-light: var(--color-highlight-light);

// ニュートラルカラー
$color-white: var(--color-white);
$color-black: var(--color-black);
$color-gray10: var(--color-gray10);
$color-gray20: var(--color-gray20);
$color-gray30: var(--color-gray30);
$color-gray40: var(--color-gray40);
$color-gray50: var(--color-gray50);
$color-gray60: var(--color-gray60);
$color-gray70: var(--color-gray70);
$color-gray80: var(--color-gray80);
$color-gray90: var(--color-gray90);
$color-gray100: var(--color-gray100);

// 機能的なカラー
$color-form-bg: $color-gray10;
$color-form-border: $color-gray40;
$color-link: var(--color-link);
$color-required: var(--color-required);
$color-error: var(--color-error);
$color-focus: #0061d1;
$box-shadow-focus: var(--box-shadow-focus);
$box-shadow-error: var(--box-shadow-error);

// テキストカラー
$color-text: $color-gray100;
$color-text-side: $color-gray90;
$color-text-inverse: $color-white;
$color-text-primary: $color-primary;
$color-text-secondary: $color-secondary;
$color-text-point: var(--color-text-point);
$color-text-sunday: #b91414;
$color-text-saturday: #0151ae;

// ------------------------------
//　ボーダー
// ------------------------------
// 太さ
$border-width-sm: 1px;
$border-width-md: 2px;
$border-width-lg: 4px;

// 角丸
$border-radius-sm: 3px;
$border-radius-md: 4px;
$border-radius-lg: 6px;
$border-radius-xl: 10px;
$border-radius-xxl: 30px;
$border-radius-round: 10em;
$border-radius-circle: 100%;

// 装飾
$border-link: $border-width-sm dashed $color-link;
$border-footer: $border-width-sm solid $color-gray30;

// ------------------------------
//　z-index
// ------------------------------
$zindex-fixed-contents: 9000;
$zindex-header: 10000;
$zindex-mobile-nav: 10001;
$zindex-mobile-nav-btn: 10002;

// ------------------------------
//　階層
// ------------------------------
$elevation02: 0 1px 3px rgb(0 0 0 / 20%);
$elevation04: 0 2px 3px rgb(0 0 0 / 15%);
$elevation08: 0 2px 6px rgb(0 0 0 / 15%);
$elevation10: 0 3px 10px rgb(0 0 0 / 10%);

// ------------------------------
//　ヘッダー
// ------------------------------
$header-height: 3.5rem;
$header-height-fixed: 3.5rem;

// ------------------------------
//　ページタイトル
// ------------------------------
$page-title-height: 7.5rem;
$page-title-height-image: 10rem;
$page-title-margin-bottom: 2.5rem;
$page-title-height-md: 13rem;
$page-title-height-image-md: 19rem;
$page-title-margin-bottom-md: 5rem;

// ------------------------------
//　ボタン
// ------------------------------
$btn-padding-y: 0.75rem;
$btn-padding-x: 2rem;

// ------------------------------
//　CTAパーツ
// ------------------------------
$cta-space-md: 1.5rem;
$cta-space-lg: 6.5rem;

// ------------------------------
//　フッター
// ------------------------------
$footer-margin-top-md: 5rem;
$footer-margin-top-lg: 6.5rem;
