/* ==================================================
BASE (RESET)
================================================== */
ul, ol, dl { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
ol, li { list-style: none; }
dt, dd { font-weight: inherit; font-style: normal; margin: 0; padding: 0; }





@media screen and (min-width:769px) {
	.spView {display: none !important;}
}
@media screen and (max-width:768px) {
	.pcView {display: none !important;}
}


#chart_table b{
	display:block;
	font-size:14px !important;
	font-weight:bold;
	margin:0 auto;
}

#chart_table b span{
  font-size: 20px !important;
  color: #1c4295;
  font-weight: bold;
}

#search_box {
	width:97%;
	margin:0;
}

.search_howto {
	width:63%;
	height: 110px;
	margin:0 1% 20px 0;
	border:solid 1px #1a4396;
	display:inline-block;
	vertical-align:top;
	font-size:11px;

/*220328 add*/
	display:none;
}

.search_howto p{
	background-color: #1a4396;
	margin: 0;
	padding: 8px;
}

.search_howto dl{
	margin:5px;
}

.search_howto dt{
	width: 100px;
	display:inline-block;
	vertical-align:top;
}

.search_howto dd{
	width: 255px;
	display:inline-block;
	vertical-align:top;
}

.search_input {
/*220328 add*/
	width:100%;
	height: 110px;
	margin:0 0 20px 0;
	border:solid 1px #1a4396;
	display:inline-block;
	vertical-align:top;
}

.search_input p{
	background-color: #1a4396;
	margin: 0;
	padding: 8px;
}

.search_input table{
	margin:10px auto;
}

#other_vote {
/*220328 add*/
	display:none;
}


ul.ttl_main {
	width:600px;
	margin:0;
	border-bottom: solid 1px #d5dee5;
}

ul.ttl_main li{
	display:inline-block;
}

ul.ttl_main li.ttl_week{
	width:5%;
	text-align:center;
}

ul.ttl_main li.ttl_last{
	width:5%;
	text-align:center;
	color:#333;
}

ul.ttl_main li.ttl_title{
	width:36%;
}

ul.ttl_main li.ttl_artist{
	width:42%;
}



ul.ttl {
	width:600px;
	margin:0;
	border-bottom: solid 1px #d5dee5;
}

ul.ttl li{
	display:inline-block;
}

ul.ttl li.ttl_week{
	width:5%;
	text-align:center;
}

ul.ttl li.ttl_title{
	width:41%;
}

ul.ttl li.ttl_artist{
	width:52%;
}

ul.chart_main {
	width:600px;
	margin:0 0 10px 0;
}

ul.chart_main li{
	width:100%;
	padding: 6px 0 0 0;
	display:inline-block;
	border-bottom: solid 1px #d5dee5;
}

ul.chart_main li:nth-child(2n){
	background-color:#f5f6f1;
}



ul.chart {
	width:600px;
	margin:0 0 10px 0;
}

ul.chart li{
	width:100%;
	padding: 6px 0 0 0;
	display:inline-block;
	border-bottom: solid 1px #d5dee5;
}

ul.chart li:nth-child(2n){
	background-color:#f5f6f1;
}

.song_rank {
	width:5%;
	display:inline-block;
	text-align:center;
	color:#cc0000;
	font-size:12px;
	vertical-align:top;
}

.song_title {
	width:38%;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}

.song_artist {
	width:38%;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}


.buycd {
	width:16%;
	display:inline-block;
	text-align:right;
	vertical-align:top;
	text-align:right;
}

.buycd a{
	max-width:100px;
	display:block;
	padding:3px 2px;
	border-radius:2px;
	background-color:#e9037f;
	color:#fff;
	font-size:10px;
	text-align:center;
	text-decoration:none;
}



.chart_main .song_rank {
	width:5%;
	display:inline-block;
	text-align:center;
	color:#cc0000;
	font-size:12px;
	vertical-align:top;
	font-weight: bold;
}

.chart_main .song_lastrank {
	width:5%;
	display:inline-block;
	text-align:center;
	color:#333;
	font-size:12px;
	vertical-align:top;
}

.chart_main .song_title {
/*220328 add*/
	width:35%;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}

.chart_main .song_artist {
/*220328 add*/
	width:35%;
	display:inline-block;
	font-size:12px;
	vertical-align:top;
}

.chart_main .vote_btn {
/*220328 add*/
	width:0%;
	display:inline-block;
	text-align:right;
	vertical-align:top;
}

