@charset "utf-8";
/* CSS Document */

body{
	
	text-align: center;
}

#container1{
	background: #b0dfff;
	background: -webkit-gradient(linear, left top, left bottom, from(#b0dfff), to(#f0f9ff));
	background: linear-gradient(top, #b0dfff, #f0f9ff);
	position: relative;
	margin: 0 auto;width:100%;height:100%;max-width: 800px;
	box-shadow:3px 3px rgba(0,0,0,0.3);
	border:1px solid #a9a9a9;
	border-bottom: 1px solid #a9a9a9;
	border-right: 1px solid #a9a9a9;
	-webkit-border-radius:13px;
	-moz-border-radius:13px;
	border-radius:13px;
}

#container1:after{
	background: url(../images/bg5.png) repeat-x 50% 100%;
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	-webkit-border-radius:13px;
	-moz-border-radius:13px;
	border-radius:13px;
}

.snow01{
	background: url(../images/snow01.png) repeat 50% 0;
	position: relative;
	width: 100%;
	height: 500px;
	-webkit-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

.snow02{
	background: url(../images/snow02.png) repeat 50% 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	-webkit-animation: snow 18s linear infinite;
	animation: snow 18s linear infinite;
}

.snow03{
	background: url(../images/snow03.png) repeat 50% 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
	-webkit-animation: snow 12s linear infinite;
	animation: snow 12s linear infinite;
}

.box{
	text-align: left;
	position: relative;
	width: 20%;
  max-width:800px;
  height: 20%;
 max-height: 500px;
	margin: 0 auto;
	z-index: 10;
	
}

.box .text{
	position: absolute;
	top: 320px;
	left:-70px;
	-webkit-animation: item 4s linear;
	animation: item 4s linear;
}

.box .snobman{
	position: absolute;
	top: 270px;
	left:-200px;
	-webkit-animation: item 2s linear;
	animation: item 2s linear;
}
@-webkit-keyframes snow {
	0% {	background-position: 50% -316px;}
	100% {	background-position: 50% 0;}
}
@keyframes snow {
	0% {	background-position: 50% -316px;}
	100% {	background-position: 50% 0;}
}

@-webkit-keyframes item {
	0% {	-webkit-transform: translate(0, -500px);}
	100% {	-webkit-transform: translate(0, 0);}
}
@keyframes item {
	0% {	transform: translate(0, -500px);}
	100% {	transform: translate(0, 0);}
}
@media screen and (max-device-width:480px){
#container1{
	max-width:550px;
	
}

#container1:after{
	
	width: 100%;
	height: 344px;
}

.snow01{
	
	height: 344px;
	
}

.snow02{
	
	width: 100%;
	height: 344px;
	
}

.snow03{
	
	width: 100%;
	height: 344px;
	
}

.box{
	
  max-width:550px;
  height: 20%;
 max-height: 344px;
	
	
}

.box .text{
	
	top: 160px;
	left:-85px;
	
}

.box .snobman{
	
	top: 135px;
	left:-150px;
	
}

@-webkit-keyframes snow {
	0% {	background-position: 50% -217px;}
	100% {	background-position: 50% 0;}
}
@keyframes snow {
	0% {	background-position: 50% -217px;}
	100% {	background-position: 50% 0;}
}

@-webkit-keyframes item {
	0% {	-webkit-transform: translate(0, -344px);}
	100% {	-webkit-transform: translate(0, 0);}
}
@keyframes item {
	0% {	transform: translate(0, -344px);}
	100% {	transform: translate(0, 0);}
}}

/* PC or  SP
========================================================================== */
#PC{
	display: block;
}
@media(max-width:960px){
	#PC{
		display: none;
	}
}
@media(max-width:480px){
	#PC{
		display: none;
	}
}
#SP{
	display: none;
}
@media(max-width:960px){
	#SP{
		display: none;
	}
}
@media(max-width:480px){
	#SP{
		display: block;
	}
}
#TB{
	display: none;
}
@media(max-width:960px){
	#TB{
		display: block;
	}
}
@media(max-width:480px){
	#TB{
		display: none;
	}
}


#selectPC{
	display: block;
}

#selectTB{
	display: none;
}