@charset "utf-8";
/*
	Theme Name: 頻尿サプリランキング専用（スマホ対応）
*/

/*================================================================================
全体の設定
================================================================================*/
html { font-size: 62.5%;}

body {
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	line-height: 1;
	color: #000;
	font-size: 16px;
	font-size: 1.6rem;
	background-image: url(./img/bg001_01.gif);
	background-repeat: repeat;
}

strong, b {font-weight: bold;}

a,
a:link,
a:visited{text-decoration: underline;}
a:hover,
a:active{text-decoration: none;}

#wrap {
	background-color: #FFF;
	margin: auto;
	height: auto;
	width: 1000px;
}

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

	#wrap { width: 100%;}

}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1; }

.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}
.pl25 {padding-left: 25px;}
.pl30 {padding-left: 30px;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr25 {padding-right: 25px;}
.pr30 {padding-right: 30px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}

.pb100 {padding-bottom: 100px;}

.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb50 {margin-bottom: 50px;}

/*================================================================================
ヘッダー
================================================================================*/
@media screen and (min-width:668px){

	#header {
		margin: auto;
		width: 1000px;
		position: relative;
	}
	
	h1 {
		font-size: 12px;
		font-size: 1.2rem;
		color: #FFF;
		position: absolute;
		top: 6px;
		left: 6px;
	}
	
	.header_title_sm { display: none;}

}

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

	#header { width: 100%;}
	
	h1 {
		background-color: #040144;
		color: #FFF;
		font-size: 1.2rem;
		padding: 10px 10px 4px 10px;
	}
	
	.header_title_sm { display: block;}
	
	.header_title { display: none;}

}

#hin_img001 {
	text-align: center;
}

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

	#hin_img001 img {
		max-width: 100%;
	}

}

@media screen and (min-width:668px){

	#hin_nyou_txt {
		background-image: url(./img/txt_bg001.gif);
		background-repeat: no-repeat;
		background-position: left top;
		margin: auto;
		width: 880px;
		height: 240px;
	}

}

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

	#hin_nyou_txt {
		width: 100%;
		padding: 10px;
	}

}

#hin_txt001 {
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.6;
	font-weight: 500;
	padding-top: 10px;
}

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

	#hin_txt001 {
		font-size: 1.6rem;
		line-height: 1.6;
		padding: 0 0 10px 0;
	}

}

.fc_red {
	font-size: 18px;
	font-weight: bold;
	color: #C00;
}


/*================================================================================
　コンテンツ
================================================================================*/
@media screen and (min-width:668px){

	#contents {
		width: 1000px;
		float: left;
		background-color: #FFF;
	}
	
	#contents_inner {
		width: 700px;
		float: left;
		margin-left: 15px;
	}

}

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

	#contents {
		width: 100%;
	}
	
	#contents_inner {
		width: 100%;
	}

}

@media screen and (min-width:668px){

	#hin_img002 {
		text-align: center;
		margin-top: 30px;
	}
	
	#hin_img002_sm { display: none;}

}

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

	#hin_img002 { display: none;}
	
	#hin_img002_sm { display: block;}

}

/* 比較表 */
@media screen and (min-width:668px){
	
	#hikaku_hyou {
		width: 980px;
		margin: 0 auto;
	}

}

#hikaku_hyou table {
	width: 100%;
	border-left: 3px solid #fff;
	border-top: 3px solid #fff;
}

#hikaku_hyou th {
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	padding: 10px 6px;
}

#hikaku_hyou th.top_th {
	background-color: #000373;
	color: #fff;
	width: 18%;
}

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

	#hikaku_hyou th.top_th {
		width: 18%;
		font-size: 1.4rem;
	}

}

#hikaku_hyou th.top_th a {
	color: #fff;
}

#hikaku_hyou th.side_th {
	background-color: #1c68be;
	color: #fff;
}

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

	#hikaku_hyou th.side_th {
		font-size: 1.4rem;
	}

}

#hikaku_hyou td {
	background-color: #fff9c2;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	text-align: center;
	padding: 4px;
}


#supple01 {
	background-image: url(./img/hyou_bg001.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 36px;
	width: 170px;
	float: left;
	margin-left: 124px;
	margin-bottom: 3px;
	text-align: center;
	padding-top: 14px;
}
#supple01 a {
	color: #FFF;
	font-size: 16px;
}

