@charset "UTF-8";
/* -------------------------------------------------------------------------- */
/*                                    font                                    */
/* -------------------------------------------------------------------------- */
/*
font-family: "a-otf-ryumin-pr6n", serif;
font-weight: 300;
font-style: normal;

.cormorant-garamond-<uniquifier> {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300-700;
  font-style: normal or italic;
}


.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
*/

/* -------------------------------- variables ------------------------------- */

:root {
  /* -------------------------------------------------------------------------- */
  /*                                    color                                   */
  /* -------------------------------------------------------------------------- */
  --color-black: #0e0e10;
  --color-white: #efefef;
  --color-gray: #dbdbdb;
  /* -------------------------------------------------------------------------- */
  /*                                    font                                    */
  /* -------------------------------------------------------------------------- */
  --font-ryumin: "a-otf-ryumin-pr6n", serif;
  --font-garamond: "Cormorant Garamond", serif;
  --font-notoSans: "Noto Sans JP", sans-serif;
  /* -------------------------------------------------------------------------- */
  /*                                  text size                                 */
  /* -------------------------------------------------------------------------- */
  --text-xs: 1.0rem;
  --text-s: 1.6rem;
  --text-ms: 2rem;
  --text-m: 2.4rem;
  --text-ml: 3rem;
  --text-l: 3.2rem;
  /* -------------------------------------------------------------------------- */
  /*                                 text weight                                */
  /* -------------------------------------------------------------------------- */
  --light: 300;
  --medium: 400;
  --bold: 700;
  /* -------------------------------------------------------------------------- */
  /*                                    layer                                   */
  /* -------------------------------------------------------------------------- */
  --zindex-bg: -5;
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-header: 5;
  /* -------------------------------------------------------------------------- */
  /*                                   margin                                   */
  /* -------------------------------------------------------------------------- */
  --margin-xs: 2.4rem;
  --margin-s: 3.2rem;
  --margin-m: 6.4rem;
  --margin-l: 12.8rem;
  --margin-xl: 20rem;

  /* ------------------------------- responsive ------------------------------- */

  /* max-width: 1920px
  max-width: 1280px
  max-width: 960px
  max-width: 768px
  max-width: 430px
  min-width: 375px */

  @media (max-width: 1280px) {
    /* -------------------------------------------------------------------------- */
    /*                                  text size                                 */
    /* -------------------------------------------------------------------------- */
    --text-s: 1.4rem;
    --text-ms: 1.8rem;
    --text-m: 2rem;
    --text-ml: 2.6rem;
    --text-l: 2.8rem;
    /* -------------------------------------------------------------------------- */
    /*                                   margin                                   */
    /* -------------------------------------------------------------------------- */
    --margin-xs: 2.0rem;
    --margin-m: 4.8rem;
    --margin-l: 8.8rem;
    --margin-xl: 10.4rem;
  }

  @media (max-width: 960px) {
    /* -------------------------------------------------------------------------- */
    /*                                  text size                                 */
    /* -------------------------------------------------------------------------- */
    --text-xs: 0.8rem;
    --text-s: 1.4rem;
    --text-ms: 1.6rem;
    --text-m: 1.8rem;
    --text-ml: 2.2rem;
    --text-l: 2.8rem;
    /* -------------------------------------------------------------------------- */
    /*                                   margin                                   */
    /* -------------------------------------------------------------------------- */
    --margin-xs: 1.6rem;
    --margin-m: 4.0rem;
    --margin-l: 7.2rem;
    --margin-xl: 10.4rem;
  }

  @media (max-width: 768px) {
    /* -------------------------------------------------------------------------- */
    /*                                  text size                                 */
    /* -------------------------------------------------------------------------- */
    --text-s: 1.4rem;
    --text-ms: 1.4rem;
    --text-m: 1.6rem;
    --text-ml: 2rem;
    --text-l: 2.6rem;
    /* -------------------------------------------------------------------------- */
    /*                                   margin                                   */
    /* -------------------------------------------------------------------------- */
    --margin-xs: 1rem;
    --margin-m: 3.2rem;
    --margin-l: 5.6rem;
    --margin-xl: 8rem;
  }

  @media (max-width: 430px) {
    /* -------------------------------------------------------------------------- */
    /*                                  text size                                 */
    /* -------------------------------------------------------------------------- */
    --text-s: 1.4rem;
    --text-ms: 1.2rem;
    --text-m: 1.4rem;
    --text-ml: 1.8rem;
    --text-l: 2.4rem;
    /* -------------------------------------------------------------------------- */
    /*                                   margin                                   */
    /* -------------------------------------------------------------------------- */
    --margin-xs: 0.8rem;
    --margin-m: 2.4rem;
    --margin-l: 4.8rem;
    --margin-xl: 6.4rem;
  }
}