@charset "UTF-8";

:root {

  --color-white: #FFFFFF;
  --color-black: #111111;
  --color-red: #D81212;

  --color-main: var(--color-black);
  --color-primary:#D6FF4E;
  --color-bg:var(--color-base03);

  --color-base01: #AAAAAA;
  --color-base02: #CCCCCC;
  --color-base03: #F4F4F4;

  --color-border01: #777777;
  --color-border02: #CCCCCC;
  --color-border03: #DDDDDD;

  --color-decoration01:#888888;
  --color-decoration02:#333333;

  --color-destructive: var(--color-red);
  --color-placeholder: #BBBBBB;

  --color-text-default: var(--color-main);
  --font-new-order: "new-order";
  --font-notosans: 'Noto Sans JP';

  --font-ja: var(--font-notosans);
  --font-en: var(--font-new-order);

  --font-main: var(--font-en), var(--font-ja), sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --transition-duration: 0.3s;
  --transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  --transition-default: var(--transition-duration) var(--transition-timing-function);

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;
  --zindex-hamburgermenu-button: 50;
  --zindex-hamburgermenu-header: 100;

  --space-padding-m: 3.85%;
  --space-padding-l: 5.12820%;

  --base-line-height: 1.6;
  --base-letter-spacing: 0.04em;


  --works-thumbnail-landscape-ratio: 7 / 4;
  --works-thumbnail-landscape-objectfit: cover;

  --works-thumbnail-vertical-ratio: 6 / 8;
  --works-thumbnail-vertical-objectfit: cover;

  --partner-columns-count: 3;
}

@media (min-width: 768px) {
  :root {
    --space-padding-m: 6.944444444%;
    --space-padding-l: 4.166666667%;
    --partner-columns-count: 6;
    --header-height: 7.0rem;
  }
}