@charset "UTF-8";
/* ====================
ブレイクポイント 要件
960px以上：PC
600px〜959px：タブレット 
〜599px：スマホ
==================== */
:root {
  /* color */
  --bg-color-main: #fff;  /*白*/
  --bg-color-gray: #343434;
  --bg-color-jcstar: #fff;  /*JC-Starのブランドカラー*/
  --bg-color-footer: #ccc;  /* footer背景色 */
  --btn-color-main: pink;
  --font-color-main: #292929;
  --font-color-w: #e4e4e4;
  --border-color-main: 0, 0, 0; /* opacityをかけたい場合もあるため、RGBで指定 */


  /* font */  
  --font-Lexend: "Lexend", sans-serif;
  --font-japanese: "Zen Kaku Gothic New", sans-serif;

 /* font-size */  
  --font-h2-title: clamp(2.8rem, 3vw + 1.2rem, 6rem);


  /* padding / margin */
  --gutter-inline-base: clamp(1rem, 5vw, 4rem); /* 横方向の余白 */
  --gutter-block-base: clamp(2rem, 5vh, 6rem);  /* 縦方向の余白 */
  --gutter-xxs: clamp(0.25rem, 1vw, 0.75rem);
  --gutter-xs: clamp(0.5rem, 2vw, 1.5rem);
  --gutter-sm: clamp(1rem, 3vw, 2rem);
  --gutter-md: clamp(2rem, 5vw, 4rem);
  --gutter-lg: clamp(3rem, 6vw, 6rem);
  --gutter-xlg: clamp(6rem, 8vw, 13rem);
  --gutter-philosophy: clamp(10rem, 15vw, 20rem);
  --header-h: 80px; /* 固定ヘッダで下が隠れないように、ヘッダの高さぶんの“スペーサ”を最初のセクションの上に入れる。 */
  --header-h_sp: 40px;

  --left-col-w: clamp(10rem, 12vw, 18rem);
  --right-col-max: 900px;
  --contact-label-col: 20ch;

}