@charset "utf-8";
/* -----------------------------------------------------------------
 オリジナルフォントの定義
----------------------------------------------------------------- */
@font-face {
  font-family: 'Kamikoubou';
  src: url('../font/kamikoubou-bold.woff2') format('woff2'),
       url('../font/kamikoubou-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* -----------------------------------------------------------------
 基本設定
----------------------------------------------------------------- */
:root {

/*------------- 文字 -------------*/
  /*ベース文字カラー｜ほぼ黒*/
  --color_main: #202020;
  --color_main_rgb: 32, 32, 32;

  /*アクセント文字カラー｜青味グレー*/
  --color_gray: #7e8689;

  /*アクセント文字カラー｜青味グレー薄*/
  --color_gray_pale: #b2bec2;

  /*アクセントカラー｜紙工房ブルー*/
  --color_kamikoubou: #00AFEC;
  --color_kamikoubou_pale: #bfe2ee;
  --color_kamikoubou_pale02: #a2d5e7;
  --color_kamikoubou_dark: #0091c3;
  
   /*アクセントカラー｜ネイビー*/
  --color_navy: #002b60;
  

/*------------- 背景 -------------*/
  /*背景｜白*/
  --color_bg_base: #fff;
  
  /*背景｜白青ねず*/
  --color_bg_lightgray: #f0f3f5;
  
/*------------- ボーダー -------------*/
  /*ボーダーカラー｜グレー薄*/
  --color_border_pale: #e1e1e1;


  /*------------- フォント -------------*/
  --font_jp: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Hiragino Sans', Meiryo, sans-serif;
  --font_en: "Jost", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Hiragino Sans', Meiryo, sans-serif;
  --font_kami: "Kamikoubou", "Jost", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Hiragino Sans', Meiryo, sans-serif;
}



/* -----------------------------------------------------------------
 ヘッダ固定部サイズ
----------------------------------------------------------------- */
:root {
  --site_header_margin_top: 14px;
  --site_header_height: 60px;
}
@media print, screen and (min-width: 768px) {
  :root {
    --site_header_margin_top: 30px;
    --site_header_height: 120px;
  }
}

/* -----------------------------------------------------------------
 文字サイズ
----------------------------------------------------------------- */
:root {
  --base_font_size: 3.19vw;
}

@media (min-width: 376px)  { :root { --base_font_size: 12px; } } /* スマートフォン基準 */
@media (min-width: 768px)  { :root { --base_font_size: 13.5px; } } /* タブレット基準 */
@media (min-width: 1001px) { :root { --base_font_size: 16px; } } /* デスクトップ基準 */
@media (min-width: 1201px) { :root { --base_font_size: 18px; } } /* デスクトップ基準 */

body {
  font-size: var(--base_font_size);
}
p, h1, h2, h3, h4, h5, h6 {
  font-size: inherit; 
}


/* -----------------------------------------------------------------
 マージン
----------------------------------------------------------------- */
:root {
  --margin_size_300: 300px;
  --margin_size_250: 250px;
  --margin_size_200: 200px;
  --margin_size_150: 150px;
  --margin_size_140: 140px;
  --margin_size_120: 120px;
  --margin_size_110: 110px;
  --margin_size_100: 100px;
  --margin_size_80: 80px;
  --margin_size_70: 70px;
  --margin_size_60: 60px;
  --margin_size_50: 50px;
  --margin_size_40: 40px;
  --margin_size_30: 30px;
  --margin_size_20: 20px;
}
@media screen and (max-width: 767px) {
  :root {
    --margin_size_300: 100px;
    --margin_size_250: 90px;
    --margin_size_200: 80px;
    --margin_size_150: 75px;
    --margin_size_140: 70px;
    --margin_size_120: 60px;
    --margin_size_110: 55px;
    --margin_size_100: 50px;
    --margin_size_80: 40px;
    --margin_size_70: 35px;
    --margin_size_60: 30px;
    --margin_size_50: 25px;
    --margin_size_40: 20px;
    --margin_size_30: 15px;
    --margin_size_20: 10px;
  }
}


.margin_size_250 {
  margin-top: var(--margin_size_250);
}
.margin_size_200 {
  margin-top: var(--margin_size_200);
}
.margin_size_150 {
  margin-top: var(--margin_size_150);
}
.margin_size_140 {
  margin-top: var(--margin_size_140);
}
.margin_size_120 {
  margin-top: var(--margin_size_120);
}
.margin_size_100 {
  margin-top: var(--margin_size_100);
}
.margin_size_80 {
  margin-top: var(--margin_size_80);
}
.margin_size_60 {
  margin-top: var(--margin_size_60);
}
.margin_size_40 {
  margin-top: var(--margin_size_40);
}
.margin_size_30 {
  margin-top: var(--margin_size_30);
}
.margin_size_20 {
  margin-top: var(--margin_size_20);
}

/* -----------------------------------------------------------------
 html/body設定
----------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  overflow-x: hidden;
/*  padding-top: calc(var(--site_header_margin_top) * 2 + var(--site_header_height));*/
}
html,body {
  width: 100%;
  height: 100%;
  background: var(--color_bg_base);
  letter-spacing: .05em;
  font-family: var(--font_jp);
  font-weight: 500;
  color: var(--color_main);
}
html,body,
:where(p, h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
/*  font-size: var(--body_font_size);*/
}
header {
  position: relative;
  overflow: hidden;
  z-index: 102;
}
main {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
footer {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/*---------- link ----------*/
a {
  outline: none;
  text-decoration: none;
  color: var(--color_main);
  transition: .3s;
}