html {
  -webkit-overflow-scrolling: touch;
    max-width: 500px;
    margin: 0 auto;
	background-color: #E02535;
    background-size: 100%;
}

img{  vertical-align:top;
      width:100%;}

body{
  max-width: 500px;
  margin: 0 auto;

}

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


.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; }
}

h1{margin:0 auto; 
  background:#AEB3B5;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

}

h3{
font-size:5vw;
margin-bottom:1vw;
}

p{font-size:2.5vw;
  line-height:2;
}

.opacity:hover {
  opacity: 0.8;
}

.noopacity:hover {
  opacity: 0;
}

.areamain{
      max-width:1100px;
      overflow:hidden;
      position:relative;
      margin:0 auto;
}

/* メインここから */

.main_01{
    width:85%;
    top:30%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/* メインここまで */


/*ナビここから*/

.nav_01{
    width:90%;
    top:0%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.nav_02{
    width:90%;
    top:35%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.nav_03{
    width:90%;
	bottom:0%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*ナビここまで*/


/*ボタンここから*/

.btn_01{
    width:59%;
    top:45%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*ボタンここまで*/


/***追従するトップへ戻るボタン***/
#page-top {
	width: 15vw;
    position: fixed;
    right: 3vw;
    bottom: 10vw;
    z-index: 9999;
}


.bound {
  animation: bound 1s  ease-in-out .100s alternate;
  transition: 1.5s ease-in-out;
animation-iteration-count:3;

}
@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-5px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(0) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}



/***トップへ戻るボタンここまで***/

#areanai{
      max-width:1100px;

      position:relative;
      margin:0 auto;

}

 
.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);
    }
}


/*ポップアップスマホ版ここから*/

.modal-body{ 
		max-width: 80%;
}

/*ポップアップスマホ版ここまで*/


/* ここからPC ************************************************************************************************/

.graymenu{
  padding-bottom:0vw;

}
.small{width:99%;}
.half{width:285px;}
.half img{max-width:100px}
	


/***追従するトップへ戻るボタン***/
#page-top {
	width: 80px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
  }
	
	
/*ポップアップここから*/

.page-top-btn {
	width: 80px;
    position: fixed;
    right: 50px;
    bottom: 50px;
  }

.logo1 {
    width:42%;
    top:0%;
    right: 0;
    left: 0;
    left: auto;
    left:6.5%;
    position: absolute;
}

.logo2 {
    width:42%;
    top:0%;
    right: 0;
    left: 0;
    left: auto;
    left:51.5%;
    position: absolute;
}

.modal-item__inner {
  width: 100%;
}

.modal__item .modal-open {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/*-----------------------------------------------------------
pop up window
------------------------------------------------------------*/

.modal-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9000;
  text-align: center;
  background-color: #00000070;
  /* overflow: auto; */
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}

.modal-container.active {
  opacity: 1;
  visibility: visible;
}

.modal-body {
  width: 80vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-body__inner {
  position: relative;
  width: 100%;
}

.modal-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: -7px;
  width: 40px;
  height: 20px;
  font-size: 1.4rem;
  cursor: pointer;
}

/*-----------------------------------------------
キャラクターページ用
-----------------------------------------------*/

.p-character .modal-body {
  width: 80vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-character .modal-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 2%;
  right: 7%;
  width: 5%;
  height: 5%;
  font-size: 1.6rem;
  cursor: pointer;

}

.modal-content {
  width: 100%;
  height: auto;
}

@media screen and (min-width:751px) {
  /*-----------------------------------------------------------
pop up window
------------------------------------------------------------*/
  .modal-body {
    width: 432px;
  }

  .p-character .modal-body {
    width: 340px;

  }

  .p-character .modal-close {
    top: 30.2px;
    right: 30.2px;
    width: 17.3px;
    height: 17.3px;
  }
}

/*ポップアップここまで*/