@charset "utf-8";

body {
	margin: 0px;
	padding: 0px;
	color: #222;
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;
	line-height: 2;
	background: url(../images/bg.png);
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
em {font-style: normal;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
a:hover img {opacity: 0.6}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

a {
	color: #767164;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
a:hover {
	color: #d5ccb4;
}

i{
	margin-right:5px;
}

ul:after {
	content: "";
	clear: both;
	display: block;
}

#wrap{
	width:100%;
	overflow:hidden;
}


#container {
	width: 100%;
	margin: 0 auto;
}

header {
	text-align: center;
	padding: 0;
	background:#fff;
}

#logo  img {
	width: 100%;
	max-width: 1000px;
	margin:0 auto;
}




.contents_bottom{
	background:#111;
	padding:10px;
	text-align:center;
	color:#fff;
	font-size:1.4rem;
	border-radius:8px;
}

.contents_header{
	background:#fff;
	padding:0;
	margin:0;
	text-align:center;
	color:#fff;
}

.contents_header_inner{
	padding:40px 5%;
	width: 100%;
	max-width:1000px;
	position: relative;
	margin: 0 auto;
	box-sizing:border-box;
}

.contents_header_inner p{
	padding: 7px 20px 14px;
	text-align:left;
	color:#222;
}

#menubar {
	text-align: center;	
	margin-bottom: 3%;
}

#menubar li {
	display: inline;
}
#menubar li a {
	text-decoration: none;
	border: 2px solid transparent;
	padding: 10px 20px;
	color: #767164;
	font-size: 20px;
	letter-spacing: 0.2em;
}

#menubar li a:hover {
	border: 2px solid #767164;
	border-radius: 10px;	
}

#contents {
	border: 5px solid #767164;
	background: #fff;
	padding: 4%;
	overflow: hidden;
	margin:35px auto 0;
	width:90%;
	max-width:1000px;
}

#contents h2 {
	clear: both;
	margin-bottom: 15px;
	color: #fff;
	padding: 5px 20px;
	background: #767164;
	border-radius: 4px;	
}

#contents h3 {
	clear: both;
	margin-bottom: 15px;
	padding: 3px 20px;
	border-radius: 4px;	
	border: 2px solid #767164;	
}

#contents p {
	padding: 7px 20px 14px;
}
#contents p + p {
	padding-top: 0px;
}
#contents h2 + p,
#contents h3 + p {
	padding-top: 0px;
	margin-top: -5px;
}




.rank_title_area{
	width: 100%;
	max-width:1000px;
	position: relative;
	margin: 100px auto 0;
	color: #fff;
	box-sizing:border-box;
}


.rank_number{
	position: absolute;
	left: 20px;
	top: -25px;
	z-index:9999;
}

.site_copy{
	padding: 10px 0 4px;
	font-size: 1.4rem;
	font-weight:700;
	color:#ff3333;
}

.site_name{
	background: #cc0000;
	font-size: 1.8rem;
	line-height: 40px;
	padding: 20px 0;
}

.site_copy p,
.site_name p{
		margin-left: 160px;
}

.rank_body_area{
	padding:40px 12% 25px;
	width: 100%;
	max-width:1000px;
	position: relative;
	margin: 0 auto 25px;
	box-sizing:border-box;
}

.rank_body_area p{
	padding: 7px 20px 14px;
}

.pickup_comment p{
	padding: 7px 45px 14px;
}

.pickup{
	border:5px solid #ff3333;
	background:#fff;
	padding:40px 25px 25px;
	margin:0 auto;
	position: relative;
}

.pickup p{
	padding: 15px 20px;
	font-size:1.1rem;
	line-height:2.0;
}

.pickup_img{
	position: absolute;
	top:0px;
	left: 50%;
	transform: translate(-50%, -50%);
	margin:auto;
}



.pickup_comment{
	padding:25px;
	position: relative;
}

.pickup_voice{
	border:5px solid #69d13b;
	background:#fdfffc;
	padding:40px 20px 20px;
	margin:30px auto 0;
	position: relative;
}

.icon_area{
	margin: 20px auto;
	width: 450px;
}

.icon_area li{
	float: left;
	text-align: center;
	width: 25%;
	padding:20px 15px 4px;
	color: #fbc700;
	box-sizing:border-box;
}

.btn-area{
	margin: 30px auto;
	text-align: center;
}

.btn{
	display: inline-block;
	box-sizing: border-box;
	border-bottom: 5px solid #c93d09;
	border-radius: 10px;
	background: #ff4500;
	width: 440px;
	height: 80px;
	line-height: 80px;
	text-decoration: none;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 5px;
}

