@charset "UTF-8";

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

  --color-primary: var(--color-project-pink-primary);
  --color-secondary: var(--color-project-pink-secondary);

  --color-emphasis: var(--color-project-red);
  --color-text-default: var(--color-black);
  --color-textlink: var(--color-primary);

  --color-black: var(--color-project-text, #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-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: #595757;
  --color-project-pink-primary: #ECB0BA;
  --color-project-pink-secondary: #EEDCE0;
  --color-project-pink-tertiary: #FAF0F2;
  --color-project-pink-dark: #B95870;
  --color-project-gray-light: #EBEBEB;
  --color-project-gray-dark: #999;
  --color-project-white: #F5F5F5;
  --color-project-red: #D92727;
  --color-project-cv: var(--color-project-cyan);
  --color-project-cyan: #E696A3; /* NOTE: カラーコード変更のため、↑に名称変更 */


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

  /* Font Family */

  --font-biz-udp-gothic: 'BIZ UDPGothic';
  --font-montserrat: 'Montserrat';
  --font-ja: var(--font-biz-udp-gothic), var(--font-fallback);
  --font-en: var(--font-montserrat), var(--font-fallback);
  --font-fallback: 'Meiryo UI','メイリオ','ＭＳ Ｐゴシック','MS UI Gothic','ＭＳ ゴシック','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-main: var(--font-biz-udp-gothic), var(--font-fallback);


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

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


  /* Line Height (lh = line-height) */

  --lh-regular: 1.5;


  /* Letter Spacing (ls = letter-spacing) */

  --ls-regular: .08em;
  --ls-ja: .1em;
  --ls-en: .08em;


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

  --transition-duration: 300ms;
  --transition-duration-short: 150ms;
  --transition-duration-long: 750ms;
  --transition-duration-extra-long: 1000ms;
  --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%;


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

  --height-ticker: 0rem;
  --height-header-primary: 5.8rem;
  --height-header-global-nav: 0rem;
  --height-header-search-area: 6rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav) + var(--height-header-search-area));
}

:root:has(.header__content-wrapper--ticker .ticker__list-item) {
  --height-ticker: 2.8rem;
}


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

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

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

    --height-header-primary: 6.5rem;
    --height-header-global-nav: 0;
    --height-header-search-area: 0;
  }
}