:root {
  /* ===============================================
    * Color *
  =============================================== */
  --color-main: #005C55;
  --color-primary: #005C55;
  --color-primary2: 0,92,85;
  --color-warning: #EBDED8;
  /* --color-danger: #FF6A14; */
  --color-danger: #E82525;
  --color-beige: #C3A278;
  --color-beige2: 195, 162, 120;
  --color-brown: #3B3B3B;
  --color-brown2: 59, 59, 59;
  --color-red: #E82525;
  --color-blue: #1B7FDD;
  --color-blue2: #24D7DD;
  --color-green2: #167972;
  --color-attention: 235, 21, 20;
  --color-gray2: #BAB7AF;
  --color-gray: #F1F1EF;
  --color-gray-dark: #707070;
  --color-gray-middle: #9E9B94;
  --color-gray-light: #F0F0F0;
  --color-bg-form: #FFFEF5;
  --color-txt: #262626;
  --color-txt2: 38,38,38;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-min: "Noto Serif JP", serif;
  --font-en: "Amiri", serif;
  --hover-opacity: 0.8;
  --bg1: 186, 183, 175;
  --bg2: #FFFAF2;
}
@media screen and (min-width: 768px) {
  :root {
    --container-default: 118.8rem;
    --container-small: 100rem;
    --container-xs: 80rem;
  }
}

.key { color: var(--color-primary) !important; }
.attention { color: var(--color-danger);}
.jp { font-family: var(--font-ja); }
.en { font-family: var(--font-en); letter-spacing: 0.01em; }
.min { font-family: var(--font-min); letter-spacing: 0.01em; }
.green2 { color: var(--color-green2);}
.beige { color: var(--color-beige);}