.chart_main .vote_btn a{
	max-width:100px;
	display:block;
	padding:3px 2px;
	border-radius:2px;
	background-color:#78b519;
	color:#fff;
	font-size:10px;
	text-align:center;
	text-decoration:none;
/*220328 add*/
	display:none;
}

.chart_main .buycd {
	width:15%;
	display:inline-block;
	text-align:right;
	vertical-align:top;
}


@media screen and (max-width: 768px) {
		html { box-sizing: border-box; width: 100%; margin: 0; padding: 0; }
		*, *::after, *::before { box-sizing: inherit; }
		body { position: relative; width: 100%; margin: 0; padding: 0; text-align: center; }

		body {
		  color: #4a4a4a;
		  font-family: "YuGothic", "Yu Gothic", "Þ⥴¥·¥Ã¥¯", "Helvetica", "Helvetica Bold", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
		  line-height: 1.5;
		  letter-spacing: .2px;
		  font-size: 100%;
		}

		a {
		  text-decoration: underline;
		  color: #006fa1;
		}
		a:visited {
		  color: #006fa1;
		}
		a:hover {
		  color: #006fa1;
		}
		a:active {
		  color: #006fa1;
		}

		#menu {
			display:none !important;
		}


		#read_table {
			width: 96%;
			margin: 0 auto;
		}

		#read_table img{
			width: 100%;
		}

		#read_table p{
			font-size:12px !important;
		}

		#search_box {
			margin: 0 auto;
		}

		#search_box select{
			height:32px;
			font-size:16px !important;
		}

		#search_box input[type="submit"]{
			height:32px;
			font-size:16px !important;
		}

		.caution {
			font-size:14px !important;
			text-align:center;
		}

		#search_box .text2{
			font-size:16px !important;
		}


		#chart_table {
			width:100%;
		}

		#chart_table b{
			display:block;
			font-size:16px !important;
			font-weight:bold;
			margin:0 auto;
			text-align:center;
		}

		#chart_table b span{
		  font-size: 20px !important;
		  color: #000066;
		  font-weight: bold;
		  display: block;
		}

		#chart_box {
			width: 96%;
			margin: 0 auto;
		}

		ul.ttl {
			width:100%;
			margin:0;
		}

		ul.ttl img{
			display:none;
		}

		ul.chart {
			width:100%;
			margin:0 0 10px 0;
		}

		ul.chart li{
			padding: 10px 0;
		}

		.song_rank {
			width:8%;
			display:inline-block;
			text-align:center;
			color:#cc0000;
			font-size:16px;
			vertical-align:top;
		}

		.song_title {
			width:90%;
			display:inline-block;
			font-size:16px;
			vertical-align:top;
		}

		.song_artist {
			width:100%;
			display:inline-block;
			font-size:16px;
			vertical-align:top;
			padding: 0 0 0 33px;
		}

		.buycd {
			width:100%;
			display:inline-block;
			text-align:left;
			vertical-align:top;
		}

		.buycd a{
			width:120px;
			height:auto;
			margin: 0 0 0 33px;
		}

		.buycd a, .vote_btn a{
			color:#fff;
		}


		#chart_area {
			width:100%;
		}

		#award_area {
			display:none !important;
		}

		#footer {
			display:none !important;
		}

}

/* ==================================================
CHART MINI WINDOW
================================================== */

.w_chart_box {
	margin:10px auto;
	width:98%;
	text-align:left;
}

li.w_image {
	width:40%;
	display:inline-block;
}

li.w_image img{
	width:94%;
	height: auto;
}

.w_title {
	width:58%;
	display:inline-block;
	vertical-align:top;
	text-align:left;
	font-size: 14px;
}

.w_title p.title_name{
	font-weight: bold;
	margin-top:0px;
	margin-bottom:10px;
}

.w_info_box {
	border-bottom:solid 1px #1c4295;
}

.w_artist_info {
	text-align:left;
	font-size: 14px;
}

.w_artist_buycd {
	text-align:left;
	font-size: 14px;
}

.w_artist_url {
	text-align:center;
}

.btn_close {
	text-align:center;
}




/* ==================================================
CHART THIS WEEK
================================================== */

@media screen and (max-width: 768px) {
	#search_box {
		width:96%;
		margin:0 auto;
	}

	#other_vote {
		width:96% !important;
		margin:0 auto;
