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

html.shop {
	background-color: #EC7296;
}

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

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

}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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:87%;
    top:3%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.main_03{
    width:100%;
    bottom:4%;
    left:49%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.main_04{
  width:117%;
    top:26%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.main_05{
    width:100%;
    bottom:10%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.main_06{
    width:86%;
    bottom:-18%;
    left:82%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.main_08{
    width:100%;
    top: 28%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.main_09{
    width:103%;
    top: 39%;
    left: 3%;
    position: absolute;
}

.main_10{
    width:16%;
  top: 25%;
    left:-6%;
    position: absolute;
}

.main_11{
    width:10%;
  top: 23%;
    right:3%;
    position: absolute;
}

.main_12{
    width:13%;
  top: 50%;
  right: -1%;
    position: absolute;
}
.main_13{
    width:14%;
    bottom: -1%;
    right: -1%;
    position: absolute;
}
.main_14{
    width:17%;
    bottom: 22%;
    left: -5%;
    position: absolute;
}

/* メインここまで */


/*パーツここから*/

.parts_01{
    width:12%;
    top:6%;
    left:15%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_02{
    width:8%;
    top:13%;
  right: 19%;
    position: absolute;
}

.parts_03{
    width:11%;
    top:57.7%;
    left:14%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.parts_05{
    width:80%;
    top:0%;
  right: 6%;
    position: absolute;
}

.parts_06{
    width:30%;
    top:17%;
    right: 0;
    position: absolute;
}

.parts_07{
    width:80%;
    top:0%;
    left:14%;
    position: absolute;
}

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

.parts_09{
    width:84%;
    top:20%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_10{
    width:86%;
    top:5%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.parts_12{
    width:86%;
    top:5%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_13{
    width:68%;
    top:14%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_14{
    width:83%;
    top:2%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_15{
    width:81%;
    top:47%;
    left:44%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_16{
    width:28%;
    top:20%;
    left:0%;
    position: absolute;
}

.parts_17{
    width:50%;
    top:13%;
    left:92%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.parts_19{
    width:104%;
    top:4.5%;
    left:58%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_20{
    width:96%;
    top:25.5%;
    left:47%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_21{
    width:94%;
    top:46%;
    left:56%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.parts_22{
    width:138%;
    top:66.5%;
    left:41%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
.parts_23{
     width:9%;
  bottom: 29%;
    right: 5%;
    position: absolute;
}
.parts_24{
    width:12%;
    bottom: 10%;
    left: 6%;
    position: absolute;
}
.parts_25{
      width:3%;
  bottom: 8%;
  right: 33%;
    position: absolute;
}

.parts_26{
    width:86%;
    top:12%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
/*パーツここまで*/


/*ボタンここから*/

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

.btn_02{
    width:42%;
    top:39%;
    left:26%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_03{
    width:42%;
    top:40%;
    left:76%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.btn_05{
    width:42%;
    top:39%;
    left:28%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_06{
    width:42%;
    top:39%;
    left:72%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_07{
    width:42%;
    top:61%;
    left:28%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_08{
    width:42%;
    top:62%;
    left:72%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.btn_10{
    width:75%;
    bottom: 40%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
  z-index: 2;
}

.btn_11{
    width:75%;
    bottom:16%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
  z-index: 2;
}

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

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

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

.btn_15{
    width:60%;
    top:70%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_16{
    width:60%;
    top:50%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
  z-index: 3;
}

.btn_17{
    width:60%;
    top:35%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
  z-index: 3;
}

.btn_18{
    width:75%;
    top:70%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_19{
    width:86%;
    top:25%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*ボタンここまで*/


/*キャラクターここから*/

.chara_01{
    width:48%;
    top:10%;
    left:27%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*キャラクターここまで*/


/*フッターここから*/

.footer_01{
    width:20%;
    top:55%;
    left:12%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.footer_02{
    width:34%;
    top:49%;
    left:79%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.footer_03{
    width:20%;
    top:77%;
    left:12%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.footer_04{
    width:34%;
    top:76%;
    left:79%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

.footer_06{
    width:34%;
    top:24%;
    left:79%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.footer_07{
    width:85%;
  bottom: -10%;
    right: 0%;
    position: absolute;
}

.footer_08{
    width:100%;
  bottom: 0;
  left: 0;
    position: absolute;
  pointer-events: none;
}
.footer_09{
    width:100%;
  bottom: 8%;
    right:0 ;
    position: absolute;
}


/*フッターここまで*/


/*キャラポップアップここから*/



/*キャラポップアップここまで*/


/*イベントここから*/

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

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

/*イベントここまで*/


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

}

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


/*---------------------------------------------------------------
その場でバウンド
----------------------------------------------------------------*/

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


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


/*グローバルナビここから*/

.global-navi {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  background-color: #f18d49;
  z-index: 1000;
}
.global-navi nav {
  width: 100%;
}
.global-navi__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-navi__list__item a {
  width: 100%;
  height: auto;
  
}
.global-navi__list__item img {
  width: 100% ;
  height: auto;
}

.l-footer {
  margin-bottom: calc(100vw * 138.0682 / 750);
}

@media screen and (min-width:751px) {
  .global-navi {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
.global-navi nav {
  width: 100%;
}
.global-navi__list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-navi__list__item a {
  width: 187.5px;
  height: auto;
  
}
.global-navi__list__item img {
  width: 100% ;
  height: auto;
}
	
.l-footer {
  margin-bottom: 138.0682px;
}
   
}

/*グローバルナビここまで*/


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

.balloon_chara {
 

    animation: sway 2s 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 ************************************************************************************************/
@media screen and (min-width:751px) {

.graymenu{
  padding-bottom:0vw;

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


/***追従するトップへ戻るボタン***/
#page-top {
	width: 80px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 99;
  }
	

	
}

/*ポップアップここから*/

.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: 0;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  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;
  }
}

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


/*スライダーここから*/

.backimage {
  background-image: url("../images/newarea/back/back_03.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
	bottom: 5%!important;
  object-fit: cover;
}

.backimage_02 {
  background-image: url("../images/newarea/back/back_06.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
	bottom: 5%!important;
  object-fit: cover;
}

.backimage_03 {
  background-image: url("../images/newarea/back/back_09.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
	bottom: 5%!important;
  object-fit: cover;
}

.backimage_04 {
  background-image: url("../images/newarea/back/back_12.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
	bottom: 5%!important;
  object-fit: cover;
}

.backimage_05 {
  background-image: url("../images/newarea/back/back_15.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
	bottom: 5%!important;
  object-fit: cover;
}

/*------ スライダーの横幅 ------*/
.slider{
  width:83%;
  margin:0 auto;
  font-size: 0;
}

/*スライダー画像の間隔*/
.slider .slick-slide{
    margin-right: .5vw!important;
    margin-left: .5vw!important;
}

/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}




/*---------- 矢印 ----------*/
.slider .slick-next{
    top:50%!important;
    right:-2%!important;
}
.slider .slick-prev{
    top:50%!important;
    left:-2%!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
	color: #fff;
}

.slick-dots {
	display: none;
}


/*スライダーここまで*/