@charset "UTF-8";


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

  --color-primary: var(--color-ishiguro-blue);
  --color-secondary: var(--color-ishiguro-blue);
  --color-emphasis: var(--color-red);
  --color-text-default: #143A60;
  --color-textlink: var(--color-primary);
  --color-price-discounted: var(--color-red);

  --color-black: #222;
  --color-white: #fff;
  --color-red: #E8340C;

  --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-gray-a: #aaa;

  --color-bg-form: #f5f6f7;
  --color-placeholder-form: #999;
  --color-border: #DBDBDB;

  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-line-primary: #06C755;
  --color-social-amazon-primary: #F0C14B;

  /* Specify */
  --color-bg-primary: #F5F6F7;
  --color-bg-secondary: #F0FEFF;
  --color-ishiguro-blue: #0053A6;
  --color-cicon-new: #F79D34;

  --color-bid1-primary: #2B7CCD;
  --color-bid1-secondary: #2B7CCD;
  --color-bid1-bg-strong: #F0F8FD;
  --color-bid1-bg-weak: #FAFDFF;

  --color-bid2-primary: #FD7E58;
  --color-bid2-secondary: #FD7E58;
  --color-bid2-bg-strong: #FFEBE5;
  --color-bid2-bg-weak: #FFFBF8;

  --color-bid3-primary: #FAF575;
  --color-bid3-secondary: #2B7CCD;
  --color-bid3-bg-strong: #F0F8FD;
  --color-bid3-bg-weak: #FFFEF7;
  --color-bid3-tab-active: #EFDC00;

  --color-bid4-primary: var(--color-black);
  --color-bid4-secondary: var(--color-black);
  --color-bid4-text: var(--color-black);

  --color-brand-primary: var(--color-text-default);
  --color-brand-secondary: var(--color-bid1-primary);


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

  /* Font Family */

  --font-yu-gothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic";
  --font-barlow: "Barlow";
  --font-ja: var(--font-yu-gothic), sans-serif;
  --font-en: var(--font-barlow), sans-serif;
  --font-main: var(--font-yu-gothic), sans-serif;


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

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


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

  /* Arrow */
  --icon-arrow-blue: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.28%22%20height%3D%229.061%22%20viewBox%3D%220%200%205.28%209.061%22%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%E2%86%92%22%20d%3D%22M21%2C18l4%2C4-4%2C4%22%20transform%3D%22translate(-20.47%20-17.47)%22%20fill%3D%22none%22%20stroke%3D%22%23143a60%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E');
  --icon-arrow-white: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.7%22%20height%3D%2210.908%22%20viewBox%3D%220%200%205.7%2010.908%22%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%26gt%3B%22%20d%3D%22M2152-778.505l3.559-4.041L2152-786.587l1.244-1.413%2C4.207%2C4.776a1.028%2C1.028%2C0%2C0%2C1%2C.249.678%2C1.025%2C1.025%2C0%2C0%2C1-.249.678l-4.207%2C4.776Z%22%20transform%3D%22translate(-2152%20788)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  --icon-arrow-black: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.28%22%20height%3D%229.061%22%20viewBox%3D%220%200%205.28%209.061%22%3E%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%E2%86%92%22%20d%3D%22M21%2C18l4%2C4-4%2C4%22%20transform%3D%22translate(-20.47%20-17.47)%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E');


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

  --transition-duration: 300ms;
  --transition-duration-short: 150ms;
  --transition-duration-long: 400ms;
  --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 *
  =============================================== */

  --width-max-content: 140rem;
  --width-medium-content: 110rem;

  --container-fluid: 100%;
  /* --container-default: min(100%, var(--width-max-content)); */
  --container-default: min(100%, calc(var(--width-max-content) + (var(--padding-horizontal-general) * 2)));
  --container-medium: min(78.57%, calc(var(--width-medium-content) + (var(--padding-horizontal-general) * 2)));
  /* 78.57% = 1100 / 1400 * 100% */
  --inner-width: 92%;

  --padding-horizontal-general: min(4vw, 1.5rem);

  --margin-xxxxs: .5rem;
  --margin-xxxs: 1rem;
  --margin-xxs: 1.5rem;
  --margin-xs: 2rem;
  --margin-s: 2.5rem;
  --margin-m: 3rem;
  --margin-l: 4rem;
  --margin-xl: 5rem;
  --margin-xxl: 6rem;
  --margin-xxxl: 8rem;
  --margin-xxxxl: 10rem;


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

  --height-ticker: 5rem;
  --height-header-primary: 6.5rem;
  --height-header-global-nav: 7.5rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));


  /* ===============================================
    * Footer *
  =============================================== */

  --footer-bg: linear-gradient(#2f78c1 0%, #4fa8d8 100%);

}


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

    --inner-width: min(71.25%, var(--width-max-content));
    --form-inner-width: 78rem;

    --padding-horizontal-general: min(7.14vw, 2rem);


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

    --height-ticker: 3.2rem;
    --height-header-primary: 7rem;
    --height-header-global-nav: 8rem; /* 総合TOPのときは0rem */
  }
}


@media screen and (min-width: 1024px) {}