/* アニメーション
------------------------------------ */

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}
/* フェードイン(初期値) */
.js-fadeLeft {
  opacity: 0; /* 最初は非表示 */
  transform: translateX(-30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeLeft.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateX(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}
/* フェードイン(初期値) */
.js-fadeRight {
  opacity: 0; /* 最初は非表示 */
  transform: translateX(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeRight.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateX(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

.key__copy01 {
  position: absolute;
  top: 20%;
  left: 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
}
.key__copy02 {
  position: absolute;
  top: 30%;
  left: 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
}
.key__copy03 {
  position: absolute;
  top: 46%;
  left: 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
}

.key__copy span {
  padding: .1em .3em;
  background: #333;
}


.enjoy__key02-copy {
  position: static;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
}

.bgw span{
  background: #fff;
  color: #333;
}
.lead01{
  margin-top: 3rem;
  width: 25rem;
  margin-left: 3rem;
}
.txtbox01{
  position: absolute;
  top: 20%;
  right: 0;
  font-size: 1.8rem;
}
.txtbox02{
  position: absolute;
  top: 20%;
  left: 0;
  font-size: 1.8rem;
}
.txtbox03{
  position: absolute;
  top: 20%;
  right: 0;
  font-size: 1.8rem;
  width: 37rem;
}
.enjoy__key02-copy.first{
  margin-bottom: 1.5rem;
}
.enjoy__key02-copy.second{
  margin-bottom: 1.5rem;
}
.lead02{
  margin-top: 3rem;
  width: 28rem;
}
.lead03{
  margin-top: 3rem;
  padding-left: 5rem;
}
.mb5rem{
  margin-bottom: 5rem;
}
.pt5rem{
  padding-top: 5rem;
}
.txtbox04{
  display: flex;
  padding-top: 3rem;
  justify-content: space-between;
}
.lead04{
  width: 30rem;
  font-size: 1.8rem;
}

.txtbox05{
  position: absolute;
  top: 5%;
  left: 0;
  font-size: 1.8rem;
}

.lead05{
  font-size: 1.8rem;
}
.lead05-ph{
  margin-right: 5rem;
}

.txtbox06{
  position: absolute;
  top: 10%;
  right: 0;
  font-size: 1.8rem;
  width: 47rem;
}
.lead06{
  padding-left: 5rem;
  padding-top: 3rem;
  font-size: 1.8rem;
}

.txtbox07{
  position: absolute;
  top: 10%;
  left: 0;
  font-size: 1.8rem;
}
.lead07{
  padding-top: 3rem;
  font-size: 1.8rem;
  width: 30rem;
}
.lead08{
  padding-top: 3rem;
  font-size: 1.8rem;
}
.lead09{
  padding-top: 3rem;
  font-size: 1.8rem;
  width: 40rem;
}


.enjoy__key01-ph05{
  padding-left: 40%;
}

@media screen and (max-width: 767px) {

  .key__copy{
    position: static !important;
  }
  .enjoy__key02-copy {
    position: static !important;
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
  }
  
  .bgw span{
    background: #fff;
    color: #333;
  }
  .lead01{
    margin-top: 3rem;
    width: auto;
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .txtbox01{
    position: static;
    top: 20%;
    right: 0;
    font-size: 1.8rem;
  }
  .txtbox02{
    position: static;
    top: 20%;
    left: 0;
    font-size: 1.8rem;
    padding: 0 2rem;
  }
  .txtbox03{
    position: static;
    top: 20%;
    right: 0;
    font-size: 1.8rem;
    width: 37rem;
  }
  .enjoy__key02-copy.first{
    margin-bottom: 1.5rem;
  }
  .enjoy__key02-copy.second{
    margin-bottom: 1.5rem;
  }
  .lead02{
    margin-top: 3rem;
    width: auto;
  }
  .lead03{
    margin-top: 3rem;
    padding-left: 5rem;
  }
  .mb5rem{
    margin-bottom: 5rem;
  }
  .txtbox04{
    display: block;
    padding: 2rem;
    padding-top: 3rem;
    justify-content: space-between;
  }
  .lead04{
    /* padding-left: 5rem; */
    font-size: 1.8rem;
    width: auto;
  }
  
  .txtbox05{
    position: static;
    top: 5%;
    left: 0;
    font-size: 1.8rem;
    padding: 2rem;
  }
  
  .lead05{
    font-size: 1.8rem;
  }
  .lead05-ph{
    margin-right: 5rem;
  }
  
  .txtbox06{
    position: static;
    top: 10%;
    right: 0;
    font-size: 1.8rem;
    width: auto;
    padding: 2rem;
  }
  .lead06{
    padding-left: 5rem;
    padding-top: 3rem;
    font-size: 1.8rem;
  }
  
  .txtbox07{
    position: static;
    top: 10%;
    left: 0;
    font-size: 1.8rem;
    padding: 2rem;
  }
  .lead07{
    padding-top: 3rem;
    font-size: 1.8rem;
    width: auto;
  }
  .lead08{
    padding-top: 3rem;
    font-size: 1.8rem;
    padding: 2rem;
  }
  .lead09{
    padding-top: 3rem;
    font-size: 1.8rem;
    width: auto;
  }
  
  
  .enjoy__key01-ph05{
    padding-left: 40%;
  }

}