.btn:hover {
	background: url(../images/arrow.svg) no-repeat 98% #ff4500;
	color: #fff;
	text-decoration: none;
	border-bottom: none;
	height: 80px;
	margin: 5px 0 0;
}

.balloon {
	position: relative;
	display: inline-block;
	margin: 0.5em auto;
	padding: 7px 10px;
	font-size: 16px;
	background: #ff3333;
	border-radius:8px
}

.balloon:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #ff3333;
}

.balloon p {
	padding: 5px;
	font-size: 1.4rem;
	font-weight:700;
	color:#fff;
	text-align:center;
}

.footer_area{
	width:100%;
	max-width:1000px;
	margin:10px auto;
	position: relative;
	text-align:left;
}

.footer_area p{
	color:#fefefe;
	font-size:0.9rem;
}

.rank_body_area em {
	background: linear-gradient(transparent 60%, #ffd900 0%);
	font-weight: bold;
	font-size: 20px;
}

.rank01{
	background:#fff url(../images/bg_rank01.png)no-repeat center top;
}

.rank02{
	background:#fff url(../images/bg_rank02.png)no-repeat center top;
}

.rank03{
	background:#fff url(../images/bg_rank03.png)no-repeat center top;
}

.rank04{
	background:#fff url(../images/bg_rank04.png)no-repeat center top;
}

.rank05{
	background:#fff url(../images/bg_rank05.png)no-repeat center top;
}


.red01{
	color:#ff3333;
}

.green{
	color:#8ece72;
}

.blue{
	color:#0033cc;
}

.mb50{
	margin-bottom:50px;
}

.tl-c{
	text-align:center;
}

.big{
	font-size:1.2rem;
}

.fwb{
	font-weight:bold;
}


footer {
	clear: both;
	text-align: center;	
	padding: 20px 0px 10px;
	color: #fefefe;
	background:#000;
	margin-top:70px;
}
footer a {
	text-decoration: none;
	border: none;
	color: #efefef;
}

footer a:hover {
	color: #767164;
	text-decoration: none;
}

footer .pr {
	display: block;
}


.ta1 {
	width: 100%;
	margin-bottom: 15px;
}
.ta1, .ta1 td, .ta1 th {
	border: 2px solid #767164;
	padding: 10px;
	word-break: break-all;
}

.ta1 th {
	width: 30%;
	text-align: center;
	color:#222;
	background:url(../images/bg.png);
}

.ta1 td {
	color:#222;
	text-align:left;
}

.look {background: #e5e5e5;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color:#739220;}
.pr {font-size: 10px;}



@media screen and (max-width:600px){
#container {
	width: 100%;
}
}


@media screen and (min-width:481px){
.for_sp{
	display:none;
}
}



@media screen and (max-width:480px){

.rank_number{
	position: absolute;
	left: 10px;
	top: -5px;
	z-index:9999;
}

.site_name{
	background: #cc0000;
	font-size: 1.6rem;
	line-height: 40px;
	padding: 20px 0;
}

.site_copy p,
.site_name p{
		margin-left: 90px;
}

.rank_title_area{
	width: 100%;
	max-width:1000px;
	position: relative;
	margin: 70px auto 0;
	color: #fff;
	box-sizing:border-box;
}

.rank_body_area{
	padding:40px 5% 25px;
	width: 100%;
	max-width:1000px;
	position: relative;
	margin: 0 auto 25px;
	box-sizing:border-box;
}

.pickup{
	border:5px solid #ff3333;
	background:#fff;
	padding:20px 15px 15px;
	margin:0 auto;
	position: relative;
}

.pickup p{
	padding: 15px 10px;
	font-size:1.1rem;
	line-height:2.0;
}

.pickup_voice{
	border:5px solid #69d13b;
	background:#fdfffc;
	padding:20px 15px 15px;
	margin:30px auto 0;
	position: relative;
}

.icon_area{
	margin: 20px auto;
	width: 96%;
}

.icon_area li{
	float: left;
	text-align: center;
	width: 50%;
	padding:20px 15px 4px;
	color: #fbc700;
	box-sizing:border-box;
}

.btn{
	display: inline-block;
	box-sizing: border-box;
	border-bottom: 5px solid #c93d09;
	border-radius: 10px;
	background: #ff4500;
	width: 90%;
	height: 80px;
	line-height: 80px;
	text-decoration: none;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 5px;
}

.footer_area{
	width:94%;
	max-width:1000px;
	margin:10px auto;
	position: relative;
	text-align:left;
}

.for_pc{
	display:none;
}
}