#supple02 {
	background-image: url(./img/hyou_bg001.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 36px;
	width: 170px;
	float: left;
	margin-left: 3px;
	margin-bottom: 2px;
	text-align: center;
	padding-top: 14px;
}
#supple02 a {
	color: #FFF;
	font-size: 16px;
}
#supple03 {
	background-image: url(./img/hyou_bg001.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 36px;
	width: 170px;
	float: left;
	margin-left: 3px;
	margin-bottom: 2px;
	text-align: center;
	padding-top: 14px;
}
#supple03 a {
	color: #FFF;
	font-size: 16px;
}
#supple04 {
	background-image: url(./img/hyou_bg001.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 36px;
	width: 170px;
	float: left;
	margin-left: 3px;
	margin-bottom: 2px;
	text-align: center;
	padding-top: 14px;
}
#supple04 a {
	color: #FFF;
	font-size: 16px;
}
#supple05 {
	background-image: url(./img/hyou_bg001.gif);
	background-repeat: repeat-x;
	background-position: left top;
	height: 36px;
	width: 170px;
	float: left;
	margin-left: 3px;
	margin-bottom: 2px;
	text-align: center;
	padding-top: 14px;
}

#supple05 a {
	color: #FFF;
	font-size: 16px;
}


#hin_img003 {
	text-align: center;
}


/*================================================================================
　順位
================================================================================*/

.rank01_inner,
.rank02_inner { background-color: #F2FDFF;}
	
@media screen and (min-width:668px){

	.rank01_inner,
	.rank02_inner { width: 700px;}

}

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

	.rank01_inner,
	.rank02_inner { padding: 10px;}

}

.rank01_title,
.rank02_title,
.rank03_title,
.rank04_title {
	background-repeat: no-repeat;
	background-position: left top;
}

.rank01_title { background-image: url(./img/rank01_01.gif);}
.rank02_title { background-image: url(./img/rank02_01.gif);}
.rank03_title { background-image: url(./img/rank03_01.gif);}
.rank04_title { background-image: url(./img/rank04_01.gif);}
.rank05_title { background-image: url(./img/rank05_01.gif);}

@media screen and (min-width:668px){

	.rank01_title {
		width: 700px;
		height: 78px;
		margin-top: 10px;
	}
	
	.rank02_title,
	.rank03_title,
	.rank04_title,
	.rank05_title {
		width: 700px;
		height: 55px;
		margin-top: 50px;
	}

}

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

	.rank01_title,
	.rank02_title,
	.rank03_title,
	.rank04_title,
	.rank05_title {
		width: 100%;
	}

}

@media screen and (min-width:668px){

	.rank01_title h2,
	.rank02_title h2,
	.rank03_title h2,
	.rank04_title h2,
	.rank05_title h2 {
		float: left;
		margin-top: 38px;
		margin-left: 110px;
	}
	
	.rank02_title h2,
	.rank03_title h2 {
		margin-top: 18px;
		margin-left: 100px;
	}
	
	.rank04_title h2,
	.rank05_title h2 {
		margin-top: 18px;
		margin-left: 92px;
	}

}

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

	.rank01_title h2 {
		padding: 32px 10px 4px 100px;
	}
	
	.rank02_title h2,
	.rank03_title h2 {
		padding: 8px 10px 4px 85px;
	}
	
	.rank04_title h2,
	.rank05_title h2 {
		padding: 8px 10px 4px 75px;
	}

}

.rank01_title h2 a {
	color: #fff;
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.2;
	font-weight: 600;
}

.rank02_title h2 a,
.rank03_title h2 a,
.rank04_title h2 a,
.rank05_title h2 a {
	color: #fff;
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.2;
	font-weight: 600;
}

@media screen and (max-width:667px){
	
	.rank01_title h2 a,
	.rank02_title h2 a,
	.rank03_title h2 a,
	.rank04_title h2 a {
		font-size: 2.0rem;
	}

}

/* ボタン（公式サイトへ） */
	
