:root {
  /* COLOR */
  --color-text: #363636;
  --color-text-weak: #5b5b5b;
  --color-text-weaker: #8b8b8b;
  --color-text-weakest: #b7b7b7;
  --color-text-link: #6793c2;
  --color-text-on-accent: #ffffff;

  --color-text-error: #d24023;

  --color-overlay: rgba(0,0,0,.85);
  --color-overlay-on-accent: rgba(255,255,255,.85);

  --color-brand: #D7000F;/*#bc2719*/
  --color-brand-weak: #D96461;
  --color-accent: #6A6A6A;
  --color-accent-weak: #A8A8A8;

  --color-bg: #ffffff;
  --color-bg-header: #ffffff;
  --color-bg-header-toppage: #ffffff;
  --color-bg-footer: #eeeeee;

  --color-menu-bar: #333333;
  --color-menu-bar-active: #ffffff;

  --color-menu-bg: var(--color-brand);

  --color-surface: #ffffff;
  --color-surface-weaker: #eeeeee;
  --color-deep: #333333;
  --color-deep-weaker: #838383;
  --color-border:#e6e6e6;
  --color-border-strong:#d8d8d8;
  --color-cell-bg:#eeeeee;
  --color-cell-bg-dark:var(--color-accent);
  --color-speaker-bg:var(--color-accent);
  --color-speaker-text: #ffffff;
  --color-column-border: #e6e6e6;
  --color-column-bg: transparent;
  --color-border-heading:var(--color-border);
  --color-extendedtitle-bg: var(--color-brand);

  /* FONT SIZE */
  --font-size-xxsmall: 1.0rem;
  --font-size-xsmall: 1.2rem;
  --font-size-small: 1.4rem;
  --font-size-medium: 1.6rem;
  --font-size-large: 2.0rem;
  --font-size-xlarge: 2.4rem;
  --font-size-xxlarge: 2.8rem;
  --font-size-xxxlarge: 3.4em;

  /* FONT */
  --font-feature-settings: "palt" 1,;
  --font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-heading: 'Noto Serif JP', serif;
  --font-family-en: 'Roboto',sans-serif;
  --font-family-number: 'Roboto',sans-serif;

  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-button: 400;
  --font-weight-heading: 400;

  /* LINE HEIGHT */
  --line-height-small:140%;
  --line-height-medium:160%;
  --line-height-large:180%;

  /* SPACE */
  --space-xxxsmall: 2px;
  --space-xxsmall: 4px;
  --space-xsmall: 8px;
  --space-small: 12px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-xlarge: 32px;
  --space-xxlarge: 48px;
  --space-xxxlarge: 64px;

  /* BORDER */
  --border-radius-xsmall: 2px;
  --border-radius-small: 3px;
  --border-radius: 5px;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;
  --border-radius-image: 0.02em;

  --border-width-column: 4px;

  /* WIDTH */
  --width-container: 980px;
  --width-container-narrow: 840px;
  --width-container-wide: 1040px;
  --width-panel-single-pc: 460px;
  --width-articlelist-image: 100px;
  --width-articlelist-image-pc: 160px;
  --width-pagenate: 40px;
  --width-pagenate-pc: 50px;
  --width-pagenate-image: 6px;
  --width-pagenate-image-pc: 8px;
  --width-slider-text: 400px;
  --width-slider-text-box: 500px;
  --width-slider-arrow: 16px;
  --width-slider-arrow-pc: 30px;
  --width-header-logo: 140px;
  --width-header-logo-pc: 260px;
  --width-header-icon: 60px;
  --width-header-icon-pc: 130px;
  --width-header-icon-image: 24px;
  --width-header-icon-image-pc: 28px;
  --width-menu-bar: 22px;
  --width-footer-logo: 180px;
  --width-footer-logo-pc: 180px;
  --width-footer-sns: 27px;
  --width-footer-sns-pc: 34px;
  --width-pagetop-pc: 50px;

  --width-catchcopy-image-bg-image-pc: 700px;
  --width-catchcopy-image-bg-text-pc: 380px;
  --width-catchcopy-image-bg-image: 92%;
  --width-catchcopy-image-bg-text: 85%;

  --min-width-button: 180px;
  --min-width-button-pc: 200px;
  --min-width-button-apply: 280px;
  --min-width-button-apply-pc: 340px;
  --min-width-cell: 150px;
  --min-width-newslist-category: 110px;

  --max-width-column-image: 350px;

  /* HEIGHT */
  --height-header-pc: 100px;
  --height-header: 60px;
  --height-menu-bar: 2px;

  --height-slider: 540px;
  --height-slider-tablet: 450px;
  --height-slider-pc: 550px;

  /* MARGIN */
  --margin-top-xsmall: 20px;
  --margin-top-small: 40px;
  --margin-top-medium: 60px;
  --margin-top-large: 80px;
  --margin-top-xlarge: 100px;
  --margin-top-xxlarge: 120px;
  --margin-top-xxxlarge: 120px;
  
  /* PADDING */
  --padding-text-pc: 95px;
  --padding-sp: 26px;

  --padding-slider-pc: 150px;

  --padding-header-logo: 1px 0 0 20px;
  --padding-header-logo-pc: 0 42px;

  --padding-footer-top: 60px;
  --padding-footer-top-pc: 110px;
  --padding-footer-bottom: 30px;
  --padding-footer-bottom-pc: 40px;

  --padding-convertion: 100px;
  --padding-convertion-pc: 140px;
  
  /* COLUMN */
  --col-width-image: 47%;
  --col-width-text: 47%;
  --col-width-catalog-image: 35%;
  --col-width-catalog-text: 60%;
  --col-width-float-image: 52%;
  --col-width-speaker-panel: 30%;
  --col-width-speaker-content: 65%;
  --col-width-column-image: 35%;
  --col-width-column-text: 65%;

  /* ASPECT RATIO */
  --aspect-ratio-map: 12 / 16;
  --aspect-ratio-movie: 9 / 16;
  --aspect-ratio-member: 3 / 2;
  --aspect-ratio-catalog-pc: 286 / 190;
  --aspect-ratio-articlelist: 1 / 1;
  --aspect-ratio-top-blog: 31 / 14;
  --aspect-ratio-catchcopy-image: 10 / 7;

  /* IMAGES */
  --arrow-button: url(/images/arrow_right_main.svg);
  --arrow-button-b: url(/images/arrow_right_b.svg);
  --arrow-brand: url(/images/arrow_right_brand.svg);
  --arrow-button-on-accent: url(/images/arrow_right_white.svg);
  --arrow-faq: url(/images/arrow_open.svg);
  --arrow-right: url(/images/arrow_right.svg);
  --arrow-newwin: url(/images/arrow_newwin.svg);
  --arrow-bottom: url(/images/arrow_bottom.svg);
  --pagetop: url(/images/pagetop.svg);

  /* TRANSITION */
  --bezier: cubic-bezier(.25,.1,.25,1);
  --transition-speed: .5s;
  --transition-speed-fast: .3s;
  --transition-speed-slow: 1s;

  /* GRID GAP */
  --gap-button-col: 30px;
  --gap-button-row: 20px;
  --gap-button-col-pc: 70px;
  --gap-button-row-pc: 35px;

  --gap-1col-col: 40px;
  --gap-2col-col: 30px;
  --gap-2col-row: 25px;
  --gap-2col-col-pc: 60px;
  --gap-2col-row-pc: 60px;
  --gap-3col-col-pc: 50px;
  --gap-3col-row-pc: 25px;
  --gap-4col-col-pc: 40px;
  --gap-4col-row-pc: 20px;

  --gap-column-vertical: 40px;

  --gap-catalog-col: 30px;
  --gap-catalog-col-pc: 60px;
  --gap-catalog-row-pc: 70px;
    
  --gap-member-col: 40px;
  --gap-member-col-pc: 50px;
  --gap-member-row-pc: 25px;

  --gap-articlelist-inner: 20px;
  --gap-articlelist-inner-pc: 20px;
  --gap-articlelist-col-pc: 60px;
  --gap-articlelist-row-pc: 40px;

  --gap-top-blog-col-pc: 65px;
  --gap-top-blog-row-pc: 60px;

  --gap-footer-nav-col: 30px;
  --gap-footer-nav-row: 20px;
  --gap-footer-nav-col-pc: 60px;
  --gap-footer-nav-row-pc: 15px;

  --gap-float-image: 4%;

  /* UNIQ */
  --top-faq-q: 18px;
  --top-faq-q-pc: 20px;
  --left-faq-q: 6px;
  --left-faq-q-pc: 20px;
  --top-faq-a: -6px;
  --top-faq-a-pc: -13px;
  --left-faq-a: 6px;
  --left-faq-a-pc: 20px;

  --drop-shadow-header: drop-shadow(0px 3px 6px rgba(0,0,0,.16));

  --padding-bottom-catchcopy: 100px;
  --padding-bottom-catchcopy-pc: 140px;
}