@charset "UTF-8";

/* ===============================================
  * CSS Variables - CSS変数定義 *
=============================================== */

:root {
  /* レイアウト関連 */
  --width__contents: 1240; /* PCで１番多いコンテンツの横幅 */
  --width__breakpoint: 1440; /* リキッド計算の基準となる幅 */
  --space-inline__base: 25; /* 左右の余白（PC） */
  --max-width__base: 1920; /* 最大幅（PC） */

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

  --color-primary: var(--color-project-text);
  --color-secondary: #c1c6c2;

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

  --color-black: var(--color-project-text);
  --color-white: #fff;
  --color__red: #e20000;
  --color__black: #000;
  --color__black-dark: #231815;
  --color__yellow: #fff100;
  --color__yellow-light: #e7d546;
  --color__gray: #727171;
  --color__gray-light: #595757;
  --color__gray-light-2: #9fa0a0;

  --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: #2b2926;
  --color-project-sub: #c1c6c2;
  --color-project-bg: #f8f8f8;
  --color-project-accent: #fff841;

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

  /* ベースのフォントサイズ（rem計算で使用） */
  --font-size__base: 10;

  /* Font Family */

  --font-ibm-plex-sans: "IBM Plex Sans JP";
  --font-lexend: "Lexend";
  --font-ja: var(--font-ibm-plex-sans);
  --font-en: var(--font-lexend);
  --font-main: var(--font-en), var(--font-ja), sans-serif;
  --font-biz-ud-gothic: "BIZ UD Gothic";
  --font-noto-sans-jp: "Noto Sans JP", sans-serif;
  --font-arial: "Arial", 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%, 114rem);

  --inner-width: 92%;
  --padding-horizontal-global: calc(10 / 375 * 100%);

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

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

@media (max-width: 767px) {
  :root {
    --space-inline__base: 20;
    --max-width__base: 700;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --inner-width: min(71.25%, 114rem);
    --form-inner-width: 78rem;
    --height-header: 12rem;
    --container-default: min(
      100%,
      calc(114rem + (var(--padding-horizontal-global) * 2))
    );
    --padding-horizontal-global: min(calc(40 / 1400 * 100%), 4rem);
  }
}

/* ===============================================
  * Override *
=============================================== */

:root {
  --padding-horizontal-global: calc(10 / 375 * 100%);
}

@media (min-width: 768px) {
  :root {
    --padding-horizontal-global: min(calc(40 / 1400 * 100%), 4rem);
  }
}