@charset "UTF-8";

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

  --color-primary: #FEDA31;
  --color-secondary: #292929;
  --color-tertiary: #00336B;

  --color-emphasis: #DD1504;
  --color-text-default: var(--color-secondary);
  --color-textlink: var(--color-primary);

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

  --color-gray-main: #eee;

  --color-bg-form: #f4f7fd;

  --color-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;

  --color-indicator:#E6E6E6;
  --color-indicator-active:var(--color-primary);


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

  /* Font Family */
  --font-hiragino-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans";
 --font-noto: "Noto Sans JP" ;
  --font-lato: 'Lato';
  --font-ja: var(--font-noto);
  --font-en: var(--font-noto);
  --font-main: 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;


  /* Line Height */
  --leading-default: 1.7;


  /* Letter Spacing */
  --tracking-default: 0.04em;


  /* ===============================================
    * 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;


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

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

  --padding-horizontal-global: 1.5rem;
  --container-padding: 2.0rem;

  /* ===============================================
    * Header *
  =============================================== */
  --height-header-primary: 5.2rem;
  --height-header: var(--height-header-primary);
}

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

    --inner-width: min(85.7142%, 120rem);
  }
}