@charset "UTF-8";
/* CSS Document */



html {
  -webkit-overflow-scrolling: touch;
    max-width: 750px;
    margin: 0 auto;
    background-size: 100%;
     overflow-x: hidden;
     overflow-y: scroll; -webkit-overflow-scrolling: touch;
     background:#000; 
}

body{
	line-height: 0;
  

}
img{  vertical-align:top;
      width:100%;
}
video {
  display: block;
  width: 60%;
  margin: 2vw auto;
  padding: 0px;
  vertical-align: bottom;
}
.show{
text-align:center;
margin:0 auto;
}
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* 固定ヘッダー設定 */
header{
position: sticky;
top: 0;
  background:#EFEFEF;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  z-index:9;
}
/* 固定ヘッダー設定 ここまで*/

ul.menu{  max-width:750px;
        display:flex;
        flex-flow: column;
          padding:7vw 3vw 0.5vw 3vw;
          list-style:none;
          margin:0 auto 5vw!important;;
}
ul.menu li{
    width:100%;
    padding:3vw 0 0 0;

}
div.story{
  background-size: 100%;
  background-image: url('../images/nlp1_04.jpg');
  background-repeat: no-repeat;
}
div.story img{
    padding:28vw 0 0 0;
}
div.shop_osaka{
  background-size: 100%;
  background-image: url('../images/nlp1_06.jpg');
  background-repeat: no-repeat;
}
div.shop_nara{
  background-size: 100%;
  background-image: url('../images/nlp1_07.jpg');
  background-repeat: no-repeat;
}
div.shop_wakayama{
  background-size: 100%;
  background-image: url('../images/nlp1_08.jpg');
  background-repeat: no-repeat;
}
/* パソコンで見たときは"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; }
}
.area{
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow:hidden;
}





  /* メイン配置 *****************************************/




.obje1{
 width:100%;
    top:10%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    position: absolute;
    z-index:1;
}

.obje2{
 width:100%;
    top:10%;
    left: 50%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:0;
    position: absolute;
}

.obje3{
 width:100%;
    top:89%;
    left:50%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;

}

.obje4{
 width:100%;
    bottom:0%;
    left:0%;
    position: absolute;
    z-index: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 3s 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);
    }
}
.dance{ 
  display: inline-block;
  animation: textAnim 1s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-3deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+3deg);
  }
}
.dancedelay{ 
  display: inline-block;
  animation: textAnim 0.7s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-2deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+2deg);
  }
}
.dancedelay2{ 
  display: inline-block;
  animation: textAnim 1s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-2.5deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+2.5deg);
  }
}






































/*　Y軸（横へ） */
.rotate{
  animation:7s linear infinite rotation;

}

@keyframes rotation{
  10% {
    transform:rotateY(0);
  }
  20% {
    transform:rotateY(360deg);
  }
  30% {
    transform:rotateY(0);
  }  
  40% {
    transform:rotateY(0);
  }
  60% {
    transform:rotateY(0);
  }
  80% {
    transform:rotateY(0);
  }
  90% {
    transform:rotateY(0);
  }  
  100% {
    transform:rotateY(0);
  }


}

/*　Y軸end */




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









}

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

div.story img{
    padding:15vw 0 0 0;
}

ul.menu{  max-width:750px;
        display:flex;
        flex-flow: column;
          padding:3vw 3vw 0.5vw 3vw;
          list-style:none;
          margin:0 auto 5vw!important;;
}
ul.menu li{
    width:100%;
    padding:2vw 0 0 0;

}

}