@charset "utf-8";

/*
Theme Name: KoyoThemeD
Theme URI: 
Author: KOYO
Author URI: 
Description: 
Version: 1.0
License: KOYO
License URI: https://www.koyo-printing.com/
Text Domain: 
Tested up to: 
Requires PHP: 8.0
*/

/* Variables */
:root {

    /* Font Family
    --font-primary: "Noto Sans JP", sans-serif;
    --font-secondary: "din-2014", sans-serif; */
  
    /* Font Size */
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-md: 15px; /*h4 & body*/ 
    --font-size-lg: 20px; /*h3*/
    --font-size-xl: 25px; /*h2*/
    --font-size-xxl: 30px; /*h1*/
    --font-size-xxxl: 36px;
    --font-size-xxxxl: 40px;
    --font-size-base: var(--font-size-md);
  
    /* Line Height */
    --line-height-body: 1.8;
    --line-height-heading: 1.6;
  
    /* Headings */
    --heading--font-size-h4: var(--font-size-md);
    --heading--font-size-h3: var(--font-size-lg);
    --heading--font-size-h2: var(--font-size-xl);
    --heading--font-size-h1: var(--font-size-xxl);
    --heading--font-weight: bold;
  
    /* Colors */
    --color-black:      #000;
    --color-dark-blue:  #324d89;
    --color-light-blue: #e6f3ff;
    --color-dark-gray:  #333;
    --color-light-gray: #707070;
    --color-error:      #de0000;
    --color-white:      #fff;
    --transparent: rgba(0,0,0,0);
    --color-primary: var(--color-dark-gray);
    --color-background: var(--color-white);
    --color-border: var(--color-light-gray);
  
    /* Spacing */
    --spacing-unit: 20px;
  
    /* Header */
    --header--color-text: var(--color-primary);
    --header--color-link: var(--color-primary);
    --header--color-link-hover: var(--color-secondary);
    --header--title--font-family: var(--font-primary);
    --header--title--font-size: var(--font-size-lg);
    --header--title--font-size-mobile: var(--heading--font-size-h4);
    --header--title--font-weight: normal;
    --header--logo--max-width: 262px;
    --header--logo--max-height: 56px;
    --header--logo--max-width-mobile: 195px;
    --header--logo--max-height-mobile: 42px;
    --header--button--color: var(--transparent);
    --header--menu--breakpoint-width: 1080px;
  
    /* Footer */
    --footer--color-text: var(--color-white);
  
    /* List */
    --list--border-color: var(--color-border);
  
    /* Table */
    --table--stripes-border-color: var(--color-border);
    --table--stripes-background-color: var(--color-border);
    --table--has-background-text-color: var(--color-dark-gray);
  }
  
  /* tb */
  @media screen and (max-width: 960px) {
    :root {
      --font-size-xs: 12px;
      --font-size-sm: 13px;
      --font-size-md: 14px;
      --font-size-lg: 17px;
      --font-size-xl: 21px;
      --font-size-xxl: 25px;
      --font-size-xxxl: 35px;
      --spacing-unit: 15px;
    }
  }
  
  /* sp */
  @media screen and (max-width: 560px) {
    :root {
      --font-size-xs: 11px;
      --font-size-sm: 12px;
      --font-size-md: 13px;
      --font-size-lg: 15px;
      --font-size-xl: 18px;
      --font-size-xxl: 20px;
      --font-size-xxxl: 25px;
      --spacing-unit: 10px;
    }
  }