@charset "UTF-8";

:root {

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

  --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;


  /* Social */

  --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;


  /* Project */
  /* text */
  --color-text-default: #111111;
  --color-text-gray-07: #777777;
  --color-text-gray-08: #888888;
  --color-text-red: #CB001A;

  /* アクセント/あしらい等 */
  --color-text-accent: var(--color-text-red);

  /* 背景色 */
  --color-bg-black: var(--color-text-default);
  --color-bg-gray: #F4F4F4;

  /* UI系 */
  --color-tab: #BBBBBB;
  --color-border-default: #CCCCCC;
  --color-frame-default: #DDDDDD;

  --color-primary: var(--color-text-red);
  --color-emphasis: var(--color-text-red);
  --color-text-link: var(--color-text-red);
  



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

  /* Font Family */
  --font-notosans: 'Noto Sans JP';
  --font-roboto: 'Roboto';
  --font-ja: var(--font-notosans), var(--font-fallback);
  --font-en: var(--font-roboto), var(--font-fallback);
  --font-fallback: 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS UI Gothic', 'ＭＳ ゴシック', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-main: var(--font-roboto), var(--font-notosans), var(--font-fallback);

  /* Font Weight (fw = font-weight) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;




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

  --transition-duration: 300ms;
  --transition-duration-short: 150ms;
  --transition-duration-long: 500ms;
  --transition-duration-extra-long: 1000ms;
  --transition-duration-extra-ignition: 2000ms;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);
  --transition-default-ignition: var(--transition-duration-extra-long) var(--transition-timing-function);
  --hover-opacity: 0.5;




  /* ===============================================
    * 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%, var(--design-max-width, 114rem)); */
  /* --inner-width: 92%; */
  --design-default-width: 130rem;
  --design-max-width: 192rem;
  --padding-horizontal-global: 1.5rem;

  /* ページ最上部からパンくずまでの余白 */
  /* --spacing-page-top: 9rem; */




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

  --height-ticker: 0rem;
  --height-header-primary: 6rem;
  --height-header-global-nav: 0rem;
  --height-header-main: 83px;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));




  /* ===============================================
    * Assets *
  =============================================== */

  /* Arrow - Right */
  /* --asset-link-arrow-right-red:  */

}

@media (min-width: 431px) and (max-width: 768px) {
  :root{
    --height-header-primary: 7rem;
  }
}
@media (min-width: 768px) {
  :root {
    /* ===============================================
      * Box Model *
    =============================================== */

    --padding-horizontal-global: 5rem;

    --spacing-page-top: 12rem;
  }
}

/* @media (min-width: 431px) and (max-width: 768px) {
  :root{
    --height-header-primary: 10rem;
  }
} */
@media (min-width: 769px) {
  :root {
    /* ===============================================
      * Header *
    =============================================== */

    --height-header-primary: 7rem;
  }
}