/* stylelint-disable */

.theme-component {
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  --font-sans-serif: 'Lato', arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', 'メイリオ', 'meiryo', sans-serif;
  --margin-xxxs: 8px;
  --margin-xxs: 12px;
  --margin-xs: 20px;
  --margin-s: 32px;
  --margin-m: 48px;
  --margin-l-pc: 80px;
  --margin-l-sp: 60px;
  --margin-xl-pc: 140px;
  --margin-xl-sp: 120px;
  --margin-page-pc: 138px;
  --margin-page-sp: 20px;
  --margin-header-pc: 132px;
  --margin-header-sp: 80px;

  --margin-product-section: 240px;

  --header-height-pc: 0px;
  --header-height-sp: 0px;
  /*  */
  --color-link: #1e4dc6;
  --color-link-hover: #4596ff;
  --color-background: transparent;
  --color-background-sub: #fff;
  --color-background-lightgray: #f9f9fc;
  --color-background-favorite-image: #f9f9fc;
  --color-related-contents: #F6F6F6;
  --color-background-bottom-content: #f9f9fc;
  --color-background-transparent: rgba(255, 255, 255, 0.7);
  --color-background-gradient-transparent: rgba(255, 255, 255, 0);
  --color-background-top-button: #fff;
  --color-disabled: #aaa;
  --color-background-notification: #f35556;
  --color-background-label-icon: #fff;
  --color-background-label-icon-checked: #F0F4FF;
  /*  */
  --color-text-link: #1e4dc6;
  --color-button-text: #1656fe;
  --color-top-button-text: #0B163E;
  --color-top-button-text-hover: #1656fe;
  --color-text-bright-blue: #1a73f6;
  /*  */
  --color-text-white: #fff;
  --color-text-black: #0b163e; /* テキストは基本的に#0b163eで統一する */
  --color-text-annotation: #db0000;
  --color-text: #061448; /* 基本的には使用しない */
  --color-text-main: #061448;
  --color-text-sub: #8b91a0;
  --color-text-disabled: #cdd2de;
  --color-text-caption: #a3a5ac;
  --color-text-placeholder: #a3a5ac;
  --color-text-memo-favorite: #0b163e;
  --color-button-background: #fff;
  --color-button-content-background: #fff;
  --color-button-content-outline: #1e4dc6;
  --color-image-back: #f2f6fa;
  --color-image-overlay: rgba(0, 0, 0, 0.4);
  --color-button-fill-background: #1e4dc6;
  --color-button: #1e4dc6;
  --color-button-video: #030A17;
  --color-button-video-hover: #1E4DC6;
  --color-button-video-alpha: #030A1780;
  --color-button-disabled: #cdd2de;
  --color-button-disabled-text: #ffffff;
  --color-button-fill-text: #fff;
  --color-button-background-hover: #0b163e;
  --color-controller-button-background-hover: #1E4DC6;
  --color-object-line: #e5eaee;
  --color-object-calendar-saturday: #5e85f4;
  --color-annotation-line: #e5eaee;
  --color-border: #d8e0e6;
  --color-section-border: #0b163e;
  --color-alert-border: #F35556;
  --color-heading-decoration: #0b163e;
  --color-relations-heading-decoration: #0b163e;
  --color-num-of-selections: #0b163e;
  --color-table-header: #ecf1ff;
  --color-table-cell-header: #f8f9ff;
  --color-table-border: #e7edf2;
  --color-bg-sub: #f8f8fa;
  --color-tag-background: #f8f8fa;
  --color-navy: #13449d;
  --color-object-alert: #db0000;
  --color-background-alert: #DB000005;
  --color-label-fill-favorite: #1656FE;

  --color-footer-global-background: #333;
  --color-footer-breadcrumb-link: #FFFFFF;
  --color-footer-breadcrumb-text: #a3a5ac;
  --color-footer-breadcrumb-icon: #E5EAEE;
  --color-footer-background: #0b163e;
  --color-footer-background-sub: rgba(255, 255, 255, 0.1);
  --color-footer-icon: #a3a5ac;
  --color-footer-border: #283562;

  --color-rich-anchor: #ced2dd;
  --color-rich-anchor-selected: #2750bf;
  --color-rich-anchor-square: #84878F;
  --color-rich-anchor-square-selected: #2750bf;

  /* z-index */
  --z-index-header: 1000;
  --z-index-local-nav: 250;
  --z-index-hashlink: 100;
  --z-index-pulldown: 101;
  --z-index-modal: 9999;
  --z-index-close: 10000;

  /* layout */
  --layout-pc-width: 1440px;
  --layout-max-width: 1164px;
  --layout-tablet-width: 1024px;
  --layout-tablet-max-width: 720px;
  --layout-sp-width: 375px;
  --layout-sp-max-width: 335px;
  --layout-button-max-width: 558px;
  --layout-button-mini-max-width: 361px;
  --layout-middle-width: 962px;
  --article-max-width: 760px;
  --header-height-pc: 100px;
  --header-height-sp: 60px;

  /* table */
  --color-modal-wrap: #fff;
  --color-table-header: #F0F4FF;
  --color-table-record: #F8F9FE;
  --color-table-cel: #FFFFFF;
  --color-blockquote: #f9f9fc;
  --color-intervew-comment: #f9f9fc;
  --color-article-background: #ffffff;
  --color-block-quote-text: #061448;
  --color-block-quote-blue: #F9F9FC;
  --color-block-quote-red: #FEFAFA;
  --color-froala-hr: #F1F4FE;

  --color-background-footer: #091635;

  /* local nav */
  --color-local-nav-background: #f9f9fc;
  --color-local-nav-background-hover: #fff;
  --color-local-nav-border: #e5eaee;
  --color-local-nav-border-hover: #e5eaee;
  --color-local-nav-text: #0B163E;
  --color-local-nav-background-transparent: rgba(255, 255, 255, 0.4);
  --color-local-nav-background-transparent-hover: #f9f9f9;
  --color-local-nav-text-gradient: rgba(30, 77, 198, 0);
  --color-local-nav-normal-gradient: rgba(11, 22, 62, 0);
  --color-local-nav-border-transparent: rgba(255, 255, 255, 0.1);

  /* product */
  --color-article-back: #ffffff;
  /* product conversion */
  --color-conversion-left-bg: #fff;
  --color-conversion-left-text: var(--color-link);
  --color-conversion-right-bg: #fff;
  --color-conversion-right-text: var(--color-link);
  --color-conversion-fill-text: 0b163e;

  /* calendar */
  --color-calendar-tile: #a3a5ac;

  /* srad系 */
  --color-background-srad: #f9f9fc;
  --color-background-button-srad: #292d36;
  --color-button-favorite-srad: #fff;
  --color-tag-favorite-srad: #0B163E;

  /* support */
  --color-background-support: #f9f9fc;

  /* article label */
  --color-background-label: #1E4DC6;
  --color-text-label: #fff;
}

