@charset "utf-8";

/*========= ページトップのためのCSS ===============*/

/*スクロールリンクの形状*/
.scroll-top {
  /*表示位置*/
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden; 
  transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  /*改行禁止*/
    white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
  right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
  content:"";
  position: absolute;
  top:0;
  right:0;
  width:1px;
  height: 50px;
  background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
  right:0;
}

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


#footer p{
  margin-top:20px;  
}

/* small{
  color:#fff;
  display: block;
  text-align: center;
} */


section{
  padding:100px 30px;
}


section:nth-child(1){
  min-height: 100vh;  
}

section:nth-child(2n){
  background:#f3f3f3; 
}

#footer{
  /* background:#333; */
  position: relative;
  z-index: 2;
  /* padding:100px 20px; */

}

/*========= ふわっとレイアウトのためのCSS ===============*/


/* .flex{
  display:flex;
  flex-wrap: wrap;
} */

/* .box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
} */

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  opacity: 0;
}

/*==================================================
ふわっ
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time03{
animation-delay: 0.3s;
}

.delay-time04{
animation-delay: 0.4s;
}