@charset "utf-8";

/*アニメーション効果の設定
---------------------------------------------------------------------------*/
/*スクロールボタン　(
<div class="scroll">
  <span class="txt">Scroll</span>
</div>
)*/
.scroll {
  display: inline-block;
  padding-top: 70px;
  position: relative;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/*文字フェイドイン　(
<div class="wrap">
<div class="content">
  <p class="fadein txt01">1行目</p>
  <p class="fadein txt02">2行目</p>
</div>
</div> 
)*/
* {
    margin: 0;
    padding: 0;

}
.wrap { 
    width:100%;
    min-height:90vh;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center bottom;
    background: url(img/1-2.png),-moz-linear-gradient(top center, #f9003c 0%, #6c021c 100%);
    background-size: 100% auto;

}

.wrap resizeimage img { width: 100%; background-image: url(img/1-2.png);}

.content {      
    width:auto;
    height: auto;
    color: #193677;
    font-size: 1.7rem;
}

/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 6s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.txt01 {animation-delay: 1s;}
.txt02 {animation-delay: 2.5s;}
.txt03 {animation-delay: 4s;}

}