@charset "utf-8";

/* ----------------------- */
/* original marquee */
/* ----------------------- */
#pitch_top {
position: relative;
background: url(./image/pitch_bk_top.jpg) no-repeat top center;
width: 640px;
height: 48px;
}

.CSSMarquee {
max-width: 600px;
padding:0;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: left;
}
.CSSMarquee p:after {
content: "";
white-space: nowrap;
}
.CSSMarquee p {
margin: 0;
padding-left: 100%;
display: inline-block;
white-space: nowrap;
-webkit-animation-name:marqueeRL;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marqueeRL;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marqueeRL;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marqueeRL;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marqueeRL;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
 
@-webkit-keyframes marqueeRL {
from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marqueeRL {
from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);}
}
@-ms-keyframes marqueeRL {
from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);}
}
@-o-keyframes marqueeRL {
from {-o-transform:translate(0);} to {-o-transform:translate(-100%);}
}
@keyframes marqueeRL {
from {transform:translate(0);} to {transform:translate(-100%);}
}

/* Google font */
.m-plus-rounded-1c-bold {
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
font-style: normal;
font-size:20px;
padding-top:20px;
color:#009fe8;
text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
-2px 2px 0 #FFF, 2px -2px 0 #FFF,
0px 2px 0 #FFF,  0-2px 0 #FFF,
-2px 0 0 #FFF, 2px 0 0 #FFF;
}

/* ----------------------- */
/* spangled banner */
/* ----------------------- */
#stars{
width: 460px;
height: 110px;
}

.fuwafuwa {
animation: fuwafuwa 3s ease-in-out infinite alternate;
background: url(./image/txt2.png) no-repeat center center;
display: inline-block;
transition: 1.5s ease-in-out;
width: 460px;
height: 110px;
margin-top: 80px;
}
@keyframes fuwafuwa {
0% {
transform:translate(0, 0) rotate(-2deg);
}
100% {
transform:translate(0, 0) rotate(2deg);
}
}

#pitch_bk {
position: relative;
background: url(./image/pitch_bk.jpg) no-repeat top center;
width: 640px;
height: 200px;
}
/*
.character {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
witdh: 100px;
height: 100px;
border-radius: 5px;
}
*/
img.glitter-star {
position: absolute;
height: 24px;
width: 24px;

/* アニメーションの設定 */
animation: glitter 4s linear 0s infinite normal;
-webkit-animation: glitter 2s linear 0s infinite normal;
-moz-animation: glitter 2s linear 0s infinite normal;
-ms-animation: glitter 2s linear 0s infinite normal;
-o-animation: glitter 2s linear 0s infinite normal;
}

/* 必要に応じてベンダープレフィックス（-moz-, -ms-, -o-）をつける */
@keyframes glitter {
0% {
-webkit-transform: scale(1.0);
opacity: 1;
}
25% {
-webkit-transform: scale(0.5);
opacity: 0;
}
50% {
-webkit-transform: scale(1.0);
opacity: 1;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: scale(1.0);
opacity: 1;
}
}