/*220328 add*/
		display:none;
	}

	#other_vote input{
		width:100% !important;
	}


	.search_howto {
		width:100%;
		height: auto;
		margin:0 0 20px 0;
		border:solid 1px #1a4396;
		display:inline-block;
		vertical-align:top;
		font-size:11px;
		display:none;
	}

	.search_howto p{
		background-color: #1a4396;
		margin: 0;
		padding: 8px;
	}

	.search_howto dl{
		margin:5px;
	}

	.search_howto dt{
		width: 100px;
		display:inline-block;
		vertical-align:top;
	}

	.search_howto dd{
		width: 235px;
		display:inline-block;
		vertical-align:top;
	}

	.search_input {
		width:100%;
		height: auto;
		margin:0 0 20px 0;
		border:solid 1px #1a4396;
		display:inline-block;
		vertical-align:top;
	}

	.search_input p{
		background-color: #1a4396;
		margin: 0;
		padding: 8px;
	}

	.search_input table{
		margin:10px auto;
	}



		ul.ttl_main {
			width:100%;
			margin:0;
		}

		ul.chart_main {
			width:100%;
			margin:0 0 10px 0;
		}

		ul.chart_main li{
			padding: 10px 0;
		}

		ul.ttl_main li.ttl_week{
			width:11%;
			text-align:center;
			padding: 5px 0;
		}

		ul.ttl_main li.ttl_last{
			display:none;
		}

		ul.ttl_main li.ttl_title{
			display:none;
		}

		ul.ttl_main li.ttl_artist{
			display:none;
		}

		.chart_main .song_rank {
			width:8%;
			display:inline-block;
			text-align:center;
			color:#cc0000;
			font-size:16px;
			vertical-align:top;
			font-weight: bold;
		}

		.chart_main .song_lastrank {
			width:30%;
			display:inline-block;
			text-align:left;
			color:#333;
			font-size:10px;
			vertical-align:middle;
		}

		.chart_main .song_title {
			width:90%;
			display:inline-block;
			font-size:16px;
			font-weight: bold;
			vertical-align:top;
			padding: 0 0 0 33px;
		}

		.chart_main .song_artist {
			width:100%;
			display:inline-block;
			font-size:16px;
			vertical-align:top;
			padding: 0 0 0 33px;
		}

		.chart_main .vote_btn {
			width:26%;
			display:inline-block;
			text-align:left;
			vertical-align:top;
			padding: 10px 0 0 33px;
/*220328 add*/
			display:none;
		}

		.chart_main .vote_btn a{
			display:block;
		}

		.chart_main .vote_btn img{
			width:60px !important;
			height:auto;
		}

		.chart_main .buycd {
			width:40%;
			display:inline-block;
			text-align:left;
			vertical-align:top;
			padding: 10px 0 0 0;
		}

		.chart_main .buycd a{
			display:block;
		}

		.chart_main .buycd img{
			width:60px !important;
			height:auto;
			padding:0;
		}

}



/* ==================================================
CHART VOTE
================================================== */

@media screen and (max-width: 768px) {
	#vote_table {
		width:96% !important;
		margin:0 auto;
		text-align:left;
	}

	#vote_sub_table {
		width:80% !important;
		margin:0 auto;
		text-align:left;
	}
}


/* ==================================================
SP COMMON MENU
================================================== */

@media screen and (max-width: 768px) {
	h1#h1title{
		margin:0 auto;
	}

	h1#h1title img{
		border-top:solid 6px #282828;
		width:100%;
		padding:0;
	}

	h3#h3menu {
		margin:0 auto;
		background-color:#1c4295;
	}

	h3#h3menu img{
		width:28%;
		padding:10px;
	}

	ul#sp_menu {
			font-size:0;
	}

	#sp_menu li {
	    width: 49%;
	    height: auto;
	    display:inline-block;
	    text-align: left;
	    margin: 1px 0;
	    font-weight: bold;
	    color: #1c4295;
	    border: solid 1px #1c4295;
	    background: url(/original/tokiohot100/mobile/p/images_s/arrow.png) #fff no-repeat right;
	}

	#sp_menu li.now_cont {
	    width: 49%;
	    height: auto;
	    display:inline-block;
	    text-align: left;
	    margin: 1px 0;
	    font-weight: bold;
	    color: #fff;
	    border: solid 1px #1c4295;
	    background: url(/original/tokiohot100/mobile/p/images_s/arrow2.png) #1c4295 no-repeat right;
	}

	#sp_menu li a {
	    font-size: 12px;
	    color: #1c4295;
	    display: block;
	    padding: 13px;
			text-decoration:none;
	}

	#sp_menu li.now_cont a {
	    font-size: 12px;
	    color: #fff;
	    display: block;
	    padding: 13px;
			text-decoration:none;
	}
}