/*
** CSS変数
*/

:root {
  --standard-width: 375;
  --main-container-width: 335;
  --standard-font-size: 14;
  --calc-font-size: 16;
  /* Common */
  --max-contents-width: 1280;
  --max-container-width--s: 960;
  --max-container-width--m: 1080;
  --standard-line-height: 1.5;
  --z-index--low: 1;
  --z-index--mid: 5;
  --z-index--max: 10;
  --rounded--low: 0.3rem;
  --rounded--mid: 0.5rem;
  --rounded--max: 2.4rem;
  --transition: 0.2s ease-out;

  /* Font */
  --noto-sans: 'Noto Sans JP', sans-serif, 'Font Awesome 7 Pro', 'Font Awesome 7 Brands', 'FontAwesome';

  /* Color */
  --font: #653300;
  --bg-gen: #FEF1E6;
  --bg-exh: #FFF9E8;
  --bg-buy: #EAF0F4;
  --bg--news: #FFFAF4;
  --pink: #D1384C;
  --orange:  #DB833C;
  --green: #8E953F;
  --border: #D8D3C9;

  /* MarginSize */
  --ms-80-to-40: 4rem;
  --ms-60-to-20: 2rem;
  --ms-40-to-24: 2.4rem;
  --ms-40-to-16: 1.6rem;
  --ms-32-to-24: 2.4rem;
  --ms-32-to-20: 2rem;
  --ms-24-to-16: 1.6rem;
  --ms-24-to-8: 0.8rem;
  --ms-30-to-25: 2.5rem;
  --ms-30-to-20: 2rem;
  --ms-20-to-16: 1.6rem;
  --ms-16-to-12: 1.2rem;
  --ms-12-to-10: 1rem;
  --ms-10-to-8: 0.8rem;
  --ms-8-to-5: 0.5rem;
  --ms-4-to-3: 0.3rem;

}


@media screen and (min-width: 960px) {

  :root {
    --standard-width: 1280;
    --main-container-width: 960;
    --standard-font-size: var(--calc-font-size);
    /* Common */
    --rounded--low: 0.4rem;
    --rounded--mid: 0.8rem;
    --rounded--max: 3rem;
    --transition: 0.3s ease-out;

    /* MarginSize */
    --ms-80-to-40: 8rem;
    --ms-60-to-20: 6rem;
    --ms-40-to-24: 4rem;
    --ms-40-to-16: 4rem;
    --ms-32-to-24: 3.2rem;
    --ms-32-to-20: 3.2rem;
    --ms-24-to-16: 2.4rem;
    --ms-24-to-8: 2.4rem;
    --ms-30-to-25: 3rem;
    --ms-30-to-20: 3rem;
    --ms-20-to-16: 2rem;
    --ms-16-to-12: 1.6rem;
    --ms-12-to-10: 1.2rem;
    --ms-10-to-8: 1rem;
    --ms-8-to-5: 0.8rem;
    --ms-4-to-3: 0.4rem;

  }

}