/* ==========CSS Reset Style========== */
html, body, div, iframe,
header, nav, footer, section, article, aside, canvas,
h1, h2, h3, h4, h5, h6, p, span, pre, 
a, img, strong, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend,button, 
table, tbody, tfoot, tr, th, td, figure { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

img {vertical-align: bottom;}

ol, ul {list-style-type: none;}

hr {border: none; margin: 0; border-top: 1px solid #ccc;}

table {border-collapse: collapse; border-spacing: 0;}

body {
	text-align: center;
	background: linear-gradient(-45deg, #70CCFF, #36f5ff);
}

h1 {
	margin: 20px 0;
	font-size: 60px;
}

.character {
	background: url(../bg.png) 0 0 no-repeat;
	position: fixed;
	bottom: 0;
	background-size: 4500px  252px;
	width: 250px;
	height: 252px;
	overflow: hidden;
  /* アニメーション */
  animation: sprite1 1.5s steps(17, start) infinite;
}

@keyframes sprite1 {
  0%   {background-position: 0 0;}
  100% {background-position: -4250px 0;}
}


#branding {
  padding: 0 20px;
}

#branding img {
  text-align: center;
  width: 100%;
  max-width: 400px;
  height: auto;
}