:root {
  --standard-display-width: 375;
  --max-drawing-size: 1920;
  --calc-font-size: 16;
  --font-size: 12;
  --line-height: 2;
  --wrap--l: 100%;
  --wrap--m: calc((310 / var(--standard-display-width)) * 100%);
  --wrap--nest-960: 100%;
  --wrap--nest-800: 100%;
  --wrap--nest-700: 100%;
  --z-index--low: 1;
  --z-index--mid: 10;
  --z-index--max: 50;
  --transition: all .3s ease-in-out;

  /* Font */
  --noto-sans: 'Noto Sans JP', sans-serif, "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome";
  --noto-serif: 'Noto Serif JP', serif, "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome";
  --en: 'Dancing Script', serif, "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome";

  /* Color */
  --black: #444444;
  --green: #A5AE17;
  --gray-dark: #707070;
  --gray: #808080;
  --gray-light: #ccc;
  --gray-lighter: #eee;

  /* Margin and Size */
  --mas--5: 0.3rem;
  --mas--8: 0.5rem;
  --mas--10: 0.8rem;
  --mas--15: 1rem;
  --mas--20: 1.15rem;
  --mas--25: 1.25rem;
  --mas--30: 1.5rem;
  --mas--35: 1.75rem;
  --mas--40: 2rem;
  --mas--45: 2.25rem;
  --mas--50: 2.5rem;
  --mas--60: 3rem;
  --mas--70: 3.5rem;
  --mas--80: 4rem;
  --mas--90: 4.5rem;
  --mas--100: 5rem;
  --mas--120: 6rem;
  --mas--150: 7.5rem;
  --mas--160: 8rem;
  --mas--200: 10rem;
  --mas--240: 12rem;
}

/* Fontをdata-ff属性にセット */
[data-ff="noto-sans"] {
  font-family: var(--noto-sans);
}

[data-ff="serif"] {
  font-family: var(--noto-serif);
}

[data-ff="en"] {
  font-family: var(--en);
}



@media screen and (min-width: 960px) {

:root {
  --standard-display-width: 1280;
  --font-size: 16;
  --line-height: 1.875;
  --wrap--l: calc((1120 / var(--standard-display-width)) * 100%);
  --wrap--m: calc((1120 / var(--standard-display-width)) * 100%);
  --wrap--nest-960: min(calc((960/ 1120) * 100%), 96rem);
  --wrap--nest-800: min(calc((800/ 1120) * 100%), 80rem);
  --wrap--nest-700: min(calc((700/ 1120) * 100%), 70rem);

  /* Margin and Size */
  --mas--5: 0.5rem;
  --mas--8: 0.8rem;
  --mas--10: 1rem;
  --mas--15: 1.5rem;
  --mas--20: 2rem;
  --mas--25: 2.5rem;
  --mas--30: 3rem;
  --mas--35: 3.5rem;
  --mas--40: 4rem;
  --mas--45: 4.5rem;
  --mas--50: 5rem;
  --mas--60: 6rem;
  --mas--70: 7rem;
  --mas--80: 8rem;
  --mas--90: 9rem;
  --mas--100: 10rem;
  --mas--120: 12rem;
  --mas--150: 15rem;
  --mas--160: 16rem;
  --mas--200: 20rem;
  --mas--240: 24rem;
}

}