@charset "UTF-8";

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

  --color-primary: var(--color-project-primary, #FF8C00);
  --color-secondary: var(--color-project-secondary, #113258);

  --color-emphasis: #F04444;
  --color-text-default: var(--color-black);
  --color-textlink: var(--color-primary);

  --color-black: var(--color-project-text, #0F0F0F);
  --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-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 */
  --color-project-text: #0F0F0F;
  --color-project-primary: #FF8C00;
  --color-project-secondary: #113258;
  --color-project-bg: #F4F4F4;


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

  /* Font Family */

  --font-notosans: 'Noto Sans JP';
  --font-roboto: 'Roboto';
  --font-ja: var(--font-notosans), var(--font-fallback, sans-serif);
  --font-en: var(--font-roboto), var(--font-fallback, sans-serif);
  --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, sans-serif);


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

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


  /* ===============================================
    * 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%, var(--design-width, 120rem));

  --inner-width: 92%;

  --design-width: 120rem; /* デザインデータ上の最大コンテンツ幅 */


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

  /* 丸背景に右矢印 */
  --icon-circle-arrow-right: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88_1583_18%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%201583%20%E2%80%93%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_51571%22%20data-name%3D%22%E3%83%91%E3%82%B9%2051571%22%20d%3D%22M18%2C0A18%2C18%2C0%2C1%2C1%2C0%2C18%2C18%2C18%2C0%2C0%2C1%2C18%2C0Z%22%20fill%3D%22%23113258%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_50294%22%20data-name%3D%22%E3%83%91%E3%82%B9%2050294%22%20d%3D%22M1238%2C2941.534l5.195%2C5.194-5.195%2C5.195%22%20transform%3D%22translate(-1222.5%20-2929.033)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');


  /* ===============================================
    * Swiper *
  =============================================== */

  --swiper-navigation-size: 3.6rem;
  --swiper-navigation-sides-offset: 1rem;


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

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

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

    --inner-width: min(71.25%, var(--design-width, 120rem));
    --form-inner-width: 78rem;

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

    --height-header-global-nav: 5.2rem;
  }
}