@charset "utf-8";

/* RESET
------------------------------------------ */
:where(*) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::before, ::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where(h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja), h6:lang(ja)) {
  font-size: 100%;
  font-weight: var(--fw-b-jp);
}
:where(h1:lang(en), h2:lang(en), h3:lang(en), h4:lang(en), h5:lang(en), h6:lang(en)) {
  font-size: 100%;
  font-weight: var(--fw-b-en);
}

:where(img) {
  max-width: 100%;
  display: block;
  object-fit: cover;
  vertical-align: middle
}

:where(a) {
  color: inherit;
  text-decoration: none
}

:where(ul, ol) {
  list-style: none
}

:where(table) {
  border-collapse: collapse;
  width: 100%;
  font-size: 100%
}

:where(input, textarea, select, button) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: 100%;
  font-weight: 400;
  outline: none
}

address{
  font-style: normal;
}

@media screen and (min-width: 768px) {
  :where(img) {
    width: 100%;
    height:auto;
  }
}

:where(sup){
  vertical-align: top;
}


/* BASE
------------------------------------------ */
:root {
  --jp: "M PLUS 1", serif;
  --jp-accent: "M PLUS 1", serif;
  --en: "M PLUS 1", sans-serif;
  --en-accent: "M PLUS 1", serif;

  --fw-n-jp: 400;
  --fw-b-jp: 600;
  --fw-n-en: 400;
  --fw-b-en: 600;

  --color-font: #444;

  /*サイトカラー*/
  --color-base: #1B1B1D;
  --color-base1: #292629;
  --color-base2: #3b4a2d;
  --color-base3: #5B7932;
  --color-accent: #66a112;

  /*モノトーン*/
  --color-000: #000;
  --color-111: #111;
  --color-222: #222;
  --color-333: #333;
  --color-444: #444;
  --color-555: #555;
  --color-666: #666;
  --color-777: #777;
  --color-888: #888;
  --color-999: #999;
  --color-aaa: #aaa;
  --color-bbb: #bbb;
  --color-ccc: #ccc;
  --color-ddd: #ddd;
  --color-eee: #eee;
  --color-fff: #fff;

  --font-size-ratio: .8; /*1〜.75で設定する*/
  --font-size-enlargement: 1;

  --lh-ratio: 1;
  --ls: 1;

  --space-s: 4vw;
  --space-m: 8vw;
  --space-l: 12vw;

  --space-ratio: .5;
}

body {
  position: relative;
  font-size: 13px;
  font-family: var(--jp);
  font-weight: var(--fw-n-jp);
  color: var(--color-font);
  letter-spacing: var(--ls);
  line-height: 1;
  overflow-x: hidden;
  background-color: var(--color-base);
}

@media screen and (min-width: 768px) {
  :root {
    --font-size-ratio: .9; /*1〜.9で設定する*/
    --lh-ratio: 1;

    --space-ratio: .7;
  }
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --font-size-ratio: 1; /*1 〜 1.1 で設定する*/
    --space-ratio: 1;
  }
  body {
    font-size: 14px;
  }
}