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

html,body{
  height:100%;
  }
#header h1{
  text-align:center;
  width:20%;
  margin-left:auto;
  margin-right:auto;
  padding-top:.2em;
  padding-bottom:.2em;
  }

#main{
  background-color:#d21923;
  height:100%;
  position:relative;
  overflow:hidden;
  }
#main:before{
    content:'';
  display:block;
  position:absolute;
  top: -90%;
    left: -90%;
   width:280%;
   height:280%;
   background-image:url(../images/intensive_line.png);
   background-position:center center;
   background-repeat:no-repeat;
   background-size:cover;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    -ms-animation: spin 15s linear infinite;
    -o-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    }
 @-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
#main:after{
  content:'';
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
   background-image:url(../images/stars.png);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:0% auto;
   -webkit-transition: 1s linear .5s;
    -moz-transition: 1s linear .5s;
    -ms-transition: 1s linear .5s;
    -o-transition: 1s linear .5s;
    transition: 1s linear .5s;
  }
#main.kanpai:after{
  background-size:100% auto;
  }
.flags{
  position:absolute;
  top:2em;
  min-height:10em;
  width:100%;
  }
.flags img{
  width:100%;
  height:auto;
  }
.flag_a,
.flag_b{
  position:absolute;
  top:0; width:100%;
  }


.congratulations{
  position: relative;
  top: 30%;
  -webkit-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  transform: translateY(-30%);
  }
.congratulations .cracker{
  position:absolute;
   z-index:0;
  }
.congratulations .cracker_a{
  top:20%;
  left:-5%;
  }
.congratulations .cracker_b{
   top:20%;
  right:-5%;
  }
.congratulations .cake,
.congratulations h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  z-index:1;
  }
.glasses{
  margin-top:30%;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  display:table;
  }
.glasses .glass img{
  width:100%;
  height:auto;
  }
 .glasses .glass{
   display:table-cell;
  } 
 .glasses .glass_a{
   width:55%;
   }
  .glasses .glass_b{
     width:45%;
}
 .glasses img.point_a{
   top:0;
    position:absolute;
    left:52%;
    width:10%;
}
p.arrow_down{
  position:absolute;
  bottom:5%;
  width:100%;
  text-align:center;
  z-index:100;
  }
p.arrow_down img{
   width:10%;
   margin-left:auto;
   margin-right:auto;
   display:block;
  }
 .ballon{
    position:absolute;
   }
.ballon_a{
    top:20%;
    right:20%;
    }
.ballon_b{
    top:15%;
    right:25%;
    }
.ballon_c{
    top:15%;
    right:15%;
    }
.stone p{
  text-align:center;
  }
.glicon{
     margin-top:10%;
    position:relative;
    margin-bottom:2em;
     }
 .glicon .bg{
   background-color:#d21923;
   overflow:hidden;
   width:100%;
   height:100%; 
   position:relative;
   padding-top:4em;
   }
 .glicon .bg:before{
    content:'';
  display:block;
  position:absolute;
  top: -90%;
    left: -90%;
   width:280%;
   height:280%;
   background-image:url(../images/intensive_line.png);
   background-position:center center;
   background-repeat:no-repeat;
   background-size:cover;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    -ms-animation: spin 15s linear infinite;
    -o-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    z-index:0;
    }
.glicon p,
.glicon ul{
   text-align:center;
   width:90%;
   margin-left:auto;
   margin-right:auto;
   position:relative;
   z-index:1;
 }
 .glicon h3{
   position:absolute;
   width:100%;
    z-index:1;
    top:-2em;
   }
 .glicon h3 img{
    margin-left:auto;
   margin-right:auto;
   display:block;
   width:80%;
 }
 .glicon ul li{
   width:50%;
   display:inline-block;
   padding:2%;
   }
@media screen and (min-width: 320px) and (max-width: 767px){
.congratulations .cracker{
  width:40%;
  height:auto;
  }
.congratulations .cake{
  width:30%;
  }
.congratulations h2.font_a{
  width:50%;
  }
.congratulations h2.font_b{
  width:70%;
  }
 .glasses{
   }
}
@media screen and (min-width: 768px) and (max-width: 959px){
.congratulations .cake{
  width:20%;
  }
.congratulations h2.font_a{
  width:40%;
  }
.congratulations h2.font_b{
  width:60%;
  }
  }
@media screen and (min-width: 960px){ }