@charset "UTF-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
#copyright {
	font-size: 12px;
	width: 800px;
	margin: 10px auto;
	color:rgba(0,0,51,1);
	text-shadow:rgba(102,102,102,0.4) 2px 2px 5px;
	text-align:right;
}
ol, ul {
  list-style: none;
}


html, body {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: none;
	min-height: 700px;
	height: 100%;
	min-width: 560px;
	font-family:'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #303030;
	line-height:1.4em;
}

body {
	background-color:rgba(228,243,247,1);
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-attachment:fixed;
}

a{
	color:rgba(98,92,61,1);
	text-decoration: none;
}
#wrapper {
	width: 800px;
	position: relative;
	min-width: 850px;
	margin: 0 auto;
	background-color:rgba(255,255,255,1);
}
#header {
	width: 100%;
	position: relative;
	min-width: 850px;
	margin: 30px auto 30px auto;
 	text-align: center;
}
#header img{
	margin: 0 auto;
	width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

/*結果＝＝＝＝＝＝＝＝＝＝*/
.result{
	width:750px;
	padding: 20px;
	margin: 0 auto;
	border: solid 1px #ccc;
	border:5px solid rgba(33,132,133,0.8);
	border-radius:20px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
	clear: both;
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */
/*結果終*/
/*順位＝＝＝＝＝＝＝＝＝＝*/
.ranking{
	width:290px;
	float: left;
}
.result ul {
	font-size:20px;
	line-height:20px;
	list-style-type: none;
	margin: 20px 0;
}
.result li{
	height: 40px;
}
.item {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.rank9 {
  -webkit-animation: example 0.5s ease 2s 1 forwards;
  animation: example 0.5s ease 2s 1 forwards;
}

.rank8 {
  -webkit-animation: example 0.5s ease 4s 1 forwards;
  animation: example 0.5s ease 4s 1 forwards;
}

.rank7 {
  -webkit-animation: example 0.5s ease 6s 1 forwards;
  animation: example 0.5s ease 6s 1 forwards;
}

.rank6 {
  -webkit-animation: example 0.5s ease 8s 1 forwards;
  animation: example 0.5s ease 8s 1 forwards;
}

.rank5 {
  -webkit-animation: example 0.5s ease 10s 1 forwards;
  animation: example 0.5s ease 10s 1 forwards;
}

.rank4 {
  -webkit-animation: example 0.5s ease 12s 1 forwards;
  animation: example 0.5s ease 12s 1 forwards;
}

.rank3 {
  -webkit-animation: example 0.5s ease 16s 1 forwards;
  animation: example 0.5s ease 16s 1 forwards;
}

.rank2 {
  -webkit-animation: example 0.5s ease 22s 1 forwards;
  animation: example 0.5s ease 22s 1 forwards;
}

.rank1 {
  -webkit-animation: example 0.5s ease 28s 1 forwards;
  animation: example 0.5s ease 28s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
/*順位終*/
.vote{
	float: right;
	width:50px;
	text-align: right;
}


/*グラフ＝＝＝＝＝＝＝＝＝＝*/
.barchart {
/*	width: 420px;*/
	width: 460px;
	float: right;
}

[class*=date] {
  height: 20px;
  margin: 20px 0;
  background: #ccc;
  -moz-animation: anime1 3s 1 ease;
  -webkit-animation: anime1 3s 1 ease;
  animation: anime1 3s 1 ease;
}

.date1 {
	width:100%;
	background: #ff0604;
}
.date2{
	width:92%;
	background: #ff4b33;
}
.date3 {
	width:85%;
	background: #ff7b54;
}
.date4 {
	width:78%;
	background: #ffab76;
}
.date5 {
	width:64%;
	background: #ffcd8d;
}
.date6 {
	width:57%;
	background: #ffe9a0;
}
.date7 {
	width:50%;
	background: #fff4a8;
}
.date8 {
	width:42%;
	background: #fff1a6;
}
.date9 {
	width:35%;
	background: #fffcad;
}

@-webkit-keyframes anime1 {
  0% {
    width: 0px;
  }
}
@keyframes anime1 {
  0% {
    width: 0px;
  }
}

/*下位の結果＝＝＝＝＝＝＝＝＝＝*/
.Subordinate{
	width:750px;
	padding: 5px 0;
	margin: 0 auto;
	border-radius:10px;
}

.Subordinate .left{
	float: left;
	width:365px;
	border-right: dashed 4px rgba(33,132,133,0.8);
}
.Subordinate .right{
	float: right;
	width:365px;
	/*border-left: dashed 2px rgba(33,132,133,0.8);*/
}
.ranking_under{
	width:205px;
	float: left;
	font-size:14px;
	vertical-align:middle;
}
.ranking_under p{
	height: 30px;
	margin: 8px 0;
}
.ranking_under .small-font{
	font-size:11px;
}
.vote_under{
	float: left;
	width:40px;
	text-align: right;
	font-size:14px;
}
.vote_under p{
	height: 30px;
	margin: 8px 0;
}

.barchart_under {
	width: 100px;
	float: left;
}
[class*=date_under] {
  height: 5px;
  padding: 7px 0;
  margin: 9px 0 19px 0;
  background: #ccc;
  -moz-animation: anime1 3s 1 ease;
  -webkit-animation: anime1 3s 1 ease;
  animation: anime1 3s 1 ease;
}
.date_under10 {
	width:100%;
	background: #0663ff;
}
.date_under11{
	width:75%;
	background: #5192ff;
}
.date_under12 {
	width:50%;
	background: #aacaff;
}
.date_under13 {
	width:25%;
	background: #e7f0ff;
}

/*グラフ終*/

footer {
	display:block;
	width:100%;
	height:40px;
	background-color:rgba(185,118,86,0.4);
	text-align:left;
	position:fixed;
	bottom:0;
}

footer ul li a {
	padding:10px;
	width:100px;
	font-size:1em;
	color:rgba(255,255,255,1);
	padding-top:10px;
	float:left;
}
footer p {
	font-size:1em;
	color:rgba(255,255,255,1);
	padding-top:7px;
	padding-right:10px;
	float:right;
}

@media only screen and (max-device-width : 480px) {
/* スマートフォンだけ以下を適用 */

footer {
	display:block;
	width:100%;
	height:80px;
	background-color:rgba(185,118,86,0.4);
	text-align:left;
	position:fixed;
	bottom:0;
}
footer ul li a {
	padding:10px;
	width:20%;
	font-size:2em;
	color:rgba(255,255,255,1);
	padding-top:25px;
	float:left;
}
footer p {
	
	color:rgba(255,255,255,1);
	padding-top:7px;
	padding-right:10px;
	float:right;
}
}