/* font */

/* Google Fontsの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap');

/* size-adjustで調整 */
/* 本文用 */
@font-face {
  font-family: "Fira Sans Adjusted";
  src: url(https://fonts.gstatic.com/s/firasans/v18/va9B4kDNxMZdWfMOD5VnPKreRhf6Xl7Glw.woff2) format('woff2');
  size-adjust: 106%;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 見出し用 */
@font-face {
  font-family: "Fira Sans Adjusted";
  src: url(https://fonts.gstatic.com/s/firasans/v18/va9B4kDNxMZdWfMOD5VnSKzeRhf6Xl7Glw.woff2) format('woff2');
  size-adjust: 106%;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "YakuCaltGothic";
  src: url("../font/YakuCalt/YakuCaltGothic-R.woff") format("woff"), url("../font/YakuCalt/YakuCaltMincho-R.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP Subset";
  src: url("../font/NotoSansJP/NotoSansJP-Subset-Regular.woff") format("woff"), url("../font/NotoSansJP/NotoSansJP-Subset-Regular.woff2") format("woff2"), url("../font/NotoSansJP/NotoSansJP-Subset-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP Subset";
  src: url("../font/NotoSansJP/NotoSansJP-Subset-Bold.woff") format("woff"), url("../font/NotoSansJP/NotoSansJP-Subset-Bold.woff2") format("woff2"), url("../font/NotoSansJP/NotoSansJP-Subset-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}


/* reset */
/* https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html */
/* box-sizing: border-box;を設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* フォントサイズの拡大を防ぐ */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
 
/* デフォルトのマージンを削除、作成するCSSの制御を改善するため */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}
 
/* リストのスタイルを削除、これはデフォルトのスタイルが削除されることを示唆します */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* bodyのデフォルトを設定 */
body {
  min-height: 100vh;
  line-height: 1.5;
}
 
/* 見出しやインタラクティブ要素のline-heightを設定 */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}
 
/* 見出しのテキスト折り返しをbalanceに設定 */
/*
h1, h2, h3, h4 {
  text-wrap: balance;
}
*/
 
/* classを持たないa要素はデフォルトのスタイルを継承 */
/* 削除 */
 
/* 画像の扱いを簡単にする */
img,
picture {
  max-width: 100%;
  display: block;
}
 
/* inputやbuttonなどのfontは継承 */
input, button,
textarea, select {
  font: inherit;
}
 
/* rows属性のないtextareasが小さくならないようにする */
textarea:not([rows]) {
  min-height: 10em;
}
 
/* アンカーされている要素には余分なスクロールマージンが必要 */
:target {
  scroll-margin-block: 5ex;
}

*:first-child {
  margin-block-start: 0;
}

/* variables */

:root {

  /* Flexoki */
  --flexoki-black: #100F0F;
  --flexoki-paper: #FFFCF0;

  --flexoki-base-50:  #F2F0E5;
  --flexoki-base-100: #E6E4D9;
  --flexoki-base-150: #DAD8CE;
  --flexoki-base-200: #CECDC3;
  --flexoki-base-300: #B7B5AC;
  --flexoki-base-400: #9F9D96;
  --flexoki-base-500: #878580;
  --flexoki-base-600: #6F6E69;
  --flexoki-base-700: #575653;
  --flexoki-base-800: #403E3C;
  --flexoki-base-850: #343331;
  --flexoki-base-900: #282726;
  --flexoki-base-950: #1C1B1A;

  --flexoki-red-50:  #FFE1D5;
  --flexoki-red-100: #FFCABB;
  --flexoki-red-150: #FDB2A2;
  --flexoki-red-200: #F89A8A;
  --flexoki-red-300: #E8705F;
  --flexoki-red-400: #D14D41; /* light accent color */
  --flexoki-red-500: #C03E35;
  --flexoki-red-600: #AF3029; /* dark accent color */
  --flexoki-red-700: #942822;
  --flexoki-red-800: #6C201C;
  --flexoki-red-850: #551B18;
  --flexoki-red-900: #3E1715;
  --flexoki-red-950: #261312;

  --flexoki-orange-50:  #FFE7CE;
  --flexoki-orange-100: #FED3AF;
  --flexoki-orange-150: #FCC192;
  --flexoki-orange-200: #F9AE77;
  --flexoki-orange-300: #EC8B49;
  --flexoki-orange-400: #DA702C; /* light accent color */
  --flexoki-orange-500: #CB6120;
  --flexoki-orange-600: #BC5215; /* dark accent color */
  --flexoki-orange-700: #9D4310;
  --flexoki-orange-800: #71320D;
  --flexoki-orange-850: #59290D;
  --flexoki-orange-900: #40200D;
  --flexoki-orange-950: #27180E;

  --flexoki-yellow-50:  #FAEEC6;
  --flexoki-yellow-100: #F6E2A0;
  --flexoki-yellow-150: #F1D67E;
  --flexoki-yellow-200: #ECCB60;
  --flexoki-yellow-300: #DFB431;
  --flexoki-yellow-400: #D0A215; /* light accent color */
  --flexoki-yellow-500: #BE9207;
  --flexoki-yellow-600: #AD8301; /* dark accent color */
  --flexoki-yellow-700: #8E6B01;
  --flexoki-yellow-800: #664D01;
  --flexoki-yellow-850: #503D02;
  --flexoki-yellow-900: #3A2D04;
  --flexoki-yellow-950: #241E08;

  --flexoki-green-50:  #EDEECF;
  --flexoki-green-100: #DDE2B2;
  --flexoki-green-150: #CDD597;
  --flexoki-green-200: #BEC97E;
  --flexoki-green-300: #A0AF54;
  --flexoki-green-400: #879A39; /* light accent color */
  --flexoki-green-500: #768D21;
  --flexoki-green-600: #66800B; /* dark accent color */
  --flexoki-green-700: #536907;
  --flexoki-green-800: #3D4C07;
  --flexoki-green-850: #313D07;
  --flexoki-green-900: #252D09;
  --flexoki-green-950: #1A1E0C;

  --flexoki-cyan-50:  #DDF1E4;
  --flexoki-cyan-100: #BFE8D9;
  --flexoki-cyan-150: #A2DECE;
  --flexoki-cyan-200: #87D3C3;
  --flexoki-cyan-300: #5ABDAC;
  --flexoki-cyan-400: #3AA99F; /* light accent color */
  --flexoki-cyan-500: #2F968D;
  --flexoki-cyan-600: #24837B; /* dark accent color */
  --flexoki-cyan-700: #1C6C66;
  --flexoki-cyan-800: #164F4A;
  --flexoki-cyan-850: #143F3C;
  --flexoki-cyan-900: #122F2C;
  --flexoki-cyan-950: #101F1D;

  --flexoki-blue-50:  #E1ECEB;
  --flexoki-blue-100: #C6DDE8;
  --flexoki-blue-150: #ABCFE2;
  --flexoki-blue-200: #92BFDB;
  --flexoki-blue-300: #66A0C8;
  --flexoki-blue-400: #4385BE; /* light accent color */
  --flexoki-blue-500: #3171B2;
  --flexoki-blue-600: #205EA6; /* dark accent color */
  --flexoki-blue-700: #1A4F8C;
  --flexoki-blue-800: #163B66;
  --flexoki-blue-850: #133051;
  --flexoki-blue-900: #12253B;
  --flexoki-blue-950: #101A24;

  --flexoki-purple-50:  #F0EAEC;
  --flexoki-purple-100: #E2D9E9;
  --flexoki-purple-150: #D3CAE6;
  --flexoki-purple-200: #C4B9E0;
  --flexoki-purple-300: #A699D0;
  --flexoki-purple-400: #8B7EC8; /* light accent color */
  --flexoki-purple-500: #735EB5;
  --flexoki-purple-600: #5E409D; /* dark accent color */
  --flexoki-purple-700: #4F3685;
  --flexoki-purple-800: #3C2A62;
  --flexoki-purple-850: #31234E;
  --flexoki-purple-900: #261C39;
  --flexoki-purple-950: #1A1623;

  --flexoki-magenta-50:  #FEE4E5;
  --flexoki-magenta-100: #FCCFDA;
  --flexoki-magenta-150: #F9B9CF;
  --flexoki-magenta-200: #F4A4C2;
  --flexoki-magenta-300: #E47DA8;
  --flexoki-magenta-400: #CE5D97; /* light accent color */
  --flexoki-magenta-500: #B74583;
  --flexoki-magenta-600: #A02F6F; /* dark accent color */
  --flexoki-magenta-700: #87285E;
  --flexoki-magenta-800: #641F46;
  --flexoki-magenta-850: #4F1B39;
  --flexoki-magenta-900: #39172B;
  --flexoki-magenta-950: #24131D;
}

/* mapping */
body {
  --tx: var(--flexoki-black);
  --tx-2: var(--flexoki-base-600);
  --tx-3: var(--flexoki-base-300);
  --ui-3: var(--flexoki-base-200);
  --ui-2: var(--flexoki-base-150);
  --ui: var(--flexoki-base-100);
  --bg-3: var(--flexoki-base-100);
  --bg-2: var(--flexoki-base-50);
  --bg: var(--flexoki-paper);
  --re: var(--flexoki-red-600);
  --or: var(--flexoki-orange-600);
  --ye: var(--flexoki-yellow-600);
  --gr: var(--flexoki-green-600);
  --cy: var(--flexoki-cyan-600);
  --bl: var(--flexoki-blue-600);
  --pu: var(--flexoki-purple-600);
  --ma: var(--flexoki-magenta-600);
  --re-2: var(--flexoki-red-400);
  --or-2: var(--flexoki-orange-400);
  --ye-2: var(--flexoki-yellow-400);
  --gr-2: var(--flexoki-green-400);
  --cy-2: var(--flexoki-cyan-400);
  --bl-2: var(--flexoki-blue-400);
  --pu-2: var(--flexoki-purple-400);
  --ma-2: var(--flexoki-magenta-400);
}

/* mapping on dark theme */
body.dark {
  --tx: var(--flexoki-base-200);
  --tx-2: var(--flexoki-base-500);
  --tx-3: var(--flexoki-base-700);
  --ui-3: var(--flexoki-base-800);
  --ui-2: var(--flexoki-base-850);
  --ui: var(--flexoki-base-900);
  --bg-3: var(--flexoki-base-900);
  --bg-2: var(--flexoki-base-950);
  --bg: var(--flexoki-black);
  --re: var(--flexoki-red-400);
  --or: var(--flexoki-orange-400);
  --ye: var(--flexoki-yellow-400);
  --gr: var(--flexoki-green-400);
  --cy: var(--flexoki-cyan-400);
  --bl: var(--flexoki-blue-400);
  --pu: var(--flexoki-purple-400);
  --ma: var(--flexoki-magenta-400);
  --re-2: var(--flexoki-red-600);
  --or-2: var(--flexoki-orange-600);
  --ye-2: var(--flexoki-yellow-600);
  --gr-2: var(--flexoki-green-600);
  --cy-2: var(--flexoki-cyan-600);
  --bl-2: var(--flexoki-blue-600);
  --pu-2: var(--flexoki-purple-600);
  --ma-2: var(--flexoki-magenta-600);
}

:root {
  /* type scale */
  --f-default: 1.0625rem;
  font-size: var(--f-default);
  --f-tiny: 0.75rem;
  --f-small: 0.875rem;
  --f-large: 1.25rem;
  --f-huge: 1.625rem;

  --f-h6: var(--f-default);
  --f-h5: var(--f-default);
  --f-h4: var(--f-default);
  --f-h3: calc(var(--f-h4) * 1.25);
  --f-h2: calc(var(--f-h3) * 1.25);
  --f-h1: calc(var(--f-h2) * 1.25);

  /* line height */
  --height-tiny: 1.1;
  --height-small: 1.25;
  --height-default: 1.8;

  /* spacing */
  --spacing-tiny: 0.25rlh;
  --spacing-small: 0.5rlh;

  --spacing-default: 1rlh;

  --spacing-2x: 2rlh;
  --spacing-3x: 3rlh;
  --spacing-4x: 4rlh;
  --spacing-5x: 5rlh;
}