@charset "utf-8";
/*
=============================================================

	ススキノトゥナイト　スタイルシート

	ファイル名: _top.css
	作成日: 2009/7/21
	作成者: y.wakasugi
	概要:
	　1.ススキノトゥナイトのトップページ専用スタイルを記述。

	目次:
	　1. コンテンツの枠
	　2. サブジェクト
	　3. メインフィールド・各項目のスタイル
	　4. サイドバー・各項目のスタイル

=============================================================
*/


/*
-------------------------------------------------------------
	1. コンテンツの枠
-------------------------------------------------------------
*/

#mainfield div
{
	width: 552px;
	border: 1px solid #000;
	margin-bottom: 10px;
}
#sidebar div
{
	border: 1px solid #000;
}

/*
-------------------------------------------------------------
	2. サブジェクト
-------------------------------------------------------------
*/

/*
	サブジェクトのサイズを設定
*/
#mainfield h3,
#sidebar h3
{
	height: 33px;
	border-bottom: 1px solid #000;
}
#mainfield h3 a,
#sidebar h3 a
{
	display: block;
	height: 33px;
}
#mainfield h3 a:hover,
#sidebar h3 a:hover
{
	text-decoration: none;
}
/*
	各サブジェクト、のテキストを非表示化
*/
#mainfield h3 span,
#sidebar h3 span
{
	visibility: hidden;
}

/*
	各サブジェクトのバナーを配置
*/
#mainfield #livenews h3 a
{
	background: url("../img/subject/top_r_livenews.jpg") no-repeat left top;
}
#mainfield #photodiary h3 a
{
	background: url("../img/subject/top_r_photodiary.jpg") no-repeat left top;
}
#mainfield #moviediary h3 a
{
	background: url("../img/subject/top_r_moviediary.jpg") no-repeat left top;
}
#mainfield #shopsearch h3 a
{
	background: url("../img/subject/top_r_shopsearch.jpg") no-repeat left top;
}
#mainfield #girlsearch h3 a
{
	background: url("../img/subject/top_r_girlsearch.jpg") no-repeat left top;
}
#sidebar #covergirl h3
{
	background: url("../img/subject/top_l_covergirl.jpg") no-repeat left top;
}
#sidebar #clickranking h3
{
	background: url("../img/subject/top_l_clickranking.jpg") no-repeat left top;
}
#sidebar #update h3 a
{
	background: url("../img/subject/top_l_update.jpg") no-repeat left top;
}
#sidebar #information h3
{
	background: url("../img/subject/top_l_information.jpg") no-repeat left top;
}
#sidebar #mobile h3
{
	background: url("../img/subject/top_l_mobile.jpg") no-repeat left top;
}
#mainfield #newestcast h3
{
	background: url("../img/subject/top_r_newestcast.jpg") no-repeat left top;
}



/*
-------------------------------------------------------------
	3. メインフィールド・各項目のスタイル
-------------------------------------------------------------
*/

/*
	メインフィールド共通
*/
#shopsearch, #girlsearch, #livenews, #photodiary, #moviediary, #shopsearch, #girlsearch, #joinmailmag { clear: both; background-color: #fff; }

/*
	検索と新着キャストの段組
*/
#search, #newestcast
{
	float: left;
}
/* #search要素内のボックス要素の幅を再定義 */
#mainfield div#search { border: 0; }
#mainfield div#search,
#mainfield div#search div,
#mainfield div#search h3 { width: 360px; }

/* #searchの各ボックスの定義 */
#search div { height: 175px; }
html>/**/body #search div { height /*\**/: 174px\9; } /*IE8用ハック*/

/* #search内の各要素のスタイル */
#search dl { margin: 10px; }
#search dl dd { padding: 5px 0; text-align: right; }
#search dl dd form  { margin: 0; padding: 0; } /*IE7対策*/
#search dl dd input { width: 130px; margin-left: 10px; }
#search img { width: 340px; height: 80px; }

/* #newestlady要素内のボックス要素の幅を再定義 */
#mainfield div#newestcast { margin: 0 0 0 10px; background-color: #fff; }
#mainfield div#newestcast,
#mainfield div#newestcast div,
#mainfield div#newestcast h3 { width: 182px; }

