@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

#wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  flex-direction: column;
}

a{
  color: #333;
}

/*========= particle js を描画するエリア設定 ===============*/

html,body{
  height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  /* background-color:#FEE7E7; *//*背景色*/
}

#wrapper{
  position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width:100%;
  height: 100%;
}
#wrapper p{
  font-size: 0.85rem;
}
.sp-br{
  display: none;
}
.button_area{
  margin: 30px auto;
}
.btntextchange {
  position: relative;
  border: 1px solid #333333;
  border-radius: 25px;
  min-width: 210px;
  padding: 20px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: #333333;
  outline: none;
  transition: all .2s;
}
.btntextchange:hover {
  background: #333333;
  color: #fff;
}

.btntextchange span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .5s;
  display: block;
  white-space: nowrap;
}
.btntextchange span:nth-child(2) {
  opacity: 0;
}
.btntextchange:hover span:nth-child(1) {
  opacity: 0;
}
.btntextchange:hover span:nth-child(2) {
  opacity: 1;
}

@media screen and (max-width:768px) {
  #wrapper p{
    font-size: 0.85rem;
  }
  .sp-br{
    display: inline-block;
  }
}