@charset "utf-8";

/*
Theme Name: KoyoThemeB
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;
  --font-size-lg: 20px;
  --font-size-xl: 25px;
  --font-size-xxl: 30px;
  --font-size-xxxl: 45px;
  --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-gray:  #333;
  --color-gray:       #6f6f6f;
  --color-light-gray: #a7a7a7;
  --color-pale-white: #f0f2f4;
  --color-pale-pink:  #fdf2f2;
  --color-pale-blue:  #f0f8ff;
  --color-white:      #fff;
  /* --color-green:      #007233;
  --color-blue:       #0067B8;
  --color-purple:     #543D99;
  --color-red:        #ab3b3a;
  --color-orange:     #706458;
  --color-yellow:     #e0ba40;
  --color-green:      #149684;
  --color-blue:       #2673b8;
  --color-purple:     #603162;
  --color-red:        #d21d3a;
  --color-orange:     #eb6010;
  --color-yellow:     #ebcd51; */
  --color-error:      #de0000;
  --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: 272px;
  --header--logo--max-height: 65px;
  --header--logo--max-width-mobile: 162px;
  --header--logo--max-height-mobile: 39px;
  --header--button--color: var(--color-white);
  --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;
  }
}