@charset "utf-8";
/*===========================================================*/
/*　基本色　 */
/*===========================================================*/ 
:root {
  --color-background: #FFF; /*　背景色　*/
  --color-primary: #0c419a; /*　キーカラー　*/
  --color-primary-rgba: rgba(14,65,154,1); /*　キーカラー　RGB　*/
  --color-primary-20par: #ced9eb; /*　キーカラー　20％　*/
  --color-primary-dark: #17947B; /*　キーカラー ダーク　*/
  --color-sub: #F2812B; /*　サブカラー（誘導色）　*/
  --color-black: #333; /*　黒　*/
  --color-gray: #666; /*　濃いグレー　*/
  --color-border-gray: #ccc; /*　border用グレー　*/
  --color-light-gray: #eee; /*　薄いグレー　*/
  --color-link: #666; /*　リンク色　*/
  --color-01: #13AAF0; /*　カスタムカラー1　*/
  --color-02: #5013F0; /*　カスタムカラー2　*/
  --color-03: #5013F0; /*　カスタムカラー3　*/
  --color-04: #5013F0; /*　カスタムカラー4　*/
  --color-04: #5013F0; /*　カスタムカラー5　*/
  --color-red: #EF1367; /*　注意文などの赤文字　*/
  --font-base: 'Noto Sans JP', sans-serif; /*　日本語用基本フォント　*/
  --font-ttl: 'Noto Sans JP', sans-serif; /*　タイトル用フォント　*/
  --font-alphanumeric:  'Oswald', sans-serif; /*　英語用基本フォント　*/
  --font-mix-base:  'Oswald', 'Noto Sans JP', sans-serif; /*　日本語と英語用混在基本フォント　*/
  --size-radius: 4px;/*　基本の角丸　*/
}

/*===========================================================*/
/*　スマホとPCの分岐　 */
/*===========================================================*/
@media screen and (min-width: 721px) {
  .pc_none{
    display: none;  
  }
}
@media screen and (max-width: 720px) {
  .sp_none{
    display: none;  
  }
}



/* 基本レイアウトのためのCSS */
body {
  background: var(--color-background);
  font-family: var(--font-base);
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}
* {
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: var(--color-link);
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  outline: none;
}
a:hover {
  filter: brightness(2);
}
img {
  max-width: 100%;
  height: auto;
}
a.link {
  color: var(--color-01);
  text-decoration: underline;
}
a.link:hover {
  text-decoration: none;
}
a.link:before {
  content: '';
  display: inline-block;
  position: relative;
  top: 0.2em;
  width: 1em;
  height: 1em;
  background-color: var(--color-01);
  -webkit-mask: url("../img/ico_link.svg") no-repeat center center / cover;
  -webkit-mask-size: cover;
  mask-image: url("../img/ico_link.svg");
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  margin-right: 10px;
}
p+p{
margin-top: 1em;
}
h1,h2,h3,h4,h5,h6{
  line-height: 1.2;
}