@charset "UTF-8";
/* 色の変数定義 */
:root{
  --primary-700: #F08300;
  --sub-500: #F6B466;
  --gray-bg-100: #F5F5F5;
  --main-900: #E14400;
  --main-800: #E86300;
  --main-600: #F39B33;
  --main-400: #F9CD99;
  --main-300: #FCE6CC;
  --emphases-200: #FEF2E5;
  --main-100: #FFF9F2;
  --gray-font-700: #323232;
  --gray-600: #5A5A5A;
  --gray-font-line-500: #6E6E6E;
  --gray-font-400: #BEBEBE;
  --gray-line-300: #D2D2D2;
  --gray-200: #E6E6E6;
  --attention-red: #F01000;
}
/* 階層の変数定義 z-index*/
:root{
  --z-index-header: 1000;
  --z-index-hamburger-menu: 999;
  --z-index-sub-menu: 998;
  --z-index-totop: 990;
  --z-index-overlay: 995;
  --z-index-modal: 1001;
}
/* フォントサイズ */
:root{
  --h1-l: 42px;
  --h1-m: 36px;
  --h1-s: 30px;
  --h2-l: 36px;
  --h2-m: 30px;
  --h2-s: 18px;
  --h3-l: 24px;
  --h3-s: 20px;
  --fz-xl: 30px;
  --fz-l: 24px;
  --fz-m: 20px;
  --fz-ms: 18px;
  --fz-s: 16px;
  --fz-xs: 14px;
  --fz-xxs: 12px;
}
body.top{
  --h1-l: 60px;
  --h1-m: 36px;
  --h1-s: 36px;
  --h2-l: 40px;
  --h2-m: 36px;
  --h2-s: 20px;
  --h3-l: 24px;
  --h3-s: 20px;
  --fz-xl: 30px;
  --fz-l: 24px;
  --fz-m: 20px;
  --fz-ms: 18px;
  --fz-s: 16px;
  --fz-xs: 14px;
  --fz-xxs: 12px;
}
/* line-height 行間設定*/
:root{
  --line-height-s: 1.2;
  --line-height-m: 1.4;
  --line-height-l: 1.6;
  --line-height-xl: 2;
}

/* セクション間(上下)の空白の変数定義*/
:root{
  --sec-padding: 80px 0;
  --sec-padding-top: 80px;
  --sec-padding-bottom: 80px;
}
body.top{
  --sec-padding: 100px 0;
  --sec-padding-top: 100px;
  --sec-padding-bottom: 100px;
}
/* CTA間の余白　パディング マージン*/
:root{
  --cta-padding: 60px 0;
  --cta-padding-top: 60px;
  --cta-padding-bottom: 60px;
  --cta-margin-m: 60px;
}
/* コンテンツ間の余白　パディング マージン*/
:root{
  --con-padding: 30px 0;
  --con-padding-top: 30px;
  --con-padding-bottom: 30px;
  --con-margin-m: 30px;
}
/* 詳しく見るが上にあるパターンのpadding */
:root{
  --detail-padding-top: 60px;
  --detail-padding-bottom: 60px;
}
body.top{
  --con-padding: 50px 0;
  --con-margin-m: 50px;
}
/* セクションのインナー幅 */
:root{
  --max-width-1400: 1400px;
  --max-width-1300: 1300px;
  --max-width-1200: 1200px;
  --max-width-1100: 1100px;
  --max-width-1000: 1000px;
  --max-width-900: 900px;
  --max-width-800: 800px;
  --margin-inline-auto: auto;
}
  /* セクションのSPサイズ時 インナー幅padding */
:root{
  --sec-padding-inner: 20px;
}
/* タイトル・文章下等のマージン */
:root{
  --mb-xl: 70px;
  --mb-l: 50px;
  --mb-m: 30px;
  --mb-s: 20px;
}

@media (max-width: 768px) {
   /* セクション間余白 */
  :root{
    --sec-padding: 50px 0;
    --sec-padding-top: 50px;
    --sec-padding-bottom: 50px;
  }
  body.top{
    --sec-padding: 50px 0;
    --sec-padding-top: 50px;
    --sec-padding-bottom: 50px;
  }

  /* CTA間の余白　パディング マージン*/
  :root{
    --cta-padding: 30px 0;
    --cta-padding-top: 30px;
    --cta-padding-bottom: 30px;
    --cta-margin-m: 30px;
  }
  /* コンテンツ間の余白　パディング マージン*/
  :root{
    --con-padding: 20px 0;
    --con-padding-top: 20px;
    --con-padding-bottom: 20px;
    --con-margin-m: 20px;
  }
  body.top{
    --con-padding: 30px;
    --con-padding-top: 30px;
    --con-padding-bottom: 30px;
    --con-margin-m: 30px;
  }
  /* 詳しく見るが上にあるパターンのpadding */
  :root{
    --detail-padding-top: 50px;
    --detail-padding-bottom: 50px;
  }
  /* フォントサイズ */
  :root{
    --h1-l: 30px;
    --h1-m: 24px;
    --h1-s: 20px;
    --h2-l: 24px;
    --h2-m: 20px;
    --h2-s: 18px;
    --h3-l: 20px;
    --h3-s: 16px;
    --fz-xl: 24px;
    --fz-l: 20px;
    --fz-m: 16px;
    --fz-ms: 16px;
    --fz-s: 14px;
    --fz-xs: 12px;
  }
  body.top{
    --h1-l: 40px;
    --h1-m: 24px;
    --h1-s: 20px;
    --h2-l: 24px;
    --h2-m: 20px;
    --h2-s: 16px;
    --h3-l: 20px;
    --h3-s: 16px;
    --fz-xl: 24px;
    --fz-l: 20px;
    --fz-m: 16px;
    --fz-ms: 16px;
    --fz-s: 14px;
    --fz-xs: 12px;
  }
  :root{
    --mb-xl: 50px;
    --mb-l: 30px;
    --mb-m: 20px;
    --mb-s: 10px;
  }
  
}