.theme-component.-dark {
  /* ref https://www.figma.com/file/d6QErygpmD3EduPhLMjnv0/TOTO_design?node-id=10%3A0 */
  --color-link: #6cbbf4;
  --color-link-hover: #98ffff;
  --color-background: #030a17;
  --color-background-sub: #030a17;
  --color-background-lightgray: #171b23;
  --color-background-favorite-image: #030A17;
  --color-background-alert: rgba(219, 0, 0, 0.02); /* TODO 決まってない */
  --color-background-transparent: rgba(0, 0, 0, 0.7);
  --color-background-gradient-transparent: transparent;
  --color-background-top-button: #6cbbf4;
  --color-background-label-icon: #181B22;
  --color-background-label-icon-checked: #030A17;

  --color-disabled: #aaa;
  --color-text: #e9eef8;
  --color-text-white: #E9EEF8;
  /* TODO 一旦時間ないので苦肉の策 */
  --color-text-black: #e9eef8;
  --color-text-main: #e9eef8;
  --color-text-sub: #e9eef8; /* TODO 決まってな}い */
  --color-text-disabled: #e9eef8; /* TODO 決まってな}い */
  --color-text-link: #6cbbf4;
  --color-top-button-text: #030a17;
  --color-top-button-text-hover: #3C9FE8;
  --color-text-annotation: #db0000;
  --color-text-memo-favorite: #ffffff;
  --color-button-background: transparent;
  --color-button-content-background: rgba(152, 218, 255, 0.15);
  --color-button-content-outline: rgba(152, 218, 255, 0.15);
  --color-button-fill-background: #6cbbf4;
  --color-image-back: #1d2128;
  --color-button: rgba(152, 218, 255, 0.15);
  --color-button-disabled: rgba(205, 210,222, 0.1);
  --color-button-disabled-text: rgba(163, 165, 172, 0.3);
  --color-button-text: #6cbbf4;
  --color-button-fill-text: #030a17;
  --color-button-background-hover: #3C9FE8;
  --color-controller-button-background-hover: #6CBBF4;
  --color-border: #696c73; /* TODO 決まってな}い */
  --color-related-contents: #171B23;
  --color-background-bottom-content: #161A1F; /* TODO 適当 */
  --color-section-border: #373b42;
  --color-heading-decoration: #6cbbf4;
  --color-relations-heading-decoration: #e9eef8;
  --color-table-header: #ecf1ff;
  --color-table-cell-header: #f8f9ff;
  --color-table-border: #e7edf2;
  --color-bg-sub: #161A1F; /* 座布団の色 */
  --color-navy: #FFFFFF;
  --color-label-fill-favorite: #6CBBF4;

  --color-footer-breadcrumb-link: #6CBBF4;
  --color-footer-breadcrumb-text: #6CBBF4;
  --color-footer-breadcrumb-icon: #e9eef8;
  --color-footer-background: #030A17;
  --color-footer-background-sub: #171B23;
  --color-footer-icon: #6CBBF4;
  --color-footer-border: #373B42;

  --color-rich-anchor: #eaeef7;
  --color-rich-anchor-selected: #7ebaef;
  --color-rich-anchor-square: #eaeef7;
  --color-rich-anchor-square-selected: #7ebaef;

  /* table */
  --color-modal-wrap: #181B22;
  --color-table-header: #040A16;
  --color-table-record: #040A16;
  --color-table-cel: #2F3238;
  --color-blockquote: #040a16;
  --color-intervew-comment: #040A16;
  --color-article-background: #181B22;
  --color-block-quote-text: #fff;
  --color-block-quote-blue: #040A16;
  --color-block-quote-red: #383B41;
  --color-froala-hr: #74767B;
  --color-background-footer: #030C16;
  --color-object-line: transparent;
  --color-annotation-line: #373b42;

  /* local nav */
  --color-local-nav-background: #171B23;
  --color-local-nav-background-hover: #171B23;
  --color-local-nav-border:  #373B42;
  --color-local-nav-border-hover:  #6CBBF4;
  --color-local-nav-text: #6CBBF4;
  --color-local-nav-background-transparent: rgba(55, 59, 66, 0.4);
  --color-local-nav-background-transparent-hover: #030A17;
  --color-local-nav-text-gradient: rgba(108, 187, 244, 0);

  /* product */
  --color-article-back: #181B22;

  /* srad系 */
  --color-button-favorite-srad: #fff;
  --color-background-button-srad: #1A1F26;
  --color-tag-favorite-srad: #fff;

  /* product conversion */
  --color-conversion-left-bg: #7EBAEF;
  --color-conversion-left-text: #1F3145;
  --color-conversion-right-bg: #1F3145;
  --color-conversion-right-text: #7EBAEF;
  --color-conversion-fill-text: 0b163e;

  /* article label */
  --color-background-label: #6CBBF4;
  --color-text-label: #030A17;
}