@charset "utf-8";

/*-----------------------------------------------------
タグ
-------------------------------------------------------*/

html,
body{
  font-family:'Noto Sans JP',"Noto Sans Japanese","メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3",Meiryo,sans-serif;
  line-height: 1.5em;
  background: #f4f5f7;
}
html{
  font-size: 62.5%;
}
body{
  font-size: 1.8rem;
}
ul,
ol{
  padding: 0;
}
li{
  list-style: none;
  padding: 0;
}
@media only screen and (max-width: 991px) {
  html,
  body{
    line-height: 1.6;
  }
  body{
    font-size: 1.4rem;
  }
}

/*-----------------------------------------------------
Bootstrap上書き
-------------------------------------------------------*/


/*-----------------------------------------------------
汎用class
-------------------------------------------------------*/

/* clear
------------------------------------------------*/

.clearfix {
  zoom:1;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clear {
  clear: both;
}

/* 逆インデント
------------------------------------------------*/

.bullet-text,
.bullet-list li{
  padding-left: 1em;
  text-indent: -1em;
}

.bullet-text--icon,
.bullet-list--icon li{
  padding-left: 1.75em;
  text-indent: -0.75em;
}

/* 斜線吹き出し
------------------------------------------------*/

.text-balloon{
  position: relative;
  text-align: center;
}
.text-balloon::before,
.text-balloon::after{
  position: absolute;
  top: 0.5rem;
  height: 1.8rem;
  content: '';
}
.text-balloon::before {
  border-left: solid 2px;
  left: -1.5rem;
  transform: rotate(-30deg);
}
.text-balloon::after {
  border-right: solid 2px;
  right: -1.5rem;
  transform: rotate(30deg);
}

/* 文字の上にドット
------------------------------------------------*/

.text-dots{
  background-image: radial-gradient(circle at center, #060e3d 20%, transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: .1em;
}

/* マーカー
------------------------------------------------*/

.text-marker{
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #f4da33;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

/* scrolldown
------------------------------------------------*/

.scrolldown{
position:absolute;
z-index: 1;
left:50%;
bottom:10px;
  /*全体の高さ*/
height:50px;
}
.scrolldown span{
position: absolute;
z-index: 1;
left:-20px;
top: -15px;
color: #fff;
font-size: 1.4rem;
letter-spacing: 0.05em;
}
.scrolldown::after{
content: "";
position: absolute;
z-index: 1;
top: 0;
width: 1px;
height: 30px;
background: #fff;
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}
@keyframes pathmove{
0%{
  height:0;
  top:0;
  opacity: 0;
}
30%{
  height:30px;
  opacity: 1;
}
100%{
  height:0;
  top:50px;
  opacity: 0;
}}