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

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

  /* --color-background-base: #EDE8DA;
  --color-background-beige: #CECABA;
  --color-green-base: #005A4F;
  --color-beige-1: #DCD3B7;
  --color-beige-2: #DCD3B7;

  --color-text: #4C483A;
  --color-white: #ffffff; */

  --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.55);
  --color-globalnav-dropdown-bg: var(--color-gray30);

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

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

  --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-notosan: "Noto Sans JP", sans-serif;
  --font-shippori: "Shippori Mincho B1", serif;
  --font-base: var(--font-notosan);
  --font-heading: var(--font-shippori);
  /* ------------------------------
  レイアウト
  ------------------------------- */

  /* 1120px */
  --container: 80rem;
  /* 960px */
  --container-md: 56rem;
  /* 768px */
  --container-sm: 20.6875rem;

  /* 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.55);
  --page-title-space-bottom: 7.5rem;
  @media (min-width: 48rem) { /* _acms-common.scss : $breakpoint-md-min */
    --page-title-space-bottom: 4.5rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --page-title-space-bottom: 7.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: 2rem;
  --header-height-fixed: 170px;

  /* フッター */
  --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: 5rem;
  @media (min-width: 30rem) { /* _acms-common.scss : $breakpoint-sm-min */
    --container-space-x: 1.375rem;
  }
  @media (min-width: 64rem) { /* _acms-common.scss : $breakpoint-lg-min */
    --container-space-x: 5rem;
  }

  /* グリッドの間隔 */
  --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 */
}