@media screen and (min-width:668px){

	.kousiki_link00,
	.kousiki_link {
		float: right;
		width: 165px;
		height: 32px;
		margin-top: 35px;
		margin-right: 10px;
	}
	
	.kousiki_link { margin-top: 10px;}
	
	.links02 {
		float: right;
		margin-left: 400px;
	}

}

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

	.kousiki_link00,
	.kousiki_link {
		text-align: right;
		padding: 0 10px 10px 0;
		margin: 0;
	}
	
	.links02 {
		text-align: right;
		padding: 0;
		margin: 0;
	}

}

.setumei_txt,
.setumei_txt02 {
	color: #0037C3;
	font-weight: bold;
	line-height: 1.5;
}

@media screen and (min-width:668px){

	.txt_img {
		float: left;
		margin-top: 37px;
		margin-left: 15px;
	}
	
	.txt_img02 {
		float: left;
		margin-top: 24px;
		margin-left: 15px;
	}
	
	.setumei_txt,
	.setumei_txt02 {
		float: left;
		font-size: 18px;
		margin-top: 35px;
		margin-left: 4px;
	}
	
	.setumei_txt02 {
		float: left;
		font-size: 18px;
		margin-top: 22px;
		margin-left: 4px;
	}
	
	.score_img,
	.score_img02 {
		float: right;
		margin-right: 20px;
		margin-top: 4px;
	}
	
	.score_img02 { 
		margin-top: 18px;
	}

}

@media screen and (max-width:667px){
	
	.txt_img,
	.txt_img02 {
		float: left;
		width: 25px;
		padding-top: 4px;
	}

	.setumei_txt,
	.setumei_txt02 {
		padding: 0 0 0 28px;
	}
	
	.score_img,
	.score_img02 {
		clear: both;
		text-align: center;
	}

}

/* 商品写真と点数 */

@media screen and (min-width:668px){

	.main_img,
	.main_img02 {
		height: 260px;
		width: 700px;
		clear: both;
	}
	
	.supple_img {
		float: left;
		margin-top: 4px;
		margin-left: 15px;
		padding: 0 0 20px 0;
	}
	
	.all_score_img {
		float: left;
		margin-top: 4px;
		margin-left: 15px;
	}

}

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

	.main_img,
	.main_img02 {
		text-align: center;
		width: 100%;
		padding: 10px 0 0 0;
	}
	
	.supple_img { margin: 0; padding: 0 0 10px 0;}
	
	.all_score_img { margin-bottom: 10px;}

}

.supple_txt {
	clear: left;
	color: #444;
	line-height: 1.6;
}

@media screen and (min-width:668px){

	.supple_txt {
		clear: left;
		font-size: 15px;
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0 20px 20px 20px;
	}

}

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

	.supple_txt {
		font-size: 1.6rem;
		margin-bottom: 15px;
		font-weight: normal;
	}

}

.supple_name {
	clear: both;
	background-color: #00289a;
	margin: 0 20px;
	padding: 8px;
}

.supple_name h3 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}

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

	.supple_name {
		margin: 0 2px;
	}

}

.tbl_txt {
	border-left: 2px solid #f2fdff;
	border-top: 2px solid #f2fdff;
}

@media screen and (min-width:668px){

	.tbl_txt {
		width: 664px;
		margin: 0 auto 20px auto;
	}

}

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

	.tbl_txt {
		clear: both;
		width: 100%;
		margin-bottom: 15px;
	}

}

.tbl_txt th,
.tbl_txt td {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	padding: 8px;
	border-right: 2px solid #f2fdff;
	border-bottom: 2px solid #f2fdff;
}

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

	.tbl_txt th,
	.tbl_txt td {
		font-size: 1.4rem;
		letter-spacing: 0;
	}

}

.tbl_txt th {
	color: #fff;
	text-align: center;
	font-weight: bold;
	background-color: #1C68BE;
}

.tbl_txt td {
	background-color: #FFFFFF;
	color: #444;
	font-weight: 600;
}

@media screen and (min-width:668px){

	.tbl_txt th { width: 80px;}

}

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

	.tbl_txt th {
		width: 80px;
	}

}

.kakaku_iro {
	color: #000;
	font-weight: bold;
	font-size: 18px;
}

.kakaku_iro_red {
	color: #F00;
	font-weight: bold;
}

