@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : variables.css

Created       : 2023-04-12
Last Modified : 2023-07-13

==========================================
Content

  01: typography
  02: colors
  03: layout
  04: utility

////////////////////////////////////////////////// */
/* ===================== 01: typography */
:root {
  --font-ja: "Gothic Medium BBB", sans-serif;
  --font-en: gill-sans-nova, sans-serif;
}
/* --- for small viewport --- */
@media screen and (max-width: 768px) {
  :root {
    --title-xs: 1.3rem;
    --title-s: 1.4rem;
    --title-m: 2rem;
    --title-l: 2.4rem;
    --title-xl: 2.6rem;

    --text-xs: 0.8rem;
    --text-s: 0.9rem;
    --text-m: 1rem;
    --text-l: 1.1rem;
    --text-xl: 1.2rem;
    --text-xxl: 1.3rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 769px) {
  :root {
    --title-xs: 1.5rem;
    --title-s: 1.6rem;
    --title-m: 2.4rem;
    --title-l: 2.4rem;
    --title-xl: 3.2rem;

    --text-xs: 1rem;
    --text-s: 1.1rem;
    --text-m: 1.2rem;
    --text-l: 1.3rem;
    --text-xl: 1.4rem;
    --text-xxl: 1.5rem;
  }
}

/* ===================== 02: colors */
:root {
  --color-text-primary: #323333;
  --color-dark-grey: #707070;
  --color-silver-white: #e2e2e2;
  --color-light-grey: #c6c6c6;
  --color-grey: #878787;
  --color-primary: #aa9977;
  --color-secondary: #c28358;
  --color-bg-primary: #f3f3f3;
  --color-bg-secondary: #f1f1f1;
  --color-error: var(--color-red, #e25858);
  --color-attention: var(--color-red, #e25858);
  --color-warning: var(--color-red, #e25858);

  /* ユーティリティー系　（案件別色など） */
  --color-black: #000;
  --color-white: #fff;
  --color-red: #e20;

  --shadow-primary: rgb(0 0 0 / 10%);
}

/* ===================== 03: layout */
@media screen and (max-width: 768px) {
  :root {
    --container-fluid: 100%;
    --container-default: 100%;
    --container-static: 100%;
    --container-order: 100%;
    --container-padding: 3rem;
  }
}
@media screen and (min-width: 769px) {
  :root {
    --container-fluid: 100%;
    --container-default: 140rem;
    --container-static: 100rem;
    --container-middle: 80rem;
    --container-order: 100rem;
    --container-padding: 6rem;
  }
}
/* ===================== 04: utility */
:root {
  --headerAppBannerHeight: 0px; /* jsで上書き */
  --headerInfoHeight: 0px; /* jsで上書き */
  --headerMainHeight: 0px; /* jsで上書き */

  --headerBannerHeight: calc(
    var(--headerAppBannerHeight, 0px) + var(--headerInfoHeight, 0px)
  );
  --headerHeight: calc(
    var(--headerBannerHeight, 0px) + var(--headerMainHeight, 0px)
  );

  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-headerBack: 4;
  --zindex-header: 5;
  --zindex-drawer: 9;
  --zindex-modal: 10;

  --hover-opacity: 0.6;
  --transition-default: 350ms ease;
}