@charset "UTF-8";

:root { /* カラーコード */
  --base-color: #000;
  --white-color: #fff;
  --shadow-color: #425563cc;
  --btnbg-color:#d1c6be;
  --light-blue01:rgb(205, 226, 244);
}
img{
  vertical-align:top;  
}
/*全体横スクロール禁止*/
.ms-site-container {
  overflow-x:clip;
}

body{
  text-align: center;
  align-items: center;
}

#lpbase{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width:800px;
    margin: 0 auto;
}
section{
    width: 100%;
    margin: 0 auto;
}
.section01 img{
  width: 100%;
  display: flex;
  margin: 0; /* 余白を消す */
  padding: 0; /* 余白を消す */
}
.cta_bg01,.cta_bg02{
    margin:0 auto;
    max-width:800px;
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 50 / 79;/*アスペクト比を計算*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
}
.cta_bg01{
    background-image: url(../img/yfB_ctabg1.jpg);
}
.cta_bg02{
    background-image: url(../img/yfB_ctabg2.jpg);
}

/*ビデオ
-------------------------------------*/
.gallery-video {
  width: 100%;
  background-image: url('../img/yfB_12.jpg'); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio: 25 / 27;
  text-align: center;
}
video {
  position: relative;
  width: 85%; /* 動画の横幅を設定 */
  height: auto; /* 高さの比率を維持する */
  padding-top:30% ;
}

/*アニメーション
-------------------------------------*/
.btn_poyo img {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
  @keyframes poyopoyo {
  0%, 40%, 60%, 80% {
      transform: scale(1.0);
  }
  50%, 70% {
      transform: scale(0.95);
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

/*上乗せボタン
-------------------------------------*/
.cta_btn img{
  max-width: 90%;
}
.off_icon img{
  max-width: 30%;
}
.cta_btn{
  position: relative;
  z-index: 3;
  padding-top:82% ;
}
.off_icon{
  position: relative;
  left:29%;
  z-index: 2;
  padding-top:44% ;
}
.off_icon,.cta_btn{
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*サンクスアップセル用
-------------------------------------*/
.upsel_cta_bg01{
    margin:0 auto;
    max-width:800px;
    background-position:top;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 10 / 17;/*アスペクト比を計算*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    background-image: url(../img/yf_tupselA_ctabg1.jpg);
}
.upselcta_btn img{
  max-width: 90%;
}
.upselcta_btn{
  position: relative;
  z-index: 3;
  top:65.5%;
}