/* ------------------------------
　　CSS変数
------------------------------ */
:root {

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

  --color-primary: #334EB0;
  --color-primary-hover: #2B4193;
  --color-primary-light: #F5F6FB;
  --color-primary-light-hover: #D5DAEF;
  --color-primary-bg: var(--color-primary-light);
  --color-primary-bg-hover: #D1D7ED;

  --color-secondary: #6A6A6A;

  --color-highlight: #FFFB8B;

  --color-danger: #C92D2D;
  --color-danger-light: #FCF5F5;

  --color-white: #FFF;
  --color-black: #333333;
  --color-white90: rgba(255, 255, 255, .9);
  --color-black30: rgba(0, 0, 0, .3);
  --color-black80: rgba(0, 0, 0, .8);

  --color-gray10: #F5F5F5;
  --color-gray20: #DFDFDF;
  --color-gray30: #CACACA;
  --color-gray40: #B4B4B4;
  --color-gray50: #9F9F9F;
  --color-gray60: #898989;
  --color-gray70: #747474;
  --color-gray80: #5E5E5E;
  --color-gray90: #494949;
  --color-gray100: #333333;

  --color-form-bg: var(--color-gray10);
  --color-form-border: var(--color-gray40);

  --color-link: var(--color-gray100);
  --color-focus: #0061D1;
  --color-page-title-bg: var(--color-gray10);
  --color-hover-bg: var(--color-gray10);
  --color-hover-bg-2nd: rgba(0, 0, 0, 0.05);

  --color-required: #c92d2d;
  --color-error: #c92d2d;

  --color-text: var(--color-gray100);
  --color-text-2nd: var(--color-gray80);
  --color-text-inverse: var(--color-white);

  --color-text-primary: var(--color-primary);
  --color-text-secondary: var(--color-secondary);

  --color-text-sunday: #A82626;
  --color-text-saturday: #0151AE;

  --color-globalnav-bg: rgba(0, 0, 0, 0.4);
  --color-globalnav-dropdown-bg: var(--color-gray30);

  --color-footer-sticky: rgba(0, 0, 0, 0.4);

  --color-image-overlay-bg: rgba(0, 0, 0, 0.4);

  --box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0px 0px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-focus: 0 0 0 .25rem rgba(0, 97, 209, 0.4);
  --box-shadow-error: 0 0 0 .25rem rgba(201, 45, 45, 0.4);

  --color-icon-bg: var(--color-gray80);
  --color-icon-bg-hover: var(--color-gray100);

  /* ------------------------------
  フォント
  ------------------------------- */
  --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: var(--font-meiryo);

  /* ------------------------------
  レイアウト
  ------------------------------- */

  /* 1120px */
  --container: calc(70rem + var(--container-space-x) * 2);
  /* 960px */
  --container-md: calc(56rem + var(--container-space-x) * 2);
  /* 768px */
  --container-sm: calc(44rem + var(--container-space-x) * 2);

  /* 2カラム */
  --width-main-container: calc(100% - var(--width-side-container) - var(--gutter-md) * 1.5);
  --width-side-container: var(--width-side-container);

  /* サブカラムの幅 */
  --width-side-container: 19rem;

  /* ページタイトル */
  --page-title-filter: rgba(0, 0, 0, 0.4);
  --page-title-space-bottom: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --page-title-space-bottom: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --page-title-space-bottom: 6.5rem;
  }

  /* セクション上下余白 */
  --section-space-y: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --section-space-y: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --section-space-y: 6.5rem;
  }

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

  /* フッター */
  --footer-margin-top: 3rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --footer-margin-top: 5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --footer-margin-top: 6.5rem;
  }

  /* z-index */
  --zindex-fixed-contents: 50;
  --zindex-header: 60;
  --zindex-mobile-nav: 61;
  --zindex-mobile-nav-btn: 62;

  /* ------------------------------
  余白
  ------------------------------- */

  /* ガター */
  --gutter-sm: 1rem;
  --gutter-md: 2rem;
  --gutter-lg: 3rem;

  /* コンテナー左右余白 */
  --container-space-x: 1rem;
  @media (min-width: 30rem) { /* _acms-common.scss : $breakpoint-sm-min */
    --container-space-x: 2rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --container-space-x: 3rem;
  }

  /* グリッドの間隔 */
  --col-gutter: var(--gutter-md);
  --unit-gutter-var: var(--gutter-md);

  /* カードレイアウト用のはみ出し背景余白 */
  --card-bg-space: 1rem;

  /* 余白ユニット */
  --unit-space-sm: 2rem;
  --unit-space-md: 3rem;
  --unit-space-lg: 4rem;

  /* 罫線ユニット余白 */
  --separator-sm: 2rem;
  --separator-md: 3rem;
  --separator-lg: 4rem;

  /* ユニットの見出し要素上追加マージン */
  --unit-heading-margin-top-add: 0.6em;

  /* systemでも参照しているプロパティを定義 */
  --unit-gap-x: var(--gutter-md);
  --unit-margin-top: 0;
  --unit-margin-bottom: 2rem;

  /* ------------------------------
  パーツ
  ------------------------------- */

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

  /* ボーダー太さ */
  --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: 16px;
  --border-radius-xxl: 32px;
  --border-radius-round: 10em;

  /* 行高さ */
  --line-height-base: 1.5;
  --line-height-ss: 1;
  --line-height-sm: 1.4;
  --line-height-lg: 1.7;

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

  /* エントリー パディング */
  --entry-el-padding-xxs: 0.5rem;  /*  8px */
  --entry-el-padding-xs: 1rem;  /*  16px */
  --entry-el-padding-sm: 1.5rem;  /*  24px */
  --entry-el-padding-md: 2rem;  /*  32px */
}