@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}
body {
  color: #555; /* RGB */
  font-family: "fot-tsukuardgothic-std", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6em;
  line-height: 2.4rem;  
}
section h2 {
  font-size: 2.4rem;
}
a:hover {
  opacity: 0.5;
}
li {
   list-style-type: none;
}
*, *:before, *:after {
  box-sizing: border-box;
}

#scroll-top {
/*  // ボタンを右下で固定位置にする*/
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #eec0c6;
background-image: linear-gradient(315deg, #eec0c6 30%, #72d0f6 70%);
  border-radius: 50%;
  cursor: pointer;
  font-size: 4.5rem;
  padding-top: 7%;
  opacity: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
}

#scroll-top a {
  text-decoration: none;
  color: #FFF;
}
/*  // pc*/

@media(min-width: 1160px) {
  #scroll-top {
/*  // ボタンを右下で固定位置にする*/
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #eec0c6;
  background-image: linear-gradient(315deg, #eec0c6 30%, #72d0f6  70%);
  border-radius: 50%;
  cursor: pointer;
  font-size: 4rem;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.5%;  
}
  
#scroll-top a {
  text-decoration: none;
  color: #FFF;
}

 /*  // ふわっと表示*/
 .fade{
  opacity : 0;
  transition: opacity 2s;
}
 
.fade.view{
  opacity: 1;
}
 
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:5s;
animation-fill-mode:forwards;
opacity:0;
}

/*  // 下からふわっと表示*/  
}
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 600ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


/*  // 横からスライド表示*/ 
.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}

/*  // 1文字ずつ出現させるためのCSS*/
.eachTextAnime span{
  opacity: 0;
  font-family: 'Rockville Solid', sans-serif;
}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}