@charset "utf-8";

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  80% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  80% {opacity: 1;}
}

.bubble_img {animation: bubble-animation 5s linear infinite;position: absolute; animation-duration: 7s;}

@keyframes bubble-animation {
    0% {transform: translateY(100%);opacity: 0;}
    50% {opacity: 1;}
    100% {transform: translateY(-100%);opacity: 0;}
}
/*--------------------------------loop_animation_right--------------------------------*/
.scroll .ball{animation: loop_animation_right 2s linear infinite;}
@keyframes loop_animation_right {
  0% {transform: translateY(0);}
  10% {transform: translateY(10px);}
  40% {transform: translateY(80px);}
  50% {transform: translateY(90px);}
  40% {transform: translateY(80px);}
  90% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}


/* 星のスタイル */
.star {box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.3); position: absolute; display: block; background-color: #fff; border-radius: 50%; box-shadow: 0 0 4px 2px rgba(#fff, 0.2); opacity: 0; animation: twinkle 5s infinite;}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {opacity: 0;}
  50% {transform: scale(1.1);opacity: 1;}
  100% {opacity: 0;transform: scale(1);}
}

/*--------------------------- fadeInLeft_img_left ---------------------------*/
.introduction_box .box .img_left{ -webkit-animation-name: fadeInLeft_img_left; animation-name: fadeInLeft_img_left;}
@-webkit-keyframes fadeInLeft_img_left {
  from { opacity: 0; -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0);}
  50% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInLeft_img_left {
  from { opacity: 0; -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); }
  50% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

/*--------------------------- fadeInRight_img_right ---------------------------*/
.introduction_box .box .img_right{  -webkit-animation-name: fadeInRight_img_right; animation-name: fadeInRight_img_right;}
@-webkit-keyframes fadeInRight_img_right {
  from { opacity: 0; -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0);}
  50% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);  }
}
@keyframes fadeInRight_img_right { 
  from { opacity: 0; -webkit-transform: translate3d(5%, 0, 0); transform: translate3d(5%, 0, 0);}
  50% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}


/*--------------------------- fadeInRightBig_text_left ---------------------------*/
.introduction_box .box .text_box.text_left{-webkit-animation-name: fadeInRightBig_text_left; animation-name: fadeInRightBig_text_left;}
@-webkit-keyframes fadeInRightBig_text_left {
	from { opacity: 0; -webkit-transform: translate3d(5%, -50%, 0); transform: translate3d(5%, -50%, 0);}
	80% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);}
}
@keyframes fadeInRightBig_text_left {
	from { opacity: 0; -webkit-transform: translate3d(5%, -50%, 0); transform: translate3d(5%, -50%, 0);}
	80% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);}
}

/*--------------------------- fadeInLeftBig_text_right ---------------------------*/
.introduction_box .box .text_box.text_right{-webkit-animation-name: fadeInLeftBig_text_right; animation-name: fadeInLeftBig_text_right;}
@keyframes fadeInLeftBig_text_right {
	from { opacity: 0; -webkit-transform: translate3d(-5%, -50%, 0); transform: translate3d(-5%, -50%, 0);}
	80% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);}
}
@keyframes fadeInLeftBig_text_right {
	from { opacity: 0; -webkit-transform: translate3d(-5%, -50%, 0); transform: translate3d(-5%, -50%, 0);}
	80% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);}
}

/*--------------------------- fadeInLeftBig_text_right ---------------------------*/
.ticket_box .white_box .flex .img{ -webkit-animation-name: fadeInDown_img_box; animation-name: fadeInDown_img_box;}

@-webkit-keyframes fadeInDown_img_box {
  from {opacity: 0;-webkit-transform: translate3d(0, -20%, 0);transform: translate3d(0, -20%, 0);}
  80% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}
@keyframes fadeInDown {
  from {opacity: 0;-webkit-transform: translate3d(0, -20%, 0);transform: translate3d(0, -20%, 0);}
  80% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}

