@charset "UTF-8";

:root{
  /* ===============================================
    * Color *
  =============================================== */

  --color-primary: #20AEE5;
  --color-secondary: #9DD9F3;
  ---color-green:#00C389;
  ---color-black:#333333;
  --color-red:#DE2E2E;
  --color-gray:#F4F4F4;
  --color-sky-blue:#EDF9FF;
  --color-gray-layer: 51, 51, 51;

  --color-dark-text:#6E6E6E;
  --color-emphasis: #DB2320;
  --color-text-default: var(--color-black);
  --color-textlink: var(--color-text-default);
  --color-white: #fff;
  --color-text-default: var(---color-black);
  --color-border-gray: #E3E3E3;


  /* --color-black: #000; */

  --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-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-google-primary: #000;
  --color-social-line-primary: #06C755;
  --color-social-amazon-primary: #F0C14B;


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

  /* Font Family */
  --font-inter:'Inter';
  --font-notosans: 'Noto Sans JP';
  --font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: var(--font-inter);
  --font-main: var(--font-en), var(--font-ja), sans-serif;


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

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


  /* ===============================================
    * Base html settiong *
  =============================================== */
  --letter-spacing: 0.05em;
  --line-height: 1.4;


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

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

  --hover-opacity: 0.6;


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

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


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

  --container-fluid: 100%;
  --container-default: min(100%, 114rem);
  --inner-width: 92%;


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

  --height-ticker: 0rem;
  --height-header-primary: 7.5rem;
  --height-header-global-nav: 0rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));
  --height-header-primary-sp: 8.0rem;
  --height-header-global-nav-under: 6.5rem;

  /* ===============================================
    * Count number *
  =============================================== */
  --count-num-width: 2.0rem;

  /* ===============================================
    * component 
  =============================================== */
  --border-radious: 3.0rem;
  --border-md-radious: 2.0rem;
  --border-sm-radious: 1.0rem;
  --border-min-radious: 0.5rem;
  --box-shadow: 0px 3px 10px rgba(51, 51, 51, 0.2);
  --box-sm-shadow: 0px 2px 5px rgba(51, 51, 51, 0.15);
  --grid-columns: 4;
}

@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;
    --height-header-global-nav-under: 7.5rem;
  }
}