html {
  -webkit-overflow-scrolling: touch;
    max-width: 750px;
    margin: 0 auto;
background-size: 40%;
background-image: url("../images/parts/back2.webp");
overflow-x: hidden;
}
    
a:hover{cursor: pointer;}

img{  vertical-align: top;
      width:100%;
      display:block;

}
img.re{  vertical-align: top;
      width:100%;
      display:block;
      margin-top:-0.3vw;
}
body{
  max-width: 750px;
  margin: 0 auto;

}


video{
width:100%;
margin: 0px;
padding: 0px;
vertical-align: bottom;
}

h2{
background-color: #e8380d;
padding:2vw 5vw 4vw;
margin:0 auto;

}

h2 img{
padding:2vw 0;
}


.info{width:80%;margin:0 auto 5vw;}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


/* 固定ヘッダー設定 */
header{
position: sticky;
top: 0;
z-index:50;
}
/* 固定ヘッダー設定 ここまで*/

.title-wrap{
  position: relative;
}
.contents-wrap{
  width:90%;
  margin:0 auto;
}
/*タイトル部分のパーツ*/
.parts1{
    width:50%;
    top:15%;
    left: 25%;
    position: absolute;
    z-index:2;
}
.parts2{
    width:40%;
    top:23%;
    left: 30%;
    position: absolute;
}
.parts3{
    width:60%;
    top:45%;
    left: 20%;
    position: absolute;
}
.parts4{
    width:30%;
    top:0%;
    left: 35%;
    position: absolute;
}
.parts5{
    width:55%;
    top:25%;
    left: 22.5%;
    position: absolute;
    z-index:2;
}

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* bodyの中央位置に合わせる */
  width: 750px;
  z-index: 100;
}

footer img {
  display: block;
  width: 100%;
  height: auto;
}

.heartbeat-wrap2 {
  display: inline-block; /* これが無いと横幅100%のdivになりズレることがある */
  animation: heartbeat2 3s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes heartbeat2 {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.15);
  }
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;

  display: inline-block;
  transition: 1.5s ease-in-out;
    width:15vw; 
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
 
.balloon {
 

    animation: sway 1.5s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(0px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(7px);
    }
}

.balloondelay {
 

    animation: sway 4s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(9px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(0px);
    }
}

@media screen and (max-width: 750px) {
  body {
    width: 100%;
  }

  footer {
    width: 100%;
    left: 0;
    transform: none;
  }
}


/* 中間調整用 ************************************************************************************************/
@media screen and (min-width:751px) and (max-width:1100px) {





}
/* ここからPC ************************************************************************************************/
@media screen and (min-width:1101px) {




}