@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%;
  height: auto;
  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: "Zen Kaku Gothic New", sans-serif;
  --jp-accent: "Zen Maru Gothic", sans-serif;
  --en: "Montserrat", sans-serif;
  /* --en-accent: ; */

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

  --color-font: #333;

  /*
    サイトカラー
    base → 背景
    base1　→ 基本の色
    base2　→ ボーダーありボタンや丸矢印
    base3　→ 日付
    base4　→ 赤
    accent → 茶
  */

  --color-base: #FBF8F6;
  --color-base1: #146639;
  --color-base2: #137F44;
  --color-base3: #F3E7C5;
  --color-base4: #FBF8F6;
  --color-accent: #99740A;

  /*モノトーン*/
  --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;

  --ls: 1;

  --space-s: 5vw;
  --space-m: 8.3vw;
  --space-l: 16.8vw;

  /* ########################################
     SCALE RULE
  ######################################## */

  /* font scale
     xs: 10-14
     sm: 15-20
     md: 22-28
     lg: 30-36
     xl: 38-58
     xxl: 60-
  */
  --fs-ratio-xs: 1;   /* 10〜14 */
  --fs-ratio-sm: 1;  /* 15〜20 */
  --fs-ratio-md: 1; /* 22〜28 */
  --fs-ratio-lg: 1;  /* 30〜36 */
  --fs-ratio-xl: 1;  /* 38〜58 */
  --fs-ratio-xxl: 1; /* 60〜 */


  /* space scale
     xs: 5-8
     sm: 10-20
     md: 25-50
     lg: 60-95
     xl: 100-
  */
  --space-ratio-xs: 1;   /* 5〜8 */
  --space-ratio-sm: 1; /* 10〜20 */
  --space-ratio-md: 1; /* 25〜50 */
  --space-ratio-lg: 1; /* 60〜95 */
  --space-ratio-xl: 1;  /* 100〜 */

  /* ratio = 1 でデバイス共通値として使用
     可変したい時だけ各ブレイクポイントで上書きする */
}

body {
  position: relative;
  font-size: 14px;
  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 {
    --fs-ratio-xs: 1;
    --fs-ratio-sm: 1;
    --fs-ratio-md: 1;
    --fs-ratio-lg: 1;
    --fs-ratio-xl: 1; /* 38〜58 */
    --fs-ratio-xxl: 1; /* 60〜 */

    --space-ratio-xs: 1;
    --space-ratio-sm: 1;
    --space-ratio-md: 1;
    --space-ratio-lg: 1;
    --space-ratio-xl: 1;
  }

  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --fs-ratio-xs: 1;
    --fs-ratio-sm: 1;
    --fs-ratio-md: 1;
    --fs-ratio-lg: 1;
    --fs-ratio-xl: 1;
    --fs-ratio-xxl: 1;

    --space-ratio-xs: 1;
    --space-ratio-sm: 1;
    --space-ratio-md: 1;
    --space-ratio-lg: 1;
    --space-ratio-xl: 1;

    --container-s: 1000px;
    --container-m: 1200px;
    --container-l: 1300px;
  }

  body {
    font-size: 14px;
  }
}