:root {
  /*----------------------------------------------------------------------------------
  カラー設定
  ----------------------------------------------------------------------------------*/
  --primary-color: #0F345B;
  --font-color: #000;
  --white-color: #fff;

  /*----------------------------------------------------------------------------------
  フォント設定、文字サイズ、文字の太さ
  ----------------------------------------------------------------------------------*/
  /* --font-family-accent: 'Montserrat', sans-serif; */
  --font-en: "Lato", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;

  --font-size-xs: 1.2rem;
  --font-size-s: 1.4rem;
  --font-size-default: 1.6rem;
  --font-size-m: 1.8rem;
  --font-size-l: 2.4rem;
  --font-size-xl: 3.6rem;
  --font-size-xxl: 4.8rem;
  --font-size-xxxl: 6rem;
  --font-size-xxxxl: 7.2rem;

  /*----------------------------------------------------------------------------------
  テキストスタイル
  ----------------------------------------------------------------------------------*/
  --line-height-title: 1.2;
  --line-height-normal: normal;
  --line-height-default: 1.5;
  --line-height-relaxed: 1.8;
  --line-height-loose: 3;

  --letter-spacing-normal: normal;
  --letter-spacing-tight: 0.05em;
  --letter-spacing-default: 0.1em;
  --letter-spacing-relaxed: 0.2em;

  /*----------------------------------------------------------------------------------
  角丸スタイル
  ----------------------------------------------------------------------------------*/
  --border-radius-s: 4px;
  --border-radius-m: 7px;
  --border-radius-l: 16px;
  --border-radius-x: 50px;
  --border-radius-xl:50%;
  /*----------------------------------------------------------------------------------
  余白設定
  ----------------------------------------------------------------------------------*/
  --space-xs: 4px;
  --space-s: 8px;
  --space-default: 12px;
  /* テキスト間の余白 */
  --space-m: 20px;
  /* 要素間の余白 */
  --space-l: 26px;
  /* 要素間の余白 */
  --space-xl: 30px;
  /* 要素の囲みの余白 */
  --space-xxl: 64px;
  /* 大きな要素間 */
  --space-xxxl: 120px;
  /* 大きなセクション間 */
  --space-xxxxl: 200px;

  /*----------------------------------------------------------------------------------
  ページ幅
  ----------------------------------------------------------------------------------*/
  --page-max-width: 1440px;
  --page-min-width: 1000px;
  --page-padding:2%;
}

/* タブレット用フォントサイズ */
@media screen and (max-width: 1024px) {
  :root {
    --font-size-xs: 1.1rem;
    --font-size-s: 1.3rem;
    --font-size-default: 1.5rem;
    --font-size-m: 1.7rem;
    --font-size-l: 2.2rem;
    --font-size-xl: 3.2rem;
    --font-size-xxl: 4.2rem;
    --font-size-xxxl: 5.4rem;
    --font-size-xxxxl: 6.6rem;
  }
}

/* スマホ用フォントサイズ */
@media screen and (max-width: 750px) {
  :root {
    --font-size-xs: 1.0rem;
    --font-size-s: 1.2rem;
    --font-size-default: 1.4rem;
    --font-size-m: 1.6rem;
    --font-size-l: 2.0rem;
    --font-size-xl: 2.8rem;
    --font-size-xxl: 3.6rem;
    --font-size-xxxl: 4.8rem;
    --font-size-xxxxl: 6.0rem;
    --space-xxxl: 60px;
  }
}

/*----------------------------------------------------------------------------------
    レスポンシブbr
----------------------------------------------------------------------------------*/

.br-sp {
  display: block;
}

.br-pc {
  display: none;
}

@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .br-pc {
    display: block;
  }
}