@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, h2, h3, h4, h5, h6) {
  font-size: 100%;
/*  font-weight: 400*/
}

: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: 'Noto Sans JP', sans-serif;
  --jp-accent: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
  --en: 'Courgette', cursive;
  --en-accent: 'Courgette', cursive;

  --fw-n-jp: 400;
  --fw-b-jp: 500;
  --fw-n-en: 400;
  --fw-b-en: 700;

  --color-font: #444;

    /*サイトカラー*/
  --color-base: #ffb498;
  --color-base1: #ffc1aa;
  --color-base2: #f7ecde;
  --color-base3: #fffbfa;
  --color-accent: #ffb498;

  /*モノトーン*/
  --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: .75; /*1〜.75で設定する*/
  --font-size-enlargement: 1;

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

  --space-s: 4vw;
  --space-m: 10vw;
  --space-l: 15vw;

  --space-ratio: 1;
}

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;
}

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

    --space-ratio: 1;
  }
  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;
  }
}