/* データを表示するテーブルのスタイル */
#newestcast table
{
	width: 98%;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	margin: 2px;
}
#newestcast th, #newestcast td
{
	font-size: 0.8em;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
#newestcast th { background-color: #e7e1a3; width: 20px; }
#newestcast .img, #newestcast img { width: 50px; }

/*
	リアルタイム速報
*/
#livenews dl { padding: 15px; overflow: auto; height: 450px; }
#livenews dt { margin-top: 15px; }
#livenews dd { border-bottom: 3px dotted #ccc; }
	#livenews dd table { width: 100%; margin-bottom: 15px; }
		#livenews dd table th { min-width: 118px; max-width: 148px; }
		#livenews dd table td { vertical-align: top; }
			#livenews dd table td h4 { color: #f00; font-size: 1.3em; font-weight: bold; margin-bottom: 10px; }


/*
	写メ日記・動画日記
*/
#photodiary img { border: 2px solid #f659b4; }
#moviediary img { border: 2px solid #aaede4; }
#photodiary dl,
#moviediary dl
{
	width: 25%;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url("../img/wall/separate_gray.jpg") repeat-y left top;
}
#photodiary h3 + dl,
#moviediary h3 + dl
{
	background-image: none;
}
#photodiary dt, #photodiary dd,
#moviediary dt, #moviediary dd
{
	margin-right: 10px;
	margin-left: 13px;
}
#photodiary dt, #moviediary dt
{
	color: #f00;
	font-weight: bold;
}
#photodiary dd.img, #moviediary dd.img { text-align: center; }
#photodiary dd.description, #moviediary dd.description
{
	font-size: 0.85em;
}
#photodiary dd.subject, #moviediary dd.subject
{
	font-size: 1.1em;
	font-weight: bold;
	color: #f659b4;
}
#photodiary dd.shop, #moviediary dd.shop,
#photodiary dd.name, #moviediary dd.name
{
	font-size: 0.8em;
	color: #f659b4;
}


/*
	お店さがし、女の子さがし共通
*/
/* ↓この項目のスタイル全削除の可能性あり↓ */
#mainfield div.column1,
#mainfield div.column2,
#mainfield div.column3
{
	float: left;
	width: 33%;
	border: 0;
	margin: 0;
	padding: 0;
}
#mainfield div.column1 dl,
#mainfield div.column2 dl,
#mainfield div.column3 dl
{
	border-top: 1px solid #000;
}
#mainfield div.column1 dl:first-child,
#mainfield div.column2 dl:first-child,
#mainfield div.column3 dl:first-child
{
	border-top: 0;
}
#mainfield div.column2 { width: 33.5%; border-right: 1px solid #000; border-left: 1px solid #000; }
/*
#mainfield div.column1 { border-right: 1px solid #000; }
#mainfield div.column2 { width: 33.5%; }
#mainfield div.column3 { border-left: 1px solid #000; }
*/

#mainfield div.column1 dt, #mainfield div.column1 dd,
#mainfield div.column2 dt, #mainfield div.column2 dd,
#mainfield div.column3 dt, #mainfield div.column3 dd
{
	margin: 5px 10px;
}
#mainfield div.column1 dt,
#mainfield div.column2 dt,
#mainfield div.column2 dt a,
#mainfield div.column3 dt
{
	color: #f659b4;
	font-weight: bold;
	margin-bottom: 5px;
}

/* 1行目個別 */
#mainfield div.column1 dd
{
	background: url("../img/point/square_aqua.jpg") no-repeat left center;
	padding-left: 13px;
}

/* 2行目個別 */
#mainfield div.column2 dd
{
	line-height: 1.2;
	margin-bottom: 10px;
	
}
#mainfield div.column2 dt { margin-top: 10px; }
#mainfield div.column2 dl { margin-bottom: 10px; }
/* テキストボックス */
#mainfield div.column2 input,
#mainfield div.column3 input
{
	width: 100px;
}

/* 3行目個別 */
#mainfield div.column3 img
{
	width: 68px;
}
/* ↑この項目のスタイル全削除の可能性あり↑ */


/*
	広告募集
*/
div#advertise { border: 0; text-align: center; clear: both; }
#container #joinmailmag { border: 0; }


/*
-------------------------------------------------------------
	4. サイドバー・各項目のスタイル
-------------------------------------------------------------
*/

/*
	カバーガール
*/
#covergirl table { margin: 5px auto; }
#sidebar #covergirl table td { font-size: 0.8em; text-align: center; }
#sidebar #covergirl table .img img { width: 240px; }


/*
	クリックランキング
*/
#toppage #container #clickranking { border: 0; }
#toppage #container #clickranking h3 { border: 1px solid #000; }
/* タブのGUI */
ul.tabs { margin: 0; }
	ul.tabs li
	{
		list-style: none;
		display: inline; /*IE7対策*/
	}
	/*ul.tabs li a { background-color: #464c54; color: #ffebb5; padding:8px 14px 8px 14px; text-decoration: none; border: 1px solid #464c54; }
	ul.tabs li a:hover { background-color: #2f343a; border-color: #2f343a; }
	ul.tabs li a.active { background-color: #ffffff; color: #282e32; border: 1px solid #464c54; border-bottom: 1px solid #ffffff; }
.content { background-color: #ffffff; padding: 10px; border: 1px solid #464c54; }*/
	ul.tabs a
	{
		width: 50%;
		float: left;
		background: url("../img/clickranking/tab_wall.jpg") repeat-x left top;
		text-align: center;
		padding: 4px 0 3px;
		color: #fff;
		font-weight: bold;
	}
	ul.tabs .active { background: #000; }
#content_2 { display: none; }
#content_1, #content_2 { background-color: #000; clear: both; }
.content, #content_2 { border: 0 !important; }
/* クリックランキング-店舗 */
.clickranking-shop li,
.clickranking-girl li
{
	/*width: 250px;*/
	border-bottom: 2px solid #de002f;
}
.clickranking-shop li table,
.clickranking-girl li table
{
	width: 280px;
}
.clickranking-shop table th,
.clickranking-girl table th
{
	vertical-align: top;
	width: 34px;
}
.clickranking-shop table td,
.clickranking-girl table td
{
	padding: 3px 0;
}
.clickranking-shop .img { width: 100px; text-align: right; /*padding: 3px 5px 3px 0;*/ }
.clickranking-shop .img img
{
	width: 100px;
}
/* クリックランキング-女の子 */
.clickranking-girl table .img { width: 60px; text-align: right; }
.clickranking-girl .img img
{
	width: 60px;
}



/*
	更新情報
*/
#update { background-color: #fff; color: #000; }
#update dl
{
	height: 218px;
	overflow: scroll;
	border-bottom: 1px solid #000;
}
#update dt,
#update dd
{
	padding-left: 15px;
	font-weight: bold;
}
#update dt {
	padding-top: 5px;
	padding-left: 28px;
	background: url("../img/point/circle_red.jpg") no-repeat 15px 7px;
}
#update dd { padding-bottom: 5px; }
#update dt.update-date {
	color: #f00;
	background-image: url("../img/point/triangle_r_red.jpg");
	background-position: 15px 6px;
}
#update dt.update-date,
#update dd
{
	border-bottom: 2px dotted #ccc;
}
#update a { color: #00f; }
#update a:visited { color: #00f; }
#update a:hover { color: #f0f; }


/*
	インフォメーション
*/
#information ul
{
	margin: 0;
	/*padding: 10px 8px;*/
	border-bottom: 1px solid #000;
}
#information ul li
{
	float: left;
	margin: 1px 2px;
}


/*
	モバイル
*/
#mobile table{ margin: 10px auto; }
	#mobile table td { padding: 3px 0; }
	#mobile table td.mburl { font-weight: bold; letter-spacing: 0.05em; }
	#mobile table td.qrcode { padding-right: 10px; }
	#mobile table td p { text-align: center; }




/*
	広告バナー各種
*/
/* トップバナー */
#header { position: relative; }
#header .adbanner
{
	position: absolute;
	top: 50px;
	right: 20px;
}



