:root {
  /* COLOR */
  --color-text: #343434;
  --color-text-link: var(--color-text);

  --color-second: #E8E3D9;
  --color-second-hover: #DAD4CA;
  --color-scond-weakest: #F8F5F1;

  --color-brand: #867655;
  --color-brand-hover: #7C6C4C;
  --color-brand-strong: #5F5748;
  --color-brand-weak: #BEA067;
  --color-brand-weakest: #CDB78C;
  --color-third: #6F7F5E;
  --color-third-weak: #E3E9DB;

  --color-bg: #fff;
  --color-bg-header: var(--color-brand);
  --color-bg-header-toppage: transparent;
  --color-bg-footer: var(--color-brand);

  --color-menu-bar: var(--color-text-on-accent);
  --color-menu-bar-active: var(--color-menu-bar);

  /* FONT SIZE */
  --font-size-xxxsmall: 1.0rem;
  --font-size-xxsmall: 1.1rem;
  --font-size-xsmall: 1.2rem;
  --font-size-small: 1.4rem;
  --font-size-medium: 1.6rem;
  --font-size-large: 1.8rem;
  --font-size-xlarge: 2.4rem;
  --font-size-xxlarge: 3.2rem;
  --font-size-xxxlarge: 3.4rem;

  /* FONT */
  --font-feature-settings: "palt" 1,;
  --font-family: zen-kaku-gothic-new, sans-serif;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --font-weight-button: 500;
  --font-weight-heading: 400;

  /* LINE HEIGHT */
  --line-height-xsmall:120%;
  --line-height-small:140%;
  --line-height-medium:160%;
  --line-height-large:180%;
  --line-height-xlarge:200%;
  --line-height-xxlarge:220%;

  /* 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: 15px;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;
  --border-radius-image: 0.02em;

  --border-width-column: 4px;

  /* WIDTH */
  --width-container: 980px;
  --width-container-narrow: 800px;
  --width-container-wide: 1280px;
  --width-container-lower-wide: 1200px;
  --width-container-sub: 1100px;
  --width-panel-single-pc: 570px;
  --width-articlelist-image: 100px;
  --width-articlelist-image-pc: 160px;
  --width-pagenate: 40px;
  --width-pagenate-pc: 50px;
  --width-pagenate-image: 5px;
  --width-pagenate-image-pc: 7px;
  --width-slider-text: 400px;
  --width-slider-text-box: 500px;
  --width-slider-arrow: 16px;
  --width-slider-arrow-pc: 24px;
  --width-header-logo: 124px;
  --width-header-logo-pc: 250px;
  --width-header-icon: 14px;
  --width-header-icon-pc: 22px;
  --width-header-icon-image: 21px;
  --width-header-icon-image-pc: 22px;
  --width-menu-bar: 22px;
  --width-footer-logo: 210px;
  --width-footer-logo-pc: 210px;
  --width-footer-sns: 27px;
  --width-footer-sns-pc: 38px;
  --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: 100%;
  --min-width-button-pc: 235px;
  --min-width-button-apply: 315px;
  --min-width-button-apply-pc: 380px;
  --min-width-cell: 100px;
  --min-width-newslist-category: 110px;

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

  /* HEIGHT */
  --height-header-pc: 96px;
  --height-header: 64px;
  --height-header-all-pc: 194px;
  --height-menu-bar: 63px;

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

  /* MARGIN */
  --margin-top-xsmall: 10px;
  --margin-top-small: 30px;
  --margin-top-medium: 50px;
  --margin-top-large: 80px;
  --margin-top-xlarge: 120px;
  --margin-top-xxlarge: 150px;
  --margin-top-xxxlarge: 200px;
  
  /* PADDING */
  --padding-text-pc: 95px;
  --padding-sp: 30px;

  --padding-slider-pc: 150px;

  --padding-header-logo: 0 0 0 17px;
  --padding-header-logo-pc: 0 0 0 50px;

  --padding-footer-top: 85px;
  --padding-footer-top-pc: 44px;
  --padding-footer-bottom: 30px;
  --padding-footer-bottom-pc: 40px;
  --padding-footer-address: 30px;
  --padding-footer-address-pc: 80px;

  --padding-convertion: 100px;
  --padding-convertion-pc: 140px;
  
  --padding-section: 20px;
  --padding-section-pc: 30px;


  /* 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(https://gigaplus.makeshop.jp/6180yna/images/arrow_right_main.svg);
  --arrow-button-b: url(https://gigaplus.makeshop.jp/kodawaSMEC/images/lower/arrow_right_b.svg);
  --arrow-button-b-on-accent: url(https://gigaplus.makeshop.jp/kodawaSMEC/images/lower/arrow_right_b_on_accent.svg);
  --arrow-brand: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_right_brand.svg);
  --arrow-button-on-accent: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_right_white.svg);
  --arrow-faq: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_open.svg);
  --arrow-faq-on-accent: url(https://gigaplus.makeshop.jp/kodawaSMEC/images/lower/arrow_open_white.svg);
  --arrow-right: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_right.svg);
  --arrow-newwin: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_newwin.svg);
  --arrow-bottom: url(https://gigaplus.makeshop.jp/6180yna/images/arrow_bottom.svg);
  --pagetop: url(https://gigaplus.makeshop.jp/6180yna/images/pagetop.svg);

  /* TRANSITION */
  --bezier: cubic-bezier(.25,.1,.25,1);
  --transition-speed: .5s;
  --transition-speed-fast: .1s;
  --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: 15px;
  --gap-footer-nav-row-pc: 15px;

  --gap-float-image: 4%;

  /* UNIQ */
  --top-faq-q: -4px;
  --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 4px 10px rgba(0,0,0,.08));

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