#food_garmping .glamp_box .img_box img,
.ticket_box .white_box .flex .img img,
#hot_spring .contact img{-webkit-animation-name: ticket_box_zoomInUp; animation-name: ticket_box_zoomInUp;}
@-webkit-keyframes ticket_box_zoomInUp {
  from {opacity: 0;-webkit-transform: scale(1.3);transform: scale(1.3);}
  80% {opacity: 1;-webkit-transfor: scale(1); transform: scale(1); }
}
@keyframes ticket_box_zoomInUp {
  from {opacity: 0;-webkit-transform: scale(1.3);transform: scale(1.3);}
  80% {opacity: 1;-webkit-transfor: scale(1); transform: scale(1); }
}
/*--------------------------- img_zoomInUp ---------------------------*/
#activity .inner_2 .img_box img,
#activity .playground .playground_box .img img{-webkit-animation-name: img_zoomInUp; animation-name: img_zoomInUp;}

/* Zooming entrances */
@-webkit-keyframes img_zoomInUp {
  from {-webkit-transform: scale(1.3);transform: scale(1.3);}
  80% {-webkit-transfor: scale(1); transform: scale(1); }
}
@keyframes img_zoomInUp {
  from {-webkit-transform: scale(1.3);transform: scale(1.3);}
  80% {-webkit-transfor: scale(1); transform: scale(1); }
}

/*--------------------------- text_anime_on ---------------------------*/

.linklist_box .white_box .big_tt_box .big_tt {animation-name: big_tt_box_text_anime_on; -webkit-animation-name: big_tt_box_text_anime_on;}

@keyframes big_tt_box_text_anime_on {
	0% { color: #000; transform: translateY(10px); }
	50% { color: #e3007d; transform: translateY(0); }
}
@-webkit-keyframes big_tt_box_text_anime_on {
	0% { color: #000; transform: translateY(10px); }
	50% { color: #e3007d; transform: translateY(0); }
}

/*--------------------------- text_anime_on ---------------------------*/
#food_garmping .restrant_box .img_box .img_3,
#food_garmping .restrant_box .img_box .img_1{-webkit-animation-name: swing_min_1; animation-name: swing_min_1;}
@-webkit-keyframes swing_min_1 {
	0% {opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px);}
	50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
}
@keyframes swing_min_1 {
	0% {opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px);}
	50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
}

#food_garmping .restrant_box .img_box .img_4,
#food_garmping .restrant_box .img_box .img_2{-webkit-animation-name: swing_min_2; animation-name: swing_min_2;}
@-webkit-keyframes swing_min_2 {
	0% {opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px);}
	50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
}
@keyframes swing_min_2 {
	0% {opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px);}
	50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
}

