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

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

body{
  max-width: 1100px;
  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:100%;
    top:0%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*メインここまで*/


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

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

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


/*ショップここから*/

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

/*ショップここまで*/


/*ボタンここから*/

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

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

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

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

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

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

/*ボタンここまで*/


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

.event_01{
    width:85%;
    top:0%;
    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) }
}

/*バウンドモーションここまで*/


/*風船モーションここから*/
 
.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);
    }
}

/*風船モーションここまで*/


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

.pop_01 {
    width:65%;
    top:57%;
    left:17.5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

/**↓popup**/
.open {
  cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  margin:  0; 
  padding:0px;
}
.overlay .window img{width: 95vw;}

#pop-up,#pop-up_2,#pop-up_3,#pop-up_4,#pop-up_5,#pop-up_6,#pop-up_7,#pop-up_8,#pop-up_9,#pop-up_10,#pop-up_11,#pop-up_00,#pop-up_12,#pop-up_13,#pop-up_14,#pop-up_15{
  display: none; /* label でコントロールするので input は非表示に */
}
.overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up:checked + .overlay ,#pop-up_2:checked + .overlay {
  display: block;
  z-index: 9000;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.window {
  width: 80vw;
  background-color: #ffffff;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vh;
  padding-top:0vw;
  padding-bottom:0vw;  
}
.close {
  color: #fff;
  cursor:pointer;
  position: absolute;
  top: -17%;
  right:-9%;
  font-size: 1.5rem;
  line-height:1;
}
.close0 {
  cursor:pointer;
  position: absolute;
  top: 0;
  right:1vw;
  font-size: 2rem;
  line-height:1;
}


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

.graymenu{
  padding-bottom:0vw;

}
.small{width:99%;}
.half{width:285px;}
.half img{max-width:100px}
	
	
/*グローバルナビここから*/

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

/*グローバルナビここまで*/
	
	
/*ショップここから*/

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

/*ショップここまで*/
	
	
/*ボタンここから*/

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

.btn_02{
    width:39%;
    top:35%;
    left:71%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.btn_03{
    width:57%;
    top:32%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

.btn_04{
    width:57%;
    top:60%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
	
.btn_05{
    width:53%;
    top:68%;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

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

/*ボタンここまで*/
	
	
/*イベントここから*/

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

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


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

.pop_01 {
    width:57%;
    top:53%;
    left:21.5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}

/*ポップアップここまで*/
	
	
.window {
  width: 800px;
  background-color: #ffffff;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vh;
  padding-top:0vw;
  padding-bottom:0vw;
    overflow: auto;
}
#pop-up:checked + .overlay ,#pop-up_2:checked + .overlay {
  display: block;
  z-index: 9000;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;

}
.overlay .window img{
  width: 100%;

}
	
.close {
  color: #fff;
  cursor:pointer;
  position: absolute;
  top: 0%;
  right:.5%;
  font-size: 1.5rem;
  line-height:1;
}
	

	
}