@charset "utf-8";
/* ------------------------------------------------------------ common */
#firstview { background: url(../images/common/bg_01.png) center top no-repeat; background-size: cover; }
#firstview h2  { padding: 108px 0 90px; padding: 108px 0 40px\9; text-align :center; font-size:62px; color:#fff; }
#firstview h2 span{ display: block; font-size: 24px;}

#ranking { background: url(../images/index/bg_002.gif) center top;  background-repeat: repeat; padding: 0 0 60px;}
#ranking .topPage { padding: 80px 0 0; }

.bg-pink1 { background: #69c4bb; }
.bg-pink2 { background: url(../images/ranking/bg_00.png) no-repeat center top #69c4bb; }
.contain { padding: 20px; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin-bottom: 20px; position: relative; }

h3.h3-outer { text-align: center; color: #fff; font-size: 26px; }
h4.h4-common span { display: block; font-size: 46px; line-height: 130%; color: #e47090; font-family: 'quicksandbold'; }

/* ------------------------------------------------------------ ranking */

#ranking-inner { padding: 0 0 85px; }
#ranking-inner .top-rank h3 { text-align: center; color: #fff; font-size: 26px; font-weight: bold; padding: 0 0 20px; }
#ranking-inner .top-rank h3 span { font-size: 18px; }
#ranking-inner .top-rank table { width: 100%; text-align: left; }
#ranking-inner .top-rank table tr { border-bottom: 1px solid #69c4bb; }
#ranking-inner .top-rank table th { background: #fff; width: 22.5%; padding: 25px 0 32px; font-weight: bold; font-size: 22px; }
#ranking-inner .top-rank table th img { vertical-align: bottom; }
#ranking-inner .top-rank table th.date { width: 10%; }
#ranking-inner .top-rank table td { background: #fff; font-size: 18px; padding: 20px 0 20px 10px; }
#ranking-inner .top-rank table td.date { text-align: center; padding: 20px 0; }
#ranking-inner .top-rank p { font-size: 18px; color: #fff; text-align: center; padding: 30px 0 10px; }
#ranking-inner .top-rank ul li { float: left; padding: 0 0 0 9px; }
#ranking-inner .top-rank ul li:first-child { padding: 0; }

#ranking-inner .contain .textlogo { margin: 32px 32px 12px; }
#ranking-inner .contain .textlogo p.txtdate { color: #fff; background: #000; font-size: 20px; display: inline-block; *display: inline; *zoom: 1; padding: 5px 15px; max-width: 456px; line-height: 120%; }
#ranking-inner .contain .textlogo img { display: block; margin: 15px 0 10px; }
#ranking-inner .contain img.panda { position: absolute; top: 5px; right: 200px; z-index: 0; }
#ranking-inner .contain .other-rank { background: #fff; -moz-border-radius: 20px; -webkit-border-radius: 20px; padding: 32px; z-index: 1; position: relative; margin-top: 20px; text-align: center; }
#ranking-inner .contain .other-rank h3 { font-weight: bold; font-size: 26px; padding: 10px 0 25px; }
#ranking-inner .contain .other-rank h3 span { font-size: 40px; display: block; font-weight: normal; line-height: 120%; font-family: 'quicksandbold'; }
#ranking-inner .contain .other-rank p.text { font-size: 16px; padding: 0 0 35px; }
#ranking-inner .contain .other-rank p.notice { font-size: 20px; padding: 20px 0; font-weight: bold; margin-bottom: 60px; }
#ranking-inner .contain .other-rank p.tblhead { font-size: 18px; font-weight: bold; color: #fff; padding: 8px 0; margin-bottom: 1px; }
#ranking-inner .contain .other-rank dl {  margin-bottom: 20px; }
#ranking-inner .contain .other-rank dl dt { float: left; text-align: center; color: #fff; font-weight: bold; font-size: 18px; padding: 23px 48px; }
#ranking-inner .contain .other-rank dl dd { font-weight: bold; font-size: 20px; padding: 20px 20px 20px 266px; }
#ranking-inner .contain .other-rank table { width: 100%; }
#ranking-inner .contain .other-rank table tr.firsttr { border-bottom: 3px solid #fff; }
#ranking-inner .contain .other-rank table tr { border-bottom: 2px solid #fff; }
#ranking-inner .contain .other-rank table tr.star { color: #e40000; }
#ranking-inner .contain .other-rank table tr.star td { background: #ffffe1; }
#ranking-inner .contain .other-rank table tr.star td:first-child { background: url(../images/ranking/star_01.png) no-repeat 22px center #ffffe1; }
#ranking-inner .contain .other-rank table th { color: #fff; font-size: 18px; padding: 10px 0; } 
#ranking-inner .contain .other-rank table td { font-size: 20px; background: #eeeeee; padding: 8px 0; }
#ranking-inner .contain .other-rank table.style-00 th { width: 25%; }
#ranking-inner .contain .other-rank table.style-01 th, 
#ranking-inner .contain .other-rank table.style-01 td { width: 16.6%; }
#ranking-inner .contain .other-rank table.style-02 tr { background: #e7fdff; }
#ranking-inner .contain .other-rank table.style-02 tr:first-child { background: #ffeef3; }
#ranking-inner .contain .other-rank table.style-02 th { color: #000; text-align: left; width: 38%; padding: 10px 1%; } 
#ranking-inner .contain .other-rank table.style-02 td { background: none; width: 30%; text-align: left; font-weight: bold; }
#ranking-inner .contain .other-rank table.style-02 td.namerank { width: 28%; padding: 0 2% 0 0; }

#ranking-inner .contain .other-rank .last-rating { padding: 40px 0 70px; background: #f5fde9; }
#ranking-inner .contain .other-rank .last-rating ol { width: 610px; margin: 0 auto; text-align: left; }
#ranking-inner .contain .other-rank .last-rating ol.shortlist { width: 345px; }
#ranking-inner .contain .other-rank .last-rating ol li { font-size: 20px; list-style: none; font-weight: bold; padding: 4px 0; }
#ranking-inner .contain .other-rank .last-rating ol li span { font-weight: bold; display: inline-block; *display: inline; *zoom: 1; }
#ranking-inner .contain .other-rank .last-rating ol li span.name { width: 234px; }
#ranking-inner .contain .other-rank .last-rating ol li span.arrows {  padding: 0 40px 0 0; line-height: 32px; height: 30px; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-0 { background: url(../images/ranking/arw-0.png) no-repeat right top; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-1 { background: url(../images/ranking/arw-1.png) no-repeat right top; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-2 { background: url(../images/ranking/arw-2.png) no-repeat right top; }
#ranking-inner .contain .other-rank .last-rating ol li span.r1800 { color: #1661aa; }
#ranking-inner .contain .other-rank .last-rating ol li span.r1700 { color: #1E90FF; }
#ranking-inner .contain .other-rank .last-rating ol li span.r1600 { color: #3CB371; }
#ranking-inner .contain .other-rank .last-rating p.smalltext { font-size: 18px; padding: 35px 0 30px; }
#ranking-inner .contain .other-rank .last-rating p.bigtext { font-size: 18px; font-weight: bold; }
#ranking-inner .contain .other-rank .last-rating p.bigtext span { color: #e40000; font-weight: bold; }
#ranking-inner .contain .other-rank .last-rating p.btn-confirm { padding: 40px 0 0; }
#ranking-inner .contain .other-rank .last-rating p.btn-confirm a {  background: url(../images/ranking/btn.png) no-repeat 98% center #fff; line-height: 62px; height: 62px; padding: 0 65px 0 55px; font-size: 18px;
	display: inline-block; *display: inline; *zoom: 1;
}

/* ------------------------------------------------------------ colors */

#ranking-inner .contain .finger h3  span { color: #89ced3; }
#ranking-inner .contain .finger dl { border: 3px solid #89ced3;  }
#ranking-inner .contain .finger dl dt { background: url(../images/ranking/bg_01.jpg) repeat #89ced3; }
#ranking-inner .contain .finger table tr:first-child { background: url(../images/ranking/bg_01.jpg) repeat #89ced3; }
#ranking-inner .contain .finger table tr.topplayer td { background: #dae9ea; }

#ranking-inner .contain .finger table tr td.badge-0 { background: url(../images/ranking/icn_09.png) no-repeat 10% center #dae9ea; }
#ranking-inner .contain .finger table tr td.badge-1 { background: url(../images/ranking/icn_10.png) no-repeat 10% center #eeeeee; }

#ranking-inner .contain .winning h3 span { color: #fc8510; }
#ranking-inner .contain .winning p.notice { border: 3px solid #fc8510; }
#ranking-inner .contain .winning p.tblhead { background: url(../images/ranking/bg_02.jpg) repeat #fc8510; } 
#ranking-inner .contain .winning table tr:first-child { background: url(../images/ranking/bg_02.jpg) repeat #fc8510; }
#ranking-inner .contain .winning table tr.topplayer td { background: #fee8d2; }
#ranking-inner .contain .winning table tr td.badge { background: url(../images/ranking/icn_11.png) no-repeat 6% center #fee8d2; }

#ranking-inner .contain .defence h3 span { color: #b98dea; }
#ranking-inner .contain .defence p.notice { border: 3px solid #b98dea; }
#ranking-inner .contain .defence p.tblhead { background: url(../images/ranking/bg_03.jpg) repeat #b98dea; } 
#ranking-inner .contain .defence table tr:first-child { background: url(../images/ranking/bg_03.jpg) repeat #b98dea; }
#ranking-inner .contain .defence table tr.topplayer td { background: #dfcbf6; }
#ranking-inner .contain .defence table tr td.badge { background: url(../images/ranking/icn_12.png) no-repeat 6% center #dfcbf6; }

#ranking-inner .contain .rating h3 span { color: #b0d679; }
#ranking-inner .contain .rating p.notice { border: 3px solid #b0d679; }
#ranking-inner .contain .rating h4 { background: url(../images/ranking/bg_04.jpg) repeat #b0d679; color: #fff; padding: 30px 0; font-size: 20px; font-weight: bold; }

/* ------------------------------------------------------------ year months nav */

#ranking-inner .years { padding: 0 0 30px;  }
#ranking-inner .years ul { background: #fff; padding: 10px 46px; }
#ranking-inner .years ul li { float: left; padding: 10px 0; }
#ranking-inner .years ul li a,
#ranking-inner .years ul li span { display: block; width: 111px; border-right: 1px solid #000; line-height: 100%; text-align: center; font-size: 18px; font-weight: bold; }
#ranking-inner .years ul li span { color: #e47090; }
#ranking-inner .years .thisyear { margin-top: 30px; background: #fff; padding: 35px 0 40px; text-align: center; }
#ranking-inner .years .thisyear h3 { font-size: 30px; font-weight: bold; padding: 0 0 30px; }
#ranking-inner .years .thisyear p { background: #f2dfe4; padding: 12px 0; max-width: 830px; margin: 0 auto; }
#ranking-inner .years .thisyear p a,
#ranking-inner .years .thisyear p span { line-height: 100%; padding: 0 8px; border-left: 1px solid #000; font-size: 20px; display: inline-block; *display: inline; *zoom: 1; }
#ranking-inner .years .thisyear p a { font-weight: bold; }
#ranking-inner .years .thisyear p a:first-child,
#ranking-inner .years .thisyear p span:first-child { border: none; }

#ranking-inner .contain .rating .month-nav { width: 467px; margin: 0 auto; padding: 40px 0; }
#ranking-inner .contain .rating .month-nav p.prev { float: left;  }
#ranking-inner .contain .rating .month-nav p.next { float: right; }
#ranking-inner .contain .rating .month-nav p a { width: 212px; height: 50px; line-height: 50px; background: #000; color: #fff; font-size: 18px; display: inline-block; *display: inline; *zoom: 1; }

/* ------------------------------------------------------------ gradebook */

#gradebook { background: #fff; text-align: center; padding: 65px 0 110px; }
#gradebook ul li { margin: 70px 17px; display: inline-block; *display: inline; *zoom: 1; }
#gradebook ul li p { padding: 20px 0 0; font-size: 16px; font-weight: bold; }
#gradebook p.adobe { padding: 55px 0 0; } 
#gradebook p.adobe img { vertical-align: top; }
#gradebook p.adobe span { display: inline-block; *display: inline; *zoom: 1; text-align: left; padding: 0 0 0 20px; }

/* ------------------------------------------------------------ ranking system */

#rank-sys { padding: 75px 0; background: #f6f4e7; text-align: center; }
#rank-sys p.text { font-size: 16px; padding: 35px 0 40px; }
#rank-sys .rank-nav { margin-left: -20px; padding: 0 0 25px; }
#rank-sys .rank-nav li { float: left; width: 260px; margin: 0 0 0 20px;  background: #fff; font-size: 24px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;  }
#rank-sys .rank-nav li a { font-weight: bold; display: block; padding: 35px 0; }
#rank-sys .rankinfo { background: #fff; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; overflow: hidden; margin-bottom: 15px; }
#rank-sys .rankinfo h4 { color: #fff; padding: 12px 0; font-size: 20px; font-weight: bold; }
#rank-sys .rankinfo .detail { padding: 30px 45px 30px 45px; position: relative; text-align: left; 
	font-family:"ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
}
#rank-sys .rankinfo .detail .left { float: left; width: 500px; }
#rank-sys .rankinfo .detail .right { float: right; width: 460px; text-align: center; }
#rank-sys .rankinfo div ul { padding: 0 0 25px; }
#rank-sys .rankinfo div ul li { font-weight: bold; padding: 4px 0; }
#rank-sys .rankinfo div .left p { font-size: 20px; font-weight: bold; padding: 10px 0 0; }
#rank-sys .rankinfo div .right h5 { color: #fff; font-size: 16px; font-weight: bold; padding: 5px 0; }
#rank-sys .rankinfo div .right p { padding: 17px 0; font-size: 18px; font-weight: bold; }

#rank-sys #king { border: 3px solid #89ced3; }
#rank-sys #king h4 { background: url(../images/ranking/bg_01.jpg) repeat #89ced3; }
#rank-sys #king .left h5 { font-weight: bold; font-size: 17px; padding: 0 0 10px; }
#rank-sys #king .left p.point { font-size: 13px; font-weight: bold; padding: 0; }
#rank-sys #king .right h5 { background: #89ced3; }
#rank-sys #king .right p { background: #eef6f7; }

#rank-sys #master { border: 3px solid #f8a350; }
#rank-sys #master h4 { background: url(../images/ranking/bg_02.jpg) repeat #f8a350; }
#rank-sys #master .right h5 { background: #f8a350; }
#rank-sys #master .right p { background: #fff7f0; }

#rank-sys #paladin { border: 3px solid #b98dea; }
#rank-sys #paladin h4 { background: url(../images/ranking/bg_03.jpg) repeat #b98dea; }
#rank-sys #paladin .right h5 { background: #b98dea; }
#rank-sys #paladin .right p { background: #f3e9fd; }

#rank-sys #rating { border: 3px solid #b0d679; }
#rank-sys #rating h4 { background: url(../images/ranking/bg_04.jpg) repeat #b0d679; }
#rank-sys #rating p.d_text { font-size: 20px; font-weight: bold; }

/* ------------------------------------------------------------ hint */

#hint { background: #fff; text-align: center; padding: 100px 0 25px; }
#hint p.text { padding: 30px 0 40px; font-size: 16px; }
#hint ul { margin-left: -20px; }
#hint ul li { float: left; background: #f6f4e7; width: 540px; margin: 0 0 20px 20px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; overflow: hidden; }
#hint ul li h4 { padding: 15px 0; font-size: 24px; font-weight: bold; color: #fff; }
#hint ul li p { padding: 30px 0 40px; font-size: 16px; height: 80px; overflow: hidden; }

#hint ul li.king h4 { background: url(../images/ranking/bg_01.jpg) repeat #89ced3; }
#hint ul li.master h4 { background: url(../images/ranking/bg_02.jpg) repeat #f8a350; } 
#hint ul li.paladin h4 { background: url(../images/ranking/bg_03.jpg) repeat #b98dea; } 
#hint ul li.rating h4 { background: url(../images/ranking/bg_04.jpg) repeat #b0d679; }

/* ------------------------------------------------------------ past-ranking */

#past-ranking { background: url(../images/information/bg_01.gif) repeat center center; padding: 60px 0 40px; text-align: center; }
#past-ranking h4.h4-common { color: #fff; padding: 0 0 50px; }
#past-ranking h4.h4-common span { color: #fff; }
#past-ranking .calendar { padding: 35px 50px 65px; background: #fff; margin-bottom: 25px;  border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
#past-ranking .calendar h5 { font-size: 30px; font-weight: bold; padding: 0 0 40px; }
#past-ranking .calendar dl dt { float: left; color: #fff; font-size: 20px; font-weight: bold; padding: 10px 45px; }
#past-ranking .calendar dl dd { font-size: 20px; font-weight: bold; padding: 0 0 0 165px; height: 54px; line-height: 54px; } 
#past-ranking .calendar dl dd a:first-child { border: none; }
#past-ranking .calendar dl dd a {border-left: 1px solid #000; padding: 0 10px; font-weight: bold; line-height: inherit;
}
#past-ranking .calendar dl dd { margin-bottom: 9px; }

#past-ranking .calendar dl.p_rank dt { background: #69c4bb; }
#past-ranking .calendar dl.p_rank dd { background: #e3f4f3; }
#past-ranking .calendar dl.p_pdf dt { background: #434343; }
#past-ranking .calendar dl.p_pdf dd { background: #eeeeee; }

.preparation { padding: 60px 0; }

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */

#firstview { background: url(../images/common/bg_02.png) center top no-repeat; background-size: 150% auto;}
#firstview h2 { padding: 50px 0 40px; text-align :center; font-size: 30px; color:#fff; }
#firstview h2 span{ display: block; font-size: 18px;}


.contain { padding: 15px 3%; text-align: center; border-radius: 0px; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px;
margin-bottom: 0px;}
h4.h4-common span { font-size: 30px; }
h3.h3-outer { font-size: 20px; padding: 10px 0 0; }

/* ------------------------------------------------------------ */

#ranking { padding: 0 ;}

#ranking-inner { padding: 5px 0 0; width: 100%;}
#ranking-inner .top-rank { padding: 20px 0 0; }
#ranking-inner .top-rank h3 { font-size: 18px; }
#ranking-inner .top-rank h3 span { font-size: 14px; }
#ranking-inner .top-rank table th img { width: 32px; height: auto; }
#ranking-inner .top-rank table th { font-size: 12px; text-align: center; padding: 10px 0; }
#ranking-inner .top-rank table td { font-size: 14px; padding: 10px 5px; }
#ranking-inner .top-rank table td.date { padding: 0 4px; }

#ranking-inner .top-rank p { font-size: 16px; padding: 30px 0 10px; }
#ranking-inner .top-rank ul li { float: none; padding: 0 0 10px; }
#ranking-inner .top-rank ul li:first-child { padding: 0 0 10px; }
#ranking-inner .top-rank ul li img { width: 100%; height: auto; }

#ranking-inner .contain .textlogo { margin: 20px auto 0; width: 90%; height: auto; }
#ranking-inner .contain .textlogo p { font-size: 12px; text-align: left; }
#ranking-inner .contain .textlogo p.txtdate { font-size: 16px; text-align: center; line-height: 120%;}
#ranking-inner .contain .textlogo img { width: 100%; height: auto; margin: 8px 0; }
#ranking-inner .contain .other-rank { padding: 20px 3%; }
#ranking-inner .contain .other-rank h3 span { font-size: 28px; }
#ranking-inner .contain .other-rank h3 { font-size: 18px; }
#ranking-inner .contain .other-rank p.text { font-size: 14px; padding: 0 0 20px; }
#ranking-inner .contain .other-rank p.notice { font-size: 14px; margin-bottom: 30px; padding: 20px 3%; text-align: left; }
#ranking-inner .contain .other-rank p.tblhead { font-size: 16px; padding: 8px 3%; }
#ranking-inner .contain .other-rank dl dt { float: none; padding: 10px; font-size: 16px; }
#ranking-inner .contain .other-rank dl dd { padding: 10px 6%; text-align: left; font-size: 16px; }
#ranking-inner .contain .other-rank table th { font-size: 14px; }
#ranking-inner .contain .other-rank table td { font-size: 14px; }
#ranking-inner .contain .other-rank table tr.star td:first-child { background: url(../images/ranking/star_01_sp.png) no-repeat center 5px #ffffe1; background-size: 24px 24px; }
#ranking-inner .contain .other-rank table.style-00 th:first-child { width: 10%; }
#ranking-inner .contain .other-rank table.style-00 th { width: 22.5%; line-height: 120%; padding: 15px 0; }
#ranking-inner .contain .other-rank table.style-00 td.badge { text-align: center; }
#ranking-inner .contain .other-rank table.style-00 td.badge img { margin: 0; }
#ranking-inner .contain .other-rank table.style-01 tr.firsttr th { font-size: 12px;}
#ranking-inner .contain .other-rank table.style-01 th { width: 18%; line-height: 120%; padding: 12px 0; }
#ranking-inner .contain .other-rank table.style-01 th.width { width: 9%; }
#ranking-inner .contain .other-rank table.style-01 th.width01 { width: 19%;}
#ranking-inner .contain .other-rank table.style-01 td { font-size: 13px; text-align: center; width: auto;}
#ranking-inner .contain .other-rank table.style-02 th { width: 30%; }
#ranking-inner .contain .other-rank table.style-02 th img { width: 100%; height: auto; }
#ranking-inner .contain .other-rank table.style-02 td.namerank { width: 50%; }
#ranking-inner .contain .other-rank table.style-02 td { width: 20px; }

#ranking-inner .contain .rating h4 { padding: 20px 3%; font-size: 16px; }
#ranking-inner .contain .other-rank .last-rating { padding: 30px 3%; }
#ranking-inner .contain .other-rank .last-rating ol { width: 100%; max-width: 270px; }
#ranking-inner .contain .other-rank .last-rating ol li { font-size: 15px; padding: 8px 0; }
#ranking-inner .contain .other-rank .last-rating ol li span.name { width: 100%; display: block; }
#ranking-inner .contain .other-rank .last-rating ol li span.arrows { padding: 0 20px 0 0; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-0 { background: url(../images/ranking/arw-0.png) no-repeat right center; background-size: 16px auto; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-1 { background: url(../images/ranking/arw-1.png) no-repeat right center; background-size: 16px auto; }
#ranking-inner .contain .other-rank .last-rating ol li span.arw-2 { background: url(../images/ranking/arw-2.png) no-repeat right center; background-size: 16px auto; }
#ranking-inner .contain .other-rank .last-rating p.smalltext { font-size: 14px; }
#ranking-inner .contain .other-rank .last-rating p.bigtext { font-size: 16px; text-align: left; }
#ranking-inner .contain .other-rank .last-rating p.btn-confirm a { line-height: 120%; height: auto; padding: 30px 14%; font-size: 14px; }
#ranking-inner .contain .rating .month-nav { width: 100%; }
#ranking-inner .contain .rating .month-nav p { width: 40%; }
#ranking-inner .contain .rating .month-nav p a { width: 100%; font-size: 14px; height: 40px; line-height: 40px; }


#ranking-inner .contain .finger table tr td.badge-0 { background: url(../images/ranking/icn_05.png) no-repeat center top #dae9ea; background-size: 68px auto; padding: 40px 0 0; }
#ranking-inner .contain .finger table tr td.badge-1 { background: url(../images/ranking/icn_06.png) no-repeat center top #eeeeee; background-size: 68px auto; padding: 40px 0 0; }

#ranking-inner .contain .winning table tr td.badge { background: url(../images/ranking/icn_08.png) no-repeat center 2px #fee8d2; background-size: 68px auto; padding: 40px 0 0; }

#ranking-inner .contain .defence table tr td.badge { background: url(../images/ranking/icn_07.png) no-repeat center 2px #dfcbf6; background-size: 68px auto; padding: 40px 0 0; }


/* ------------------------------------------------------------ year months nav */

#ranking-inner .years ul { padding: 0; border-top: 1px solid #000; border-left: 1px solid #000; background: none; }
#ranking-inner .years ul li { width: 25%; padding: 0; background: #fff; }
#ranking-inner .years ul li a,
#ranking-inner .years ul li span { padding: 10px 0; font-size: 14px; width: auto; border-right: 1px solid #000; border-bottom: 1px solid #000; }
#ranking-inner .years .thisyear { padding: 20px 0 0; }
#ranking-inner .years .thisyear h3 { font-size: 20px; padding: 0 0 10px; }
#ranking-inner .years .thisyear p a { font-size: 16px; margin: 5px 0;  }

/* ------------------------------------------------------------ gradebook */

#gradebook { padding: 40px 0 30px; }
#gradebook ul { padding: 30px 3% 0; }
#gradebook ul li { display: block;  margin: 20px 0; }
#gradebook ul li img { width: 100%; height: auto; }
#gradebook ul li a p img { width: 15px; height: auto; }
#gradebook p.adobe { padding: 40px 0 0; }
#gradebook p.adobe img { width: 84px; height: auto; }
#gradebook p.adobe span { padding: 20px 0; }
#gradebook .bnr { padding: 30px 0 0; }
#gradebook .bnr img { width: 100%; height: auto; }
/* ------------------------------------------------------------ ranking system */

#rank-sys { padding: 40px 0; }
#rank-sys p.text { font-size: 14px; text-align: left; padding: 20px 0; }
#rank-sys .rank-nav { margin-left: -2%; }
#rank-sys .rank-nav li { width: 48%; margin: 0 0 2% 2%; font-size: 14px; }
#rank-sys .rank-nav li a { padding: 15px 0; }
#rank-sys .rankinfo h4 { font-size: 16px; }
#rank-sys .rankinfo .detail { padding: 20px 6%; }
#rank-sys .rankinfo .detail .left { float: none; width: 100%; padding: 0 0 20px; }
#rank-sys .rankinfo .detail .right { float: none; width: 100%; }
#rank-sys .rankinfo div .right h5 { font-size: 14px; }
#rank-sys .rankinfo div .right p { font-size: 16px; padding: 12px 3%; }
#rank-sys .rankinfo div .left p { font-size: 16px; }
#rank-sys #rating p.d_text { font-size: 16px; }

/* ------------------------------------------------------------ hint */

#hint { padding: 50px 0 20px; }
#hint p.text { font-size: 14px; padding: 20px 3% 30px; text-align: left; }
#hint ul { margin: 0; }
#hint ul li { float: none; width: 100%; margin: 0 0 15px 0; }
#hint ul li h4 { padding: 12px 0; font-size: 18px; }
#hint ul li p { font-size: 14px; padding: 20px 6% 40px; height: auto; }
#hint ul li p span { display: inline-block; *display: inline; *zoom: 1; }
#hint ul li.paladin p,
#hint ul li.rating p { text-align: left; }

/* ------------------------------------------------------------ past ranking */

#past-ranking { padding: 40px 0; }
#past-ranking h4.h4-common { padding: 0 0 30px; }
#past-ranking .calendar { padding: 30px 3%; }
#past-ranking .calendar h5 { font-size: 20px; padding: 0 0 30px; }
#past-ranking .calendar dl dt { float: none; font-size: 16px; padding: 6px 0; }
#past-ranking .calendar dl dd { padding: 10px 3%; text-align: left; height: inherit; line-height: 30px; }

#past-ranking .calendar dl dd a { display: block; float: left; padding: 0; margin: 5px 0; width: 24%; text-align: center; font-size: 16px; border: none; }
#past-ranking .bnr img { width: 100%; height: auto; }

}