/*--------------------------------------------------------------
 font-face - Noto Sans JP
--------------------------------------------------------------*/

@font-face {
  font-family: 'Noto Sans JP';
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans Japanese Light'),
       local('NotoSansJapanese-Light'),
       url(../assets/fonts/Noto-Sans-Japanese-Light.woff2) format('woff2'),
       url(../assets/fonts/Noto-Sans-Japanese-Light.woff) format('woff'),
       url(../assets/fonts/Noto-Sans-Japanese-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans Japanese Regular'),
       local('NotoSansJapanese-Regular'),
       url(../assets/fonts/Noto-Sans-Japanese-Regular.woff2) format('woff2'),
       url(../assets/fonts/Noto-Sans-Japanese-Regular.woff) format('woff'),
       url(../assets/fonts/Noto-Sans-Japanese-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Japanese Bold'),
       local('NotoSansJapanese-Bold'),
       url(../assets/fonts/Noto-Sans-Japanese-Bold.woff2) format('woff2'),
       url(../assets/fonts/Noto-Sans-Japanese-Bold.woff) format('woff'),
       url(../assets/fonts/Noto-Sans-Japanese-Bold.ttf) format('truetype');
}

/*--------------------------------------------------------------
 Custom Properties (CSS Varialbles)
--------------------------------------------------------------*/

:root {
  /* Color */
  --white: #fff;
  --gray: #ddd;
  --green: #8cc63e;
  --green-hover: #5a9500;
  --aqua: #4da1c5;
  --aqua-hover: #007294;
  --blue-purple: #8473cf;
  --blue-purple-hover: #53479d;
  --red-purple: #ad6ba3;
  --red-purple-hover: #7c3e74;
  --text-primary: #42484e;
  --card-bg: #f8f9f9;
  --border-primary: #cdcdcd;
  --sky-blue: #53a1ef;
  --brown: #aa6a20;
  --dark-green: #2ca618;
  --purple: #9900B1;
  --yellow: #f0d12b;
  --orange: #ef9b1d;
  --dark-blue: #1b0cda;
  --red: #D61818;
  --light-green: #64ce75;
  --pink: #ef5ee1;

  /* font-sizes */
  --font-normal-size: 1.6rem;
  --font-small-size: 1.2rem;
  --font-medium-size: 1.4rem;
  --font-large-size: 2rem;
  --font-extra-large-size: 2.4rem;
  --font-super-large-size: 2.8rem;
  --font-mega-large-size: 3.4rem;

  /* font-family */
  --font-family-sans-serif: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}