/*
Theme Name:
Theme URL: 
Description: 
Author: ADMIN
Version: 1.0
Tags: 
License: ADMIN
License URI: 
*/

/*
Noto Sans Japanese…本文　font-family: "Noto Sans JP", sans-serif;
Noto Serif Japanese…明朝　font-family: "Noto Serif JP", serif;
Zen Maru Gothic…見出し　font-family: "Zen Maru Gothic", sans-serif;
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Zen+Maru+Gothic:wght@400;700;900&display=swap');

/*ROOT
----------------------------------------------------*/
:root {
  --font-jp: "Noto Sans JP", sans-serif;
  --font-min: "Noto Serif JP", serif;
  --font-md: "Zen Maru Gothic", sans-serif;
  --bold: 700;
  --normal: 400;
  
  --lh-base-2l: 2;
  --lh-base-l: 1.8;
  --lh-base-m: 1.6;
  --lh-base-s: 1.4;
  
  --letter-space-l:0.12em;
  --letter-space-m:0.08em;
  --letter-space-s:0.06em;
  
  --radius-l: 20px;
  --radius-m: 10px;
  --radius-s: 5px;  

  --shadow: 0 0 6px #333;
  --shadow-80: 0 0 6px rgba(50,50,50,.8);
  --shadow-50: 0 0 6px rgba(50,50,50,.5);
  --shadow-20: 0 0 6px rgba(50,50,50,.2);
  
  --line-dott: 1px dotted #ddd;
  --line-dash: 1px dashed #ddd;
  --line-soli: 1px solid #ddd;

  --clr-txt: #333;
  --clr-bk: #000;
  --clr-bk-5: color-mix(in srgb, var(--clr-bk) 5%, transparent);
  --clr-bk-10: color-mix(in srgb, var(--clr-bk) 10%, transparent);
  --clr-bk-20: color-mix(in srgb, var(--clr-bk) 20%, transparent);
  --clr-bk-50: color-mix(in srgb, var(--clr-bk) 50%, transparent);
  --clr-bk-80: color-mix(in srgb, var(--clr-bk) 80%, transparent);
  --clr-red: #d00;
  --clr-gray: #ddd;
  --clr-blue: #4D72BE;
  --clr-orange: #f4b01f;
  --clr-orange-20: color-mix(in srgb, var(--clr-orange) 20%, transparent);
  --clr-orange-50: color-mix(in srgb, var(--clr-orange) 50%, transparent);
  --clr-orange-80: color-mix(in srgb, var(--clr-orange) 80%, transparent);
  --clr-key: #8f670b;/*ボタン、見出しなど*/
  --clr-key-10: color-mix(in srgb, var(--clr-key) 10%, transparent);
  --clr-key-20: color-mix(in srgb, var(--clr-key) 20%, transparent);
  --clr-key-50: color-mix(in srgb, var(--clr-key) 50%, transparent);
  --clr-key-dk: #4f2a11;/*タイトル、リンクなど*/
  
  --clr-yellow-lh:#fff2d4;
  --clr-pink-lh:#ffe4d9;
  
  --font-size-sm:   1.2rem; /* 小さめ */
  --font-size-base: 1.4rem; /* 標準 */
  --font-size-md:   1.8rem; /* 少し大きめ */
  --font-size-lg:   2.2rem; /* 大きめ */
  --font-size-hg:   2.6rem; /* もっと大きめ */
}
@media (min-width: 600px) {
  :root {
  	--font-size-sm:   1.3rem; /* 小さめ */
  	--font-size-base: 1.6rem; /* 標準 */
  	--font-size-md:   2.0rem; /* 少し大きめ */
  	--font-size-lg:   2.4rem; /* 大きめ */
  	--font-size-hg:   2.8rem; /* もっと大きめ */
  }
}
@media (min-width: 1025px) {
  :root {
  	--font-size-sm:   1.4rem; /* 小さめ */
  	--font-size-base: 1.8rem; /* 標準 */
  	--font-size-md:   2.4rem; /* 少し大きめ */
  	--font-size-lg:   2.8rem; /* 大きめ */
  	--font-size-hg:   3.2rem; /* もっと大きめ */
  }
}