body {
    width: 100%;
    margin: 0;
}
p {
    display: block;
    text-align: center;
}
p font {
    font-weight: bold;
}
h2 {
    position: relative;
    padding: 1em 1em 1em 1.3em;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
    border: 1px solid #039BE5;
    color: #039BE5;
}
h2::before {
    position: absolute;
    top: .5em;
    left: .5em;
    content: '';
    width: 5px;
    height: -webkit-calc(100% - 1em);
    height: calc(100% - 1em);
    background-color: #039BE5;
}
.content {
    width:600px;
    margin: auto;
    text-align-last: center;
}
.content img {
    width: 100%;
    height: auto;
}
footer{
    width: 100%;
    margin: auto;
    padding: 1rem 0;
    background-color: #3a80b1;
    color: #fff;
}
footer ul {
    max-width: 760px;
    flex-basis: 760px;
    margin: auto;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
}
footer ul li {
    padding: 0 10px;
    text-align: left;
}

footer ul li a {
    text-decoration: none;
    color: #fff;
}
footer ul li.copyright {
    margin-left: auto;
    text-align: center;
}
@media screen and (max-width: 768px){
    footer ul {
        flex-wrap: wrap;
        padding: 0 1rem;
    }
    footer ul li {
        flex-basis: 50%;
        padding: 0;
    }
    footer ul li.copyright {
        margin: 1rem auto 0 auto;
        flex-basis: 100%;
        text-align: center
    }
}
@media screen and (max-width: 599px){
    .content {
        width: 100%;
    }
}


span.tenmetsu {
	animation: blink 0.7s infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

span.tenmetsu-y {
	animation: blinky 0.7s infinite alternate;
}
@-webkit-keyframes blinky{
	0%{color: #fff;}
	50%{color: #fff;}
	100% {color: #ffff00;}
}
@-moz-keyframes blinky {
	0%{color: #fff;}
	50%{color: #fff;}
	100% {color: #ffff00;}
}
@keyframes blinky {
	0%{color: #fff;}
	50%{color: #fff;}
	100% {color: #ffff00;}
}

div.kirari {
	position: relative;
	overflow: hidden;
}
div.kirari::after {
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #FFF;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflect 2.5s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflect 2.5s ease-in-out infinite;
}
@keyframes reflect {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

span.makerhiku {
	background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 200% .8em; 
	background-position: 100% .5em;
	transition: 2s;
}

span.makerhiku.is-active {
	background-position: 0% .5em;
}

.purupuru {
	animation: purupuru 2s linear infinite;
    -webkit-animation: purupuru 2s linear infinite;
    margin-bottom: 1.5rem;
  }
  
@keyframes purupuru {
	0% {transform: skew(0deg, 0deg);}
	5% {transform: skew(5deg, 4.2deg);}
	10% {transform: skew(-4deg, -3deg);}
	15% {transform: skew(3deg, 2.2deg);}
	20% {transform: skew(-2deg, -1.5deg);}
	25% {transform: skew(0.9deg, 0.9deg);}
	30% {transform: skew(-0.6deg, -0.6deg);}
	35% {transform: skew(0.3deg, 0.3deg);}
	40% {transform: skew(-0.2deg, -0.2deg);}
	45% {transform: skew(0.1deg, 0.1deg);}  
	50% {transform: skew(0deg, 0deg);}
}