@charset "UTF-8";

:root {
  /* ===============================================
    * Color *
  =============================================== */
  /* 
  --color-primary: #111690;
  --color-secondary: #E1E9F7; */

  --color-primary: #3E393B;
  --color-secondary: #DDD;

  --color-black-text: #1D181A;
  --color-black-fill: #3E393B;

  --color-emphasis: #D5212F;
  --color-text-default: var(--color-black-text);
  --color-textlink: #23ABDD;
  --color-text-gray: #888;

  --color-black: #000;
  --color-white: #fff;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #e6e4e4;
  --color-gray-300: #dbdbdb;
  --color-gray-400: #bebebe;
  --color-gray-500: #7e7e7e;
  --color-gray-600: #4e4e4e;

  --color-bg-form: #f4f7fd;
  --color-bg-gray-light: #F8F8F8;
  --color-bg-gray-medium: #F0F0F0;

  --color-gray-light: #AAA;
  --color-gray-medium: #726D6F;

  --color-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-line-primary: #06C755;
  --color-social-google-primary: #000;
  --color-social-rakuten-primary: #BF0000;

  --color-gender-women: #EB6DA5;
  --color-gender-men: #3480E8;
  --color-gender-kids: #EBBA35;

  --color-gender-women-light: #FFF8FA;
  --color-gender-men-light: #F0FAFC;
  --color-gender-kids-light: #FDFDF0;

  --color-rgb-women: 235, 109, 165;
  --color-rgb-men: 52, 128, 232;
  --color-rgb-kids: 235, 186, 53;

  --color-gradient-women: linear-gradient(to right, #A7D7FA, #FF84D0);
  --color-gradient-men: linear-gradient(to right, #537BFF, #84DEFF);
  --color-gradient-kids: linear-gradient(to right, #FCDB51, #FD82C0);

  --color-memberrank-heading: #9A9A9A;
  --color-memberrank-content: #F8F8F8;


  /* ===============================================
    * Font *
  =============================================== */

  /* Font Family */
  
  --font-notosans: Noto Sans JP;
  --font-cabin: Cabin;

  --font-ryo-gothic: ryo-gothic-plusn;
  --font-agenda: var(--font-cabin);

  --font-ja: var(--font-notosans), sans-serif;
  --font-en: var(--font-cabin), sans-serif;
  --font-main: var(--font-cabin), var(--font-notosans), sans-serif;


  /* Font Weight (fw = font-weight) */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ===============================================
    * Shadow *
  =============================================== */

  --shadow-s: 0 0 1rem rgba(29, 24, 26, 0.05);
  --shadow-m: 0 0 3.5rem rgba(29, 24, 26, 0.1);

  /* ===============================================
    * Animation *
  =============================================== */

  --transition-duration: 0.3s;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);

  --hover-opacity: 0.7;
  --hover-opacity-button-base: 0.4;


  /* ===============================================
    * z-index *
  =============================================== */

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;


  /* ===============================================
    * Margin *
  =============================================== */
  --margin-xxxxs: 0.5rem;
  --margin-xxxs: 1rem;
  --margin-xxs: 1.5rem;
  --margin-xs: 2rem;
  --margin-s: 2.5rem;
  --margin-m: 3rem;
  --margin-l: 4rem;
  --margin-xl: 5rem;
  --margin-xxl: 6rem;
  --margin-xxxl: 8rem;
  --margin-xxxxl: 10rem;

  /* ===============================================
    * Box Model *
  =============================================== */

  --container-fluid: 100%;
  --container-default: min(100%, 140rem);

  --inner-width: 92%;


  /* ===============================================
    * Header *
  =============================================== */

  --height-ticker: 0rem;
  --height-header-primary: 5.2rem;
  --height-header-global-nav: 0rem;
  --header-userinfo: 0rem;
  --height-header-sp-follow: 0rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));
  
}

 /* ===============================================
    * Gender Color *
  =============================================== */

  [data-gender=women] {
    --color-gender: var(--color-gender-women);
    --color-gender-rgb: var(--color-rgb-women);
  }
  [data-gender=men] {
    --color-gender: var(--color-gender-men);
    --color-gender-rgb: var(--color-rgb-men);
  }
  [data-gender=kids] {
    --color-gender: var(--color-gender-kids);
    --color-gender-rgb: var(--color-rgb-kids);
  }

@media screen and (min-width: 768px) {
  :root {
    /* ===============================================
      * Box Model *
    =============================================== */

    --inner-width: min(71.25%, 114rem);
    --form-inner-width: 78rem;

    /* ===============================================
      * Header *
    =============================================== */

    --height-header-global-nav: 5.2rem;
    --header-userinfo: 0rem;

  }
}


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