@charset "UTF-8";

body{
	background-color:#ffffff;
	/*background-color:#000000;*/
}
/**{*/
	/*outline:1px solid red;*/
/*}*/

.wraper{

}

.container {  
  position:relative;
  	top:5px;
	left:5px;
	z-index:2;
	width:500px;		/*330*/		/*ookiku-suruto-hensin-suru*/
	height:240px;		/*264*/
	transform:scale(0.7);
  	perspective:730px;			/*860px*/
	animation-name:mvforward;
	animation-duration:12s;				/*12-shadow-mo-naosu*/
	animation-timing-function:ease-in-out;		/*linear*/
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

.wrap{
	/*position: relative;*/
		display:flex;
	flex-direction:low;
	justify-content:flex-start;
	z-index:0;
}

canvas {
	/*border: 1px solid black;*/
}

.container2{
	position: absolute;
	z-index:0;
	top:5px;
	left:5px;
	background-color:#ffffff;
	/*background-color:#000000;*/
	width:1240px;
	height:600px;
}

.m-body {
    margin-top:-230px;
    overflow: hidden;
    height:100vh;
	/*background:#f0f8ff;*/		/*#DE6FA1*/
}

@media screen and (max-width:768px){
	.wrap{
		position:relative;
		width:100%;
	}
	.wrap > div.container2{
		position:absolute;
		top:-260px;
		left:0px;
		width:58%;
		height:58%;
		transform:scale(1.6,1.6);
	}
	.wrap > div.container2 > canvas{
		width:100vw;
		height:76vh;		
		/*width:500px;*/
		/*height:275px;*/
	}
}
/***************************************************************/
@media only screen and (min-width:1280px) {
	.wrap{
		width:100%;
  	}
	.wrap > div.container2{
		width:100%;
		height:130%;
	}
	.wrap > div.container2 > canvas{
		width:100%;
		height:728px;
		margin-top:-17px;		/*Daiji*/		
	}
}

@keyframes mvforward {
  0% {
    top: 48vh;
    left: -53vw;			/*yo-chousei*/
  }
    100% {
    top: 1vh;
    left: 120vw
  }
}

.crown{
	display:flex;
    justify-content:center;
    position: absolute;
	z-index:3;
  width:500px;
	top:58px;			/*Daiji*/
	left:7px;			/*Daiji*/
}
.balloon{
	width:150px;
	height:30px;
	display:flex;
	flex-direction:low;
	justify-content:center;
	/*align-items:flex-end;*/
  border-radius: 50% 50% 0px 0px;
  padding-top:15px;								/*Daiji*/
    transform-style: preserve-3d;
    background: linear-gradient( to top,#9E9E9E,#E8E8E8);
}
.inner{
	width:90px;
	height:15px;
    /*transform-style: preserve-3d;*/
    /*background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);*/
}

.ball-inner{
	width:110px;
	height:15px;
	background: linear-gradient(to top,#9E9E9E,#E8E8E8);
	animation-name:kaiten2;
	animation-duration:1300ms;
	animation-timing-function:linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.maru{
	width:15px;
	height:15px;
	background-color:red;
	border-radius:50%;
	animation-name:twinkle;
	animation-duration:200ms;
	animation-timing-function:linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

.carousel {
    height: 90px;
  width:350px;
  position: absolute;
  top:0px;
  transform-style: preserve-3d;
  transition: transform 1s;
  	z-index:3;
	display: flex;
	justify-content: center;
}

.crsln {
    height: 90px;
  width:100%;
  position: absolute;
    top:75px;				/*Daiji*/
  transform-style: preserve-3d;
	display: flex;			/*Daiji*/
	justify-content:center;
	z-index:3;
	animation-name:kaiten;
	animation-duration:2600ms;
	animation-timing-function:linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}

@keyframes kaiten {
	0% {transform:rotateY(0deg);}
    100% {transform:rotateY(360deg);}
}

@keyframes kaiten2 {
	0% {transform:rotateY(0deg);}
    100% {transform:rotateY(360deg);}
}

.item {
    display:flex;
    justify-content:center;
	position: absolute;
	z-index:3;
	top:20%;							/*Daiji*/
    width:65px;
	height:60px;
	line-height: 200px;
	opacity:1;		/*0.95*/
    margin: 0 auto;
}

.a {
  transform: rotateY(0deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.b {
  transform: rotateY(30deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.c {
  transform: rotateY(60deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);

}
.d {
  transform: rotateY(90deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.e {
  transform: rotateY(120deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
} 
.f {
  transform: rotateY(150deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.g{
  transform: rotateY(180deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.h {
  transform: rotateY(210deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.i {
  transform: rotateY(240deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.j {
  transform: rotateY(270deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.k {
  transform: rotateY(300deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}
.l {
  transform: rotateY(330deg) translateZ(125px);
background: linear-gradient(120deg,#E8E8E8 0%, #BCBCB8 10%, #c4c4c4 15%, #C9C9C4 40%, #E3E3DD 50%, #C5C5C5 80%, #C9C9C4 90% 100%);
}

.ball1{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count: infinite;
}

.ball2{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:9365ms;				/*9456ms*/
	animation-iteration-count: infinite;
}

.ball3{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:8513ms;				/*16548ms*/
	animation-iteration-count: infinite;
}

.ball4{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:7662ms;					/*2364ms*/
	animation-iteration-count: infinite;
}

.ball5{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:6811ms;					/*11820ms*/
	animation-iteration-count: infinite;
}

.ball6{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:5959ms;				/*21276ms*/
	animation-iteration-count: infinite;
}

.ball7{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:5108ms;				/*4728ms*/
	animation-iteration-count: infinite;
}

.ball8{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:4257ms;				/*14184ms*/
	animation-iteration-count: infinite;
}

.ball9{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:3405ms;				/*23640ms*/
	animation-iteration-count: infinite;
}

.ball10{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:2554ms;					/*7092ms*/
	animation-iteration-count: infinite;
}

.ball11{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:1702ms;			/*18912ms*/
	animation-iteration-count: infinite;
}

.ball12{
  position: absolute;
  top:15px;					/*Daiji*/
  width:35px;
  height:35px;
  border-radius: 50%;
  		animation-name:color-change;
	animation-duration:800ms;			/*1000ms*/
	animation-timing-function:ease;
	animation-delay:851ms;
	animation-iteration-count: infinite;
}

@keyframes color-change {
  0% {
		background: radial-gradient(
			#7fffd4 60%,				/*mint*/
	#7ffffe 80%,
			#0b0092 90%
	);
	opacity:0.4;
}
    
  30% {
		background: radial-gradient(
			#b0e0e6 10%,
	#0fe1ff 50%,			/*#add8e6*/
	/*#afeeee 80%,*/
		#7fffd4 90%
	);
 	opacity:0.4;
}
        
  60% {
		background: radial-gradient(
			/*#87ceeb 10%,*/
	 #0fbfff 50%,				/*#87cefa*/
			#afeeee 80%,
		#7fffd4 90%
   );
   opacity:0.8;
}
    
  80% {
		background: radial-gradient(
			/*#AFB4DB 10%,*/
	#0f82ff 50%,			/*#6495ed*/
			#afeeee 80%,
		#7fffd4 90%
   );
   opacity:1;
}

  100% {
		background: radial-gradient(
			/*#7b68ee 10%,*/
	 #920fff 50%,				/*#9370db*/
			#afeeee 80%,
		#7fffd4 90%
   );
   opacity:1;
}
}

@keyframes twinkle {
  0% {
   background-color:#ffffff;
     		opacity:0.2;
    }
  20% {
   background-color:#ffffff;
	opacity:0.4;
    }
  40% {
   background-color:red;
   opacity:0.6;
    }
  60% {
   background-color:red;
   opacity:0.6;
    }
  80% {
   background-color:#ffffff;
   opacity:1;
    }
  100% {
   background-color:#ffffff;
   opacity:1;
    }
}

.skirt{
	position: absolute;
	top:148px;
	left:80px;
	width:338px;
	height:40px;
	z-index:3;
  border-radius: 100% 100% 0px 0px;
    background: linear-gradient( to top,#9E9E9E,#E8E8E8);
}