/*
Theme Name: K-MAP（川崎みらいアクティブ・プロジェクト）
Theme URI: 
Description: K-MAPのテーマです
Version: 1.0
Author: D.Odawara
Author URI: none
*/

:root {

/* Font */
--font-family: "Quicksand", YakuHanMP, 'Noto Sans JP', sans-serif;
--h1: clamp(1.75rem, 1.25rem + 2.5vw, 3.125rem); /*28px_50px,320px_1200px*/
--h2: clamp(28px, calc(20.727px + 2.273vw), 48px); /*320px_1200px*/
--h3: clamp(20px, calc(16.571px + 0.952vw), 28px); /*320px_1200px*/
--h4: clamp(16px, calc(15.273px + 0.227vw), 18px); /*16px_18px,320px_1200px*/
--h5: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); /*14px_16px,320px_1200px*/
--h6: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); /*12px_14px,320px_1200px*/

--main-txt: clamp(16px, calc(15.273px + 0.227vw), 18px);
--lh-main-txt: clamp(28px, calc(25.091px + 0.909vw), 36px); 

--lead-copy: clamp(18px, calc(15.818px + 0.682vw), 24px);/*320px_1200px*/
--lh-lead-copy: clamp(28px, calc(23.636px + 1.364vw), 40px);/*320px_1200px*/

--lh1: 1;
--lh2: 1.2;
--lh3: 1.5;
--lh4: 1.7;
--lh5: 1.9;
--lh6: 2.1;

--ls1: 0.05em;
--ls2: 0.1em;
--ls3: 0.15em;
--ls4: 0.2em;
--ls5: 0.4em;

/* Color */
--ko-blue: #001764;
--ko-red: #cf001c;
--primary-color: #333;

--s-color-1: #cf001b;
--s-color-2: #c77f61;
--s-color-3: #59c2e1;
--s-color-4: #a9ce52;
--s-color-5: #f29600;
--s-color-6: #72a47a;
--s-color-7: #8d80bb;

--link-color-1: #537bc1;

/* Background Color */
--bg-color-1: #fff;
--bg-color-back: #f7f8f9;

/* Border */
--darken-1: rgba(0,0,0,0.1);
--darken-2: rgba(0,0,0,0.2);
--darken-3: rgba(0,0,0,0.4);
--darken-4: rgba(0,0,0,0.5);

--lighten-1: rgba(255,255,255,0.2);
--lighten-2: rgba(255,255,255,0.4);
--lighten-3: rgba(255,255,255,0.6);
--lighten-4: rgba(255,255,255,0.8);

--border-width: 1px;
--border-radius: 16px;
--border-color: var(--darken-1);

--bd-color-1: rgba(0,0,0,0.1);
--radius-1: clamp(0.75rem, 0.341rem + 2.05vw, 1.875rem);
--radius-2: clamp(8px, calc(4.571px + 0.952vw), 16px);

/* Spacer */

--space-1: 0.125em; /*2px*/
--space-2: 0.25em;  /*4px*/
--space-3: 0.375em; /*6px*/
--space-4: 0.50em;  /*8px*/
--space-5: 0.625em; /*10px*/
--space-6: 0.75em;  /*12px*/
--space-7: 0.875em; /*14px*/
--space-8: 1em;     /*16px*/
--space-9: 1.25em;  /*20px*/
--space-10: 1.5em;  /*24px*/
--space-11: 1.75em; /*28px*/
--space-12: 1.875em;/*30px*/
--space-13: 2em;    /*32px*/
--space-14: 2.25em; /*36px*/
--space-15: 2.5em;  /*40px*/
--space-16: 2.75em; /*44px*/
--space-17: 3em;    /*48px*/
--space-18: 3.125em;/*50px*/
--space-19: 3.75em; /*60px*/
  
--space-minus-1: -0.125em; /*2px*/
--space-minus-2: -0.25em;  /*4px*/
--space-minus-3: -0.375em; /*6px*/
--space-minus-4: -0.50em;  /*8px*/
--space-minus-5: -0.625em; /*10px*/
--space-minus-6: -0.75em;  /*12px*/
--space-minus-7: -0.875em; /*14px*/
--space-minus-8: -1em;     /*16px*/
--space-minus-9: -1.25em;  /*20px*/
--space-minus-10: -1.5em;  /*24px*/
--space-minus-11: -1.75em; /*28px*/
--space-minus-12: -1.875em;/*30px*/
--space-minus-13: -2em;    /*32px*/
--space-minus-14: -2.25em; /*36px*/
--space-minus-15: -2.5em;  /*40px*/
--space-minus-16: -2.75em; /*44px*/
--space-minus-17: -3em;    /*48px*/
--space-minus-18: -3.125em;/*50px*/
--space-minus-19: -3.75em; /*60px*/
  
--form-field-font-size: 1em;
--form-field-height: 2em;
--form-field-padding-y: .5em;
--form-field-padding-x: .5em;

/* Easing */
--easing: cubic-bezier(.2, 1, .2, 1);
--transition: .8s var(--easing);

/* Box Shadow */
--box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;


/*Columns*/
--max-width-1: 1440px;
--max-width-2: 1280px;
--max-width-3: 1024px;
--max-width-4: 768px;
--max-width-5: 600px;
--max-width-6: 400px;

--layout-gap: 30px;
}