@charset "UTF-8";

:root {
  /*color*/
  --color-primary: #002D8B;      /* メインカラー */
  --color-secondary:#187DC9;     /*ボタンホバー*/
  --color-tertiary:#4697D4;
  --color-primary-light: #F2F5FA;
  --color-hover:rgba(24,125,201,0.12);
  --color-border: #ccc;
  --color-text: #333;
  --color-wh:#ffffff;    /*ボタン背景色*/
  --color-pale: #f8f9fa;
  --color-notice: #c0392b;
  --color-notice-bk: #fff1f1;
  --color-card-bk: #fcfcfd;

  /*font faminy*/
  --font-en:"Roboto",sans-serif;


  /*font size*/
  --font-size-xs: clamp(0.85rem, 0.8rem + 0.2vw, 0.9rem);
  --font-size-s:  clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  --font-size-m:  clamp(1.1rem, 1.05rem + 0.4vw, 1.2rem);
  --font-size-l:  clamp(1.25rem, 1.15rem + 0.7vw, 1.5rem);
  --font-size-xl: clamp(1.8rem, 1.2rem + 1.2vw, 2.2rem);

  /* border-radius */ 
  --radius-s :4px;

  /* box-shadow */
  --box-shadow: 0 4px 4px rgba(0,0,0,0.05);


  
 
}