.kakaku_size {
	font-size: 36px;
}

@media screen and (min-width:668px){

	.main_link02 {
		width: 700px;
		margin-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}
	
	.main_link02_sm { display: none;}

}

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

	.main_link02 { display: none;}
	
	.main_link02_sm {
		display: block;
		width: 300px;
		margin: 0 auto 15px auto;
	}

}


/*================================================================================
　サイドバー
================================================================================*/
@media screen and (min-width:668px){
	
	#sidebar {
		float: left;
		width: 260px;
		margin-left: 12px;
		margin-top: 34px;
	}

}

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

	#sidebar {
		width: 100%;
	}

}

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

	#side_title {
		background-color: #00289a;
		text-align: center;
	}

}

.side_rank_box {
	background-color: #F2FDFF;
	padding: 6px 8px 24px 8px;
	margin-top: 5px;
}

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

	.side_rank_box {
		padding: 8px 10px 10px 10px;
		margin-top: 5px;
	}

}

/* 順位アイコン */
.s_rank_top {
	float: left;
	height: 53px;
	margin-top: 4px;
	margin-right: 10px;
}

.s_rank {
	float: left;
	height: 42px;
	margin-top: 4px;
	margin-right: 10px;
}

.s_rank_link {
	float: left;
	padding-top: 5px;
	color: #4374C7;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
}

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

	.s_rank_link { font-size: 1.6rem;}

}

.s_rank_txt {
	clear: both;
	padding-top: 10px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #444;
	font-weight: 600;
}

.s_rank_img {
	float: left;
	margin-top: 10px;
}

.s_rank_img02 {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}

/*================================================================================

================================================================================*/
#side_link_title01,
#side_link_title02 {
	margin-top: 20px;
}

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

	#side_link_title01,
	#side_link_title02 {
		text-align: center;
		background-color: #00289a;
		margin-top: 0;
	}

}

@media screen and (min-width:668px){

	.side_links {
		background-color: #F2FDFF;
		margin-top: 4px;
		height: 35px;
		width: 260px;
	}

}

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

	.side_links {
		background-color: #F2FDFF;
	}

}

.side_links p {
	float: left;
	margin: 10px;
}

.side_links ul {background: transparent !important;}
.side_links li {background-color: none !important;}
.side_links a {
	float: left;
	margin-top: 6px;
}

@media screen and (min-width:668px){

	#sidebar ul {
		padding: 8px 0;
		border-top: none;
	}
	
	#sidebar li {
		padding: 6px 0;
	}
	
	#index #sidebar ul {
		background-color: #f2fdff;
		border-top: 5px solid #fff;
	}	
	
	#sidebar li a {
		padding: 0 0 0 24px;
	    background-color: #f2fdff;
		background: url(./img/list_marker001.gif) no-repeat 10px center;
	}
	
	#side2 li a {
		display: block;
		padding: 0 0 0 24px;
		background-color: #f2fdff;
		background: url(./img/side_right_tri_icon.png) no-repeat 10px center;
	}

}

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

	#sidebar li a {
		font-size: 1.6rem;
		display: block;
		background-image: url(img/list_marker001.gif);
		background-repeat: no-repeat;
		background-position: 10px center;
		padding: 10px 0 10px 24px;
		border-bottom: 1px solid #e5e5e5;
		text-decoration: none;
	}

}


/*================================================================================
　フッター
================================================================================*/
#footer {
	clear: both;
	padding-top: 40px;
}

#to_top {
	background-image: url(./img/footer_to_top_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 32px;
	width: 167px;
	clear: both;
	padding-top: 10px;
	margin: 0 60px 0 auto;
}

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

	#to_top {
		margin: 0 auto;
	}

}

#to_top a {
	display: block;
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
}

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

	#to_top a {
		font-size: 1.4rem;
	}

}

#footer_inner {
	clear: both;
	background-color: #00235e;
	padding: 30px 0;
}

#footer_inner p {
	text-align: center;
	color: #FFF;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
}

@media screen and (max-width:667px){
	
	#footer_inner { padding: 15px 10px;}

	#footer_inner p { font-size: 1.2rem;}

}


.line{background:#FF3; color:#FF0000; font-weight:bold;}

#gaiyou th{ line-height:35px;
}