@charset "UTF-8";
/* CSS Document */

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #E9385B;}
a:visited { color: #E9385B;}
a:hover { color: #069;}
a:active { color: #09C;}

body{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color: #000; font-size: 15px; color: #FFF; background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}
.clearfix{ clear:both;}

#wrapper{ width:100%; max-width:1000px; margin:0 auto; border-left:solid 1px #2e2521; border-right:solid 1px #2e2521; background-image:url(../img/bg_black.png);}
#header{ position:relative; background-image:url(../img/header.jpg); height:276px; background-position:center top;}
#header #logo{ margin:0 auto; text-align:center; width:100%; max-width:380px; padding-top:75px;}
#header #sns{ position: absolute; right: 15px; top: 10px;}
#header #sns img{ margin-left:5px;}
#header #top_yoyaku{ position: absolute; bottom: 23px; right:18px;}
#header #top_yoyaku img{ width:160px;}
#header #finish{ text-align:center; width:100%; position:absolute; top:300px;}

#contents{ text-align:center; }
#contents #catch img{ width:100%;}
#contents h2{ font-weight:bold; color:#F00; font-size:26px; margin-top:40px; margin-bottom:30px;}
#contents p{ line-height:170%;}
#contents h3{ font-weight:bold; font-size:38px; color:#E6C46B; line-height:130%; padding-top:40px; padding-bottom:20px;}
#contents h3 span{ color:#D90418;}
#contents #btn{ padding:30px 0 50px;}

#rankframe{	width: 98%;	max-width: 937px; margin: 0 auto; border: solid 1px #E8CD72; color: #000; position:relative; height:100%;}
#rankframe table{ width:100%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; border-top:solid 1px #000000;}
#rankframe th{ width:40%; border-bottom:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; padding:30px 0; }
#rankframe th .rankname span{ position:absolute; margin-left:-95px; margin-top:95px;}
#rankframe th .rankname{ display:block; height:76px; position:relative;}
#rankframe td .clearname{ position: absolute; left: -30px; top: 15px;}
#rankframe td{ width:60%; border-bottom:solid 1px #000000; border-right: solid 1px #000000; line-height:150%; text-align:left; padding-left:20px; padding-right:10px; position:relative;}
#rankframe td .tokuten{ position:absolute; right:20px; top:3px;}
#rankframe .gray1{ background-image:url(../img/frame_gray.jpg);}
#rankframe .gray11{ background-image:url(../img/frame_gray.jpg); background-position:right;}
#rankframe .gray2{ background-image:url(../img/frame_gray2.jpg);}
#rankframe .gray22{ background-image:url(../img/frame_gray2.jpg); background-position:right;}
#rankframe .gold1{ background-image:url(../img/frame_gold.jpg);}
#rankframe .gold11{ background-image:url(../img/frame_gold.jpg); background-position:right;}
#rankframe .gold2{ background-image:url(../img/frame_gold2.jpg);}
#rankframe .gold22{ background-image:url(../img/frame_gold2.jpg); background-position:right;}

#rankframe #bar{ position:absolute; top:5px; left:15px; height:97%; background-color:#000; width:10px; border:solid 2px #E8CD72; background-image:url(../img/ber_gray.jpg);}
#rankframe #bar #red{ width: 100%; background-color: #DA0418; height: 93%; position: relative;}
#rankframe #bar #red span{ position:absolute; bottom:-20px; left:-16px;}
#rankframe #bar #now { position: relative; background: #fff; border: 1px solid #000; margin: -10px 0 0 20px; padding: 3px; border-radius: 15px; margin-right: 20%; clear: both; min-width: 80px; float: left; z-index:1000; font-size:12px;	line-height:135%; font-weight:bold;}
#rankframe #bar #now span{ color:#F00;}
#rankframe #bar #now:after,
#rankframe #bar #now:before {right: 100%;top: 50%;border: solid transparent; content: " "; height: 0; width: 0; position: absolute;pointer-events: none;}
#rankframe #bar #now:after { border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 7px; margin-top: -7px;}
#rankframe #bar #now:before { border-color: rgba(0, 0, 0, 0); border-right-color: #000; border-width: 8px; margin-top: -8px;}

#contents .get_tokuten{ max-width:937px; width:100%; border:solid 1px #E8CD72; background-image:url(../img/bg_get_tokuten.jpg); margin:0 auto 25px;}
#contents .get_tokuten h3{ font-weight:bold; font-size:30px; color:#E6C46B; line-height:130%; padding-top:20px; padding-bottom:5px; text-shadow: 2px 2px 2px #000000;}
#contents .get_tokuten h3 span{ color:#D90418;}
#contents .get_tokuten p{ font-size:30px; color:#FFF; padding-bottom:10px; line-height:140%;}

.hidepc{ display:none;}
.notice{ width:94%; margin:10px auto 0; text-align:left; color:#999; font-size:12px; line-height:150%;}

#footer{ padding-bottom:40px;}
#footer #copy{ text-align:center; font-size:12px; line-height:400%;}
#footer #copy a{ color:#FFF; text-decoration:none;}
#footer #copy a:hover{ color:#F00; text-decoration:underline;}
#footer #sns{ border-top:solid 1px #333333; text-align:center; padding:30px 0 10px;}
#footer #sns img{ margin:0 8px;}

#pagetop { bottom: 50px; right: 25px; position: fixed; z-index: 500;display:none;}
#rankframe td .itemname{ display:none;}

@media screen and (max-width: 794px) {
#rankframe td .tokuten{ display:none;}
#rankframe td .itemname{ display:block;}
}

@media screen and (min-width: 641px) {
#header2{ display:none;}
}

@media screen and (max-width: 640px) {
#header{ display:none;}
#header2{ position:relative; }
#header2 img{ width:100%; }
#header2 #finish{ position:absolute; z-index:1000; width:100%; text-align:center; top:300px;}
#contents #catch{ display:none;}
#contents h2{ font-weight:bold; color:#F00; font-size:22px; margin:40px auto 30px; width:90%;}
#contents h3{ font-weight:bold; font-size:22px; color:#E6C46B; line-height:130%; padding-top:40px; padding-bottom:20px;}
#contents p{ line-height:170%; width:92%; margin:0 auto;}
.hidesp{ display:none;}
.rankname img.lankname{ width:70%;}
#rankframe td .clearname img{ width:95%; margin-top: 5px;}
#contents .get_tokuten h3{ font-weight:bold; font-size:22px; color:#E6C46B; line-height:130%; padding-top:20px; padding-bottom:5px; text-shadow: 2px 2px 2px #000000;}
}