#footer h3 a img{-webkit-animation-name: swing_footer; animation-name: swing_footer;}
@-webkit-keyframes swing_footer {
  from {opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes swing_footer {
  from {opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
/*
#footer h3 a img{-webkit-animation-name: swing_footer; animation-name: swing_footer;transform-origin: left center;}
@-webkit-keyframes swing_footer {
	0% {opacity: 0; -webkit-transform: translateX(-30px) rotateZ(-15deg); transform: translateX(-30px) rotateZ(-15deg);}
	50% { opacity: 1; -webkit-transform: translateX(0px) rotateZ(0deg);transform: translateX(0px) rotateZ(0deg);}
}
@keyframes swing_footer {
	0% {opacity: 0; -webkit-transform: translateX(-30px) rotateZ(-15deg); transform: translateX(-30px) rotateZ(-15deg);}
	50% { opacity: 1; -webkit-transform: translateX(0px) rotateZ(0deg);transform: translateX(0px) rotateZ(0deg);}
}
*/


/*--------------------------- fadeInLeftBig_text_right ---------------------------*/
.title_box h3[data-animate-text] span,
.title_box p[data-animate-text] span {opacity: 1; display: inline-block;}

.title_box h3[data-animate-text].appeartext span,
.title_box p[data-animate-text].appeartext span {animation: activity_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes activity_h3_text_anime_on {
  0% { color: #09b5b7;}
  50% { color: #fff;}
}

#new_open .new_open_box h3[data-animate-text].appeartext span{animation: new_open_anime_on 0.5s ease-out forwards;}
@keyframes new_open_anime_on {
  0% { color: #f1ca17;}
  50% { color: #fff;}
}

#food_garmping .introduction_box h4[data-animate-text].appeartext span,
#food_garmping .title_box h3[data-animate-text].appeartext span,
#food_garmping p[data-animate-text].appeartext span {animation: food_garmping_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes food_garmping_h3_text_anime_on {
  0% { color: #f1ca17;}
  50% { color: #fff;}
}

#hot_spring .title_box h3[data-animate-text].appeartext span,
#hot_spring .contact h4[data-animate-text].appeartext span,
#hot_spring p[data-animate-text].appeartext span {animation: hot_spring_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes hot_spring_h3_text_anime_on {
  0% { color: #09b4bf;}
  50% { color: #fff;}
}

#ticket .title_box h3[data-animate-text].appeartext span,
#ticket p[data-animate-text].appeartext span {animation: ticket_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes ticket_h3_text_anime_on {
  0% { color: #fff226;}
  50% { color: #fff;}
}

#model_plan .title_box h3[data-animate-text].appeartext span,
#model_plan p[data-animate-text].appeartext span {animation: model_plan_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes model_plan_h3_text_anime_on {
  0% { color: #fadf87; }
  50% { color: #000;}
}

#access .title_box h3[data-animate-text].appeartext span,
#access p[data-animate-text].appeartext span {animation: access_h3_text_anime_on 0.5s ease-out forwards;}
@keyframes access_h3_text_anime_on {
  0% { color: #fff;}
  50% { color: #000;}
}

@media only screen and (max-width: 768px) {
	
	.bubble_img {animation: bubble-animation 5s linear infinite;position: absolute; animation-duration: 7s;}
	
	@keyframes bubble-animation {
	    0% {transform: translateY(100%);opacity: 0;}
	    50% {opacity: 1;}
	    100% {transform: translateY(-100%);opacity: 0;}
	}
	/*--------------------------------loop_animation_right--------------------------------*/
	.scroll .ball{animation: loop_animation_right 2s linear infinite;}
	@keyframes loop_animation_right {
	  0% {transform: translateY(0);}
	  10% {transform: translateY(10px);}
	  40% {transform: translateY(80px);}
	  50% {transform: translateY(90px);}
	  40% {transform: translateY(80px);}
	  90% {transform: translateY(10px);}
	  100% {transform: translateY(0);}
	}
	
	
	/* 星のスタイル */
	.star {box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.3); position: absolute; display: block; background-color: #fff; border-radius: 50%; box-shadow: 0 0 4px 2px rgba(#fff, 0.2); opacity: 0; animation: twinkle 5s infinite;}
	
	
	/*--------------------------- fadeInLeft_img_left ---------------------------*/
	.introduction_box .box .img_left{ -webkit-animation-name: fadeInLeft_img_left; animation-name: fadeInLeft_img_left;}
	@-webkit-keyframes fadeInLeft_img_left {
	  from { opacity: 0; -webkit-transform: translate3d(-55%, -0%, 0); transform: translate3d(-55%, -0%, 0);}
	  50% { opacity: 1; -webkit-transform: translate3d(-50%, -0%, 0); transform: translate3d(-50%, -0%, 0); }
	}
	@keyframes fadeInLeft_img_left {
	  from { opacity: 0; -webkit-transform: translate3d(-55%, -0%, 0); transform: translate3d(-55%, -0%, 0);}
	  50% { opacity: 1; -webkit-transform: translate3d(-50%, -0%, 0); transform: translate3d(-50%, -0%, 0); }
	}
	
	/*--------------------------- fadeInRight_img_right ---------------------------*/
	.introduction_box .box .img_right{  -webkit-animation-name: fadeInRight_img_right; animation-name: fadeInRight_img_right;}
	@-webkit-keyframes fadeInRight_img_right {
	  from { opacity: 0; -webkit-transform: translate3d(-45%, -0%, 0); transform: translate3d(-45%, -0%, 0);}
	  50% { opacity: 1; -webkit-transform: translate3d(-50%, -0%, 0); transform: translate3d(-50%, -0%, 0);  }
	}
	@keyframes fadeInRight_img_right { 
	  from { opacity: 0; -webkit-transform: translate3d(-45%, -0%, 0); transform: translate3d(-45%, -0%, 0);}
	  50% { opacity: 1; -webkit-transform: translate3d(-50%, -0%, 0); transform: translate3d(-50%, -0%, 0);  }
	}
	
	
	/*--------------------------- fadeInRightBig_text_left ---------------------------*/
	.introduction_box .box .text_box.text_left{-webkit-animation-name: fadeInRightBig_text_left; animation-name: fadeInRightBig_text_left;}
	@-webkit-keyframes fadeInRightBig_text_left {
		from { opacity: 0; -webkit-transform: translate3d(5%, -0%, 0); transform: translate3d(5%, -0%, 0);}
		80% { opacity: 1; -webkit-transform: translate3d(0, -0%, 0); transform: translate3d(0, -0%, 0);}
	}
	@keyframes fadeInRightBig_text_left {
		from { opacity: 0; -webkit-transform: translate3d(5%, -0%, 0); transform: translate3d(5%, -0%, 0);}
		80% { opacity: 1; -webkit-transform: translate3d(0, -0%, 0); transform: translate3d(0, -0%, 0);}
	}
	
	/*--------------------------- fadeInLeftBig_text_right ---------------------------*/
	.introduction_box .box .text_box.text_right{-webkit-animation-name: fadeInLeftBig_text_right; animation-name: fadeInLeftBig_text_right;}
	@keyframes fadeInLeftBig_text_right {
		from { opacity: 0; -webkit-transform: translate3d(-5%, -0%, 0); transform: translate3d(-5%, -0%, 0);}
		80% { opacity: 1; -webkit-transform: translate3d(0, -0%, 0); transform: translate3d(0, -0%, 0);}
	}
	@keyframes fadeInLeftBig_text_right {
		from { opacity: 0; -webkit-transform: translate3d(-5%, -0%, 0); transform: translate3d(-5%, -0%, 0);}
		80% { opacity: 1; -webkit-transform: translate3d(0, -0%, 0); transform: translate3d(0, -0%, 0);}
	}
	
	/*--------------------------- fadeInLeftBig_text_right ---------------------------*/
	.ticket_box .white_box .flex .img{ -webkit-animation-name: fadeInDown_img_box; animation-name: fadeInDown_img_box;}
	
	@-webkit-keyframes fadeInDown_img_box {
	  from {opacity: 0;-webkit-transform: translate3d(0, -20%, 0);transform: translate3d(0, -20%, 0);}
	  80% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
	}
	@keyframes fadeInDown {
	  from {opacity: 0;-webkit-transform: translate3d(0, -20%, 0);transform: translate3d(0, -20%, 0);}
	  80% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
	}
	
	#food_garmping .glamp_box .img_box img,
	.ticket_box .white_box .flex .img img,
	#hot_spring .contact img{-webkit-animation-name: ticket_box_zoomInUp; animation-name: ticket_box_zoomInUp;}
	@-webkit-keyframes ticket_box_zoomInUp {
	  from {opacity: 0;-webkit-transform: scale(1.3);transform: scale(1.3);}
	  80% {opacity: 1;-webkit-transfor: scale(1); transform: scale(1); }
	}
	@keyframes ticket_box_zoomInUp {
	  from {opacity: 0;-webkit-transform: scale(1.3);transform: scale(1.3);}
	  80% {opacity: 1;-webkit-transfor: scale(1); transform: scale(1); }
	}
	/*--------------------------- img_zoomInUp ---------------------------*/
	#activity .inner_2 .img_box img,
	#activity .playground .playground_box .img img{-webkit-animation-name: img_zoomInUp; animation-name: img_zoomInUp;}
	
	/* Zooming entrances */
	@-webkit-keyframes img_zoomInUp {
	  from {-webkit-transform: scale(1.3);transform: scale(1.3);}
	  80% {-webkit-transfor: scale(1); transform: scale(1); }
	}
	@keyframes img_zoomInUp {
	  from {-webkit-transform: scale(1.3);transform: scale(1.3);}
	  80% {-webkit-transfor: scale(1); transform: scale(1); }
	}
	
	/*--------------------------- text_anime_on ---------------------------*/
	
	.linklist_box .white_box .big_tt_box .big_tt {animation-name: big_tt_box_text_anime_on; -webkit-animation-name: big_tt_box_text_anime_on;}
	
	@keyframes big_tt_box_text_anime_on {
		0% { color: #000; transform: translateY(10px); }
		50% { color: #e3007d; transform: translateY(0); }
	}
	@-webkit-keyframes big_tt_box_text_anime_on {
		0% { color: #000; transform: translateY(10px); }
		50% { color: #e3007d; transform: translateY(0); }
	}
	
	/*--------------------------- text_anime_on ---------------------------*/
	#food_garmping .restrant_box .img_box .img_3,
	#food_garmping .restrant_box .img_box .img_1{-webkit-animation-name: swing_min_1; animation-name: swing_min_1;}
	@-webkit-keyframes swing_min_1 {
		0% {opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px);}
		50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
	}
	@keyframes swing_min_1 {
		0% {opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px);}
		50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
	}
	
	#food_garmping .restrant_box .img_box .img_4,
	#food_garmping .restrant_box .img_box .img_2{-webkit-animation-name: swing_min_2; animation-name: swing_min_2;}
	@-webkit-keyframes swing_min_2 {
		0% {opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px);}
		50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
	}
	@keyframes swing_min_2 {
		0% {opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px);}
		50% { opacity: 1; -webkit-transform: translateX(0px);transform: translateX(0px);}
	}
/*
	
	#model_plan .accordion_box .accordion_btn .right_img{-webkit-animation-name: swing_accordion_btn_1; animation-name: swing_accordion_btn_1;}
	@-webkit-keyframes swing_accordion_btn_1 {
		0% {opacity: 0; -webkit-transform: translate3d(-50%,-10%,0); transform: translate3d(-50%,-10%,0);}
		50% { opacity: 1; -webkit-transform: translate3d(-50%,0%,0); transform: translate3d(-50%,0%,0);}
	}
	@keyframes swing_accordion_btn_1 {
		0% {opacity: 0; -webkit-transform: translate3d(-50%,-10%,0); transform: translate3d(-50%,-10%,0);}
		50% { opacity: 1; -webkit-transform: translate3d(-50%,0%,0); transform: translate3d(-50%,0%,0);}
	}
	
	#model_plan .accordion_box .accordion_btn .left_img{-webkit-animation-name: swing_accordion_btn_2; animation-name: swing_accordion_btn_2;}
	@-webkit-keyframes swing_accordion_btn_2 {
		0% {opacity: 0; -webkit-transform: translate3d(-50%,-10%,0); transform: translate3d(-50%,-10%,0);}
		50% { opacity: 1; -webkit-transform: translate3d(-50%,0%,0); transform: translate3d(-50%,0%,0);}
	}
	@keyframes swing_accordion_btn_2 {
		0% {opacity: 0; -webkit-transform: translate3d(-50%,-10%,0); transform: translate3d(-50%,-10%,0);}
		50% { opacity: 1; -webkit-transform: translate3d(-50%,0%,0); transform: translate3d(-50%,0%,0);}
	}
*/
/*
	
	#footer h3 a img{-webkit-animation-name: swing_footer; animation-name: swing_footer;transform-origin: left center;}
	@-webkit-keyframes swing_footer {
		0% {opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px) ;}
		50% { opacity: 1; -webkit-transform: translateY(0px) ;transform: translateY(0px);}
	}
	@keyframes swing_footer {
		0% {opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px) ;}
		50% { opacity: 1; -webkit-transform: translateY(0px) ;transform: translateY(0px);}
	}
*/
	
	
	
}