@charset 'utf-8';

/* -----------------------------------------------------------
CSS Information

File name:      mod_common.css
Update:         2008/10/17
Author:         J.M
Style Info:     共通CSS設定

	01. 全体用
	02. タイトル用
	03. リスト用
	04. ボックス用
	05. #contentsArea用
	06. #extraArea用

----------------------------------------------------------- */



/* ----------------------------------------------------------------------
  01. 全体用
---------------------------------------------------------------------- */

/* テキスト
------------------------------------------- */
.bold {
	font-weight: bold;
}

.small {
	font-size: 10px !important;
}

.txt11 {
	font-size: 11px;
}

.normal {
	font-size: 12px !important;
}

.txt14 {
	font-size: 14px;
}

.txt18 {
	font-size: 18px;
}

.errorMsg {
	color: #e00;
	font-weight: bold;
}



/* タイトル・文章
------------------------------------------- */
p {
}

p.caption {
	font-weight: bold;
	margin-bottom: 5px;
}

p.sentence {
	margin-bottom: 10px;
}



/* 位置
------------------------------------------- */
.fl {
	float: left;
}

.fr {
	float: right;
}

.cl {
	clear: both;
}

.vt {
	vertical-align: top;
}

.vm {
	vertical-align: middle;
}

.vb {
	vertical-align: bottom;
}

.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right
}



/* マージン
------------------------------------------- */
.mt5 {
	margin-top: 5px;
}

.mb5 {
	margin-bottom: 5px;
}

.ml5 {
	margin-left: 5px;
}

.mr5 {
	margin-right: 5px;
}

.mt10 {
	margin-top: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.ml10 {
	margin-left: 10px;
}

.mr10 {
	margin-right: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mt20 {
	margin-top: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.mt30 {
	margin-top: 30px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb50 {
	margin-bottom: 50px;
}


/* パディング
------------------------------------------- */
.pt5 {
	padding-top: 5px;
}

.pb5 {
	padding-bottom: 5px;
}

.pl5 {
	padding-left: 5px;
}

.pr5 {
	padding-right: 5px;
}

.pb10 {
	padding-bottom: 10px;
}

.pt10 {
	padding-top: 10px;
}



/* 画像
------------------------------------------- */
.imgR {
	float: right;
	padding: 0 0 10px 10px;
}

.imgL {
	float: left;
	padding: 0 10px 10px 0;
}



/* 画像のアルファ処理
------------------------------------------- */
.light a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}



/* ページの先頭へ、前へ戻る
------------------------------------------- */
.pagetop {
	clear: both;
	text-align: right;
	padding-top: 20px;
}

.pagenext {
	clear: both;
	text-align: right;
	padding-top: 20px;
}


.pageback {
	clear: both;
	text-align: left;
	padding-top: 20px;
}

.pagetop a {
	padding: 0 0 1px 12px;
	color: #666;
	background: url("/image/common/ico_pagetop.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pagenext a {
	padding: 0 0 1px 12px;
	color: #666;
	background: url("/image/common/ico_more.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pageback a {
	padding: 0 0 1px 12px;
	color: #666;
	background: url("/image/common/ico_back.gif") no-repeat 0 1px;
	font-size: 10px;
}

.pagetop a,
.pagenext a,
.pageback a {
	\background: none; /* IE5 */
}

.pagetop a:hover,
.pagenext a:hover,
.pageback a:hover {
	text-decoration: underline;
}





/* separate hr
------------------------------------------- */
hr.separate {
	display: none;
}


/* clearfix
------------------------------------------- */
.clearfix:after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* hasLayout
------------------------------------------- */
.hasLayout {
	height: 1%;
}





/* ----------------------------------------------------------------------
  02. タイトル用
---------------------------------------------------------------------- */

/* 基本スタイル */
#contentsArea h3,
#extraArea h3 {
	margin-bottom: 8px;
	padding: 0 0 2px 3px;
	border-bottom: 1px solid #ccc;
	color: #ff3493;
	font-size: 15px;
	font-weight: bold;
}

#contentsArea .btnMore,
#contentsArea .titleSupple,
#extraArea .btnMore,
#extraArea .moreBottom {
	position: relative;
}

#contentsArea .btnMore a,
#extraArea .btnMore a {
	padding-left: 12px;
	display:block;
	position: absolute;
	top: -27px;
	right: 3px;
	color: #777;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 10px;
}

#extraArea .moreBottom { 
	padding-bottom: 10px;
}

#extraArea .moreBottom a {
	padding-left: 12px;
	display:block;
	position: absolute;
	top: -5px;
	right: 3px;
	color: #777;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 10px;
}

#contentsArea .btnMore a:hover,
#extraArea .btnMore a:hover,
#extraArea .moreBottom a:hover {
	text-decoration: underline;
}


#contentsArea .titleSupple span {
	display:block;
	position: absolute;
	top: -27px;
	right: 3px;
	color: #777;
	font-size: 10px;
}


#contentsArea .titleSupple span.importance {
	display:block;
	position: absolute;
	top: -29px;
	right: 3px;
	color: #e5002b;
	font-size: 12px;
	font-weight: bold;
}



#contentsArea h3 img.icon {
	margin: 0 0 -2px 5px;
}

#contentsArea h3 a img.icon {
	margin: 0 0 3px 5px;
}



/* コンテンツ用タイトルスタイル */
#contentsArea h3.contentsTitle,
#contents-inner h3.contentsTitle {
	color: #666;
	font-size: 18px;
}

#contentsArea h3.contentsTitle1 {
	height:21px;
	width:647px;
	vertical-align: bottom;
	padding-bottom: 3px;
}

#contentsArea h3.contentsTitle img,
#contents-inner h3.contentsTitle img {
	vertical-align: bottom;
	padding-bottom: 3px;
}




/* ----------------------------------------------------------------------
   03. リスト用
---------------------------------------------------------------------- */

/* 共通数字リスト
----------------------------------------------------------------------- */
ol.number {
}

ol.number li {
	margin: 0;
	padding: 0 0 1px 20px;
	margin-bottom: 6px;
	line-height: 16px;
}

ol.number li.num1 {
	background: url("/image/common/ico_01.gif") no-repeat 2px 1px;
}

ol.number li.num2 {
	background: url("/image/common/ico_02.gif") no-repeat 2px 1px;
}

ol.number li.num3 {
	background: url("/image/common/ico_03.gif") no-repeat 2px 1px;
}

ol.number li.num4 {
	background: url("/image/common/ico_04.gif") no-repeat 2px 1px;
}




/* 新着お知らせ用
----------------------------------------------------------------------- */
.newInfoList {
	margin-bottom: 10px;
}

.newInfoList li {
	position: relative;
	margin: 0;
	padding: 0 0 1px 8px;
	margin-bottom: 9px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
	line-height: 15px;
}

.newInfoList li .icon {
	margin-left: 3px;
}

.newInfoList li span.date {
	position: absolute;
	right: 3px;
	font-size: 11px;
	font-family: Verdana, sans-serif;
}

.newInfoList a:link,
.newInfoList a:visited {
	color: #777;
	text-decoration: none;
}

.newInfoList a:hover {
	color: #777;
	text-decoration: underline;
}





/* 新着ブログ、友だち、お気に入り、伝言ボードリスト用
----------------------------------------------------------------------- */
.newBlogList,
.friendList,
.favoriteList,
.newMessageList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
}

.newBlogList .avatarImg,
.friendList .avatarImg,
.favoriteList .avatarImg,
.newMessageList .avatarImg {
	float: left;
	width: 68px;
	height: 68px;
	margin-left: 5px;
	_margin-left: 3px;
	padding: 2px 0 0 2px;
	background: url("/image/common/bg_avatarbust.gif") no-repeat;
}


.newBlogList dl,
.friendList dl,
.favoriteList dl,
.newMessageList dl {
	position: relative;
	padding-top: 5px;
	margin-left: 80px;
	height: 70px;
}

* html .newBlogList dl,
* html .friendList dl,
* html .favoriteList dl,
* html .newMessageList dl {
	\height /**/: 75px; /* IE5 */
}

.newBlogList dt,
.friendList dt,
.favoriteList dt,
.newMessageList dt {
	font-weight: normal;
	overflow: hidden;
	color: #978356;
	font-weight: bold;
}

.newBlogList dt a:link,
.friendList dt a:link,
.favoriteList dt a:link,
.newMessageList dt a:link,
.newBlogList dt a:visited,
.friendList dt a:visited,
.favoriteList dt a:visited,
.newMessageList dt a:visited {
	color: #978356;
	text-decoration: none;
}

.newBlogList dt a:hover,
.friendList dt a:hover,
.favoriteList dt a:hover,
.newMessageList dt a:hover {
	color: #978356;
	text-decoration: underline;
}


/* 08/29追加修正 */
.newBlogList dd.post {
	position: absolute;
	top: 4px;
	right: 3px;
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-weight: normal;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id {
	/*padding-top: 1px;
	padding-bottom: 5px;*/
	padding-top: 7px;
	padding-bottom: 1px;
	font-size: 11px;
}

.newBlogList dd.time,
.friendList dd.time,
.favoriteList dd.time,
.newMessageList dd.time {
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id span.category,
.newBlogList dd.time span.category {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	color: #999;
	border-left: 1px solid #ddd;
}


.newBlogList dd.title,
.friendList dd.title,
.favoriteList dd.title {
	overflow: hidden;
	padding-left: 11px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}

.newMessageList dd.comment {
	overflow: hidden;
	padding-left: 14px;
	background: url("/image/common/ico_comment.gif") no-repeat 0 4px;
}


/* 10/10追加修正 */
.friendList dt span.island {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 12px;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	color: #999;
	border-left: 1px solid #ddd;
}

.friendList dd.loginTime {
	padding-top: 2px;
	padding-bottom: 5px;
	font-size: 11px;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	color: #999;
}

.friendList dd.time span.loginTime {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	color: #999;
	border-left: 1px solid #ddd;
}

.friendList dd.profile {
	overflow: hidden;
	word-break: break-all;
	padding-left: 11px;
	padding-bottom: 10px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}



.newBlogList dd.id a:link,
.newBlogList dd.title a:link,
.friendList dd.title a:link,
.favoriteList dd.title a:link,
.newMessageList dd.title a:link,
.newBlogList dd.id a:visited,
.newBlogList dd.title a:visited,
.friendList dd.title a:visited,
.favoriteList dd.title a:visited,
.newMessageList dd.title a:visited {
	color: #777;
	text-decoration: none;
}

.newBlogList dd.id a:hover,
.newBlogList dd.title a:hover,
.friendList dd.title a:hover,
.favoriteList dd.title a:hover,
.newMessageList dd.title a:hover {
	color: #777;
	text-decoration: underline;
}



/* 新着ゲーム用
----------------------------------------------------------------------- */
.newGameList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
}

.newGameList .gameImg {
	float: left;
	width: 110px;
	height: 86px;
	padding: 0 0 0 5px;
}

.newGameList dl {
	position: relative;
	min-height: 92px;
	height: auto !important;
	height: 92px;
	margin-left: 125px;
	padding-top: 0;
}

.newGameList dt {
	font-size: 15px;
	line-height: 1.2;
	font-weight: bold;
	color: #a57968;
	margin-bottom: 3px;
}

.newGameList dt a,
.newGameList dt a:hover,
.newGameList dt a:visited {
	color: #978356;
	font-weight: bold;
	text-decoration: underline;
}

.newGameList dt .icon {
	margin-left: 3px;
}

.newGameList dd {
}


/* 09/11追加修正 */
.newGameList dd.howto {
	margin-top: 10px;
	padding-left: 12px;
	color: #777;
	background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
	font-size: 12px;
}

.newGameList dd.howto a:link,
.newGameList dd.howto a:visited {
	color: #777;
	text-decoration: none;
}

.newGameList dd.howto a:hover {
	color: #777;
	text-decoration: underline;
}






/* ボタンが横に３つ並ぶ時用
----------------------------------------------------------------------- */
ul.btnList {
	width: 100%;
	position:relative;
	clear: both;
}

ul.btnList li {
	float: left;
	text-align: center;
	width: 30%;
}

ul.btnList li.center {
	width: 40%;
}

ul.btnList li.right {
	width: 30%;
	text-align: right;
}



/* ボタンが横に２つ並ぶ時用
------------------------------------------- */
ul.btnList li.two {
	width: 50%;
}

ul.btnList li.main {
	width: 60%;
	text-align: right;
}

ul.btnList li.extra {
	width: 40%;
	text-align: right;
}



/* テキストボタンが左右に２つ並ぶ時用
------------------------------------------- */
ul.btnList li.next,
ul.btnList li.top {
	width: 50%;
	text-align: right;
}

ul.btnList li.prev {
	width: 50%;
	text-align: left;
}



/* 画像が右にに1つ並ぶ時用
------------------------------------------- */
ul.btnList li.rightImg {
	width: 100%;
	text-align: right;
}




/* カテゴリが横に並ぶ時用
----------------------------------------------------------------------- */
.categoryTxtNavi {
	text-align: center;
	line-height: 1.3;
}

.categoryTxtNaviL {
	text-align: left;
	line-height: 1.3;
}

.categoryTxtNavi li {
	display: inline;
	list-style-type: none;
	margin-right: 6px;
	padding-left: 10px;
	border-left:1px solid #999;
}

.categoryTxtNavi li.first {
	border-left: 0;
	padding-left: 0;
}

.categoryTxtNavi li a{
	color: #666;
}

.categoryTxtNavi li a:hover {
	color: #666;
	text-decoration: underline;
}




/* 注意書き用
----------------------------------------------------------------------- */
ul.noticeList {
	color: #666;
	font-size: 10px;
	line-height: 17px;
	letter-spacing: 1px;
}

ul.noticeList li{
	margin: 0;
	padding: 0 0 3px 8px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
}

ul.noticeList li .importance {
	color: #f00;
}

ul.noticeList li a {
	color: #999;
	text-decoration: underline;
}

ul.noticeList li a:hover {
	text-decoration: underline;
}




/* 横並びテキストリンク用
----------------------------------------------------------------------- */
ul.txtLinkList {
}


ul.txtLinkList li{
	float: left;
	padding: 0 20px 0 7px;
	background: url("/image/common/ico_list_info.gif") no-repeat 2px 7px;
}



/* ページング
----------------------------------------------------------------------- */
ul.pageNavi {
	clear: both;
	width: 100%;
	margin: 10px auto 0;
	padding: 0;
	text-align: center;
}

ul.pageNavi li {
	padding: 0 3px 0 5px;
	display: inline;
	border-left: 1px solid #ddd;
	font-size: 12px;
	font-family: verdana;
	text-align: center;
	line-height: 1.3;
	color: #ccc;
}

ul.pageNavitop {
	clear: both;
	width: 100%;
	margin: 10px auto 20px;
	padding: 0;
	text-align: center;
}

ul.pageNavitop li {
	padding: 0 3px 0 5px;
	display: inline;
	border-left: 1px solid #ddd;
	font-size: 12px;
	font-family: verdana;
	text-align: center;
	line-height: 1.3;
	color: #ccc;
}


/* アイコン設定 */
ul.pageNavi li.first {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.prev {
	padding-left: 20px;
	background: url("/image/common/ico_prev_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.next {
	padding-left: 20px;
	background: url("/image/common/ico_next_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.last {
	padding-left: 20px;
	background: url("/image/common/ico_last_on.gif") no-repeat 6px 0;
}

ul.pageNavi li.first_off {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first.gif") no-repeat 6px 0;
}

ul.pageNavi li.prev_off {
	padding-left: 20px;
	background: url("/image/common/ico_prev.gif") no-repeat 6px 0;
}

ul.pageNavi li.next_off {
	padding-left: 20px;
	background: url("/image/common/ico_next.gif") no-repeat 6px 0;
}

ul.pageNavi li.last_off {
	padding-left: 20px;
	background: url("/image/common/ico_last.gif") no-repeat 6px 0;
}

ul.pageNavi li.first,
ul.pageNavi li.prev,
ul.pageNavi li.next,
ul.pageNavi li.last,
ul.pageNavi li.first_off,
ul.pageNavi li.prev_off,
ul.pageNavi li.next_off,
ul.pageNavi li.last_off {
	\background: none; /* IE5 */
}

html>/**/body ul.pageNavi li.first,
html>/**/body ul.pageNavi li.prev,
html>/**/body ul.pageNavi li.next,
html>/**/body ul.pageNavi li.last,
html>/**/body ul.pageNavi li.first_off,
html>/**/body ul.pageNavi li.prev_off,
html>/**/body ul.pageNavi li.next_off,
html>/**/body ul.pageNavi li.last_off {
	background-position: 6px 2px; /* IE7を除くモダンブラウザ */
}

ul.pageNavitop li.first {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.prev {
	padding-left: 20px;
	background: url("/image/common/ico_prev_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.next {
	padding-left: 20px;
	background: url("/image/common/ico_next_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.last {
	padding-left: 20px;
	background: url("/image/common/ico_last_on.gif") no-repeat 6px 0;
}

ul.pageNavitop li.first_off {
	padding-left: 20px;
	border-left: none;
	background: url("/image/common/ico_first.gif") no-repeat 6px 0;
}

ul.pageNavitop li.prev_off {
	padding-left: 20px;
	background: url("/image/common/ico_prev.gif") no-repeat 6px 0;
}

ul.pageNavitop li.next_off {
	padding-left: 20px;
	background: url("/image/common/ico_next.gif") no-repeat 6px 0;
}

ul.pageNavitop li.last_off {
	padding-left: 20px;
	background: url("/image/common/ico_last.gif") no-repeat 6px 0;
}

ul.pageNavitop li.first,
ul.pageNavitop li.prev,
ul.pageNavitop li.next,
ul.pageNavitop li.last,
ul.pageNavitop li.first_off,
ul.pageNavitop li.prev_off,
ul.pageNavitop li.next_off,
ul.pageNavitop li.last_off {
	\background: none; /* IE5 */
}

html>/**/body ul.pageNavitop li.first,
html>/**/body ul.pageNavitop li.prev,
html>/**/body ul.pageNavitop li.next,
html>/**/body ul.pageNavitop li.last,
html>/**/body ul.pageNavitop li.first_off,
html>/**/body ul.pageNavitop li.prev_off,
html>/**/body ul.pageNavitop li.next_off,
html>/**/body ul.pageNavitop li.last_off {
	background-position: 6px 2px; /* IE7を除くモダンブラウザ */
}

/* リンク時設定 */
ul.pageNavi li a,
ul.pageNavi li a:visited {
	color: #858585;
}

ul.pageNavi li a:hover {
	color: #333;
	text-decoration: underline;
}

ul.pageNavi li.now a {
	color: #666;
	font-weight: bold;
}

/* リンク時設定 */
ul.pageNavitop li a,
ul.pageNavitop li a:visited {
	color: #858585;
}

ul.pageNavitop li a:hover {
	color: #333;
	text-decoration: underline;
}

ul.pageNavitop li.now a {
	color: #666;
	font-weight: bold;
}



/* clearfix
------------------------------------------- */
.newBlogList:after,
.friendList:after,
.favoriteList:after,
.newGameList:after,
ul.btnList:after,
ul.noticeList:after,
ul.txtLinkList:after,
ul.pageNavi:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}





/* ----------------------------------------------------------------------
  04. ボックス用
---------------------------------------------------------------------- */

/* 囲み
------------------------------------------- */
.box-outer {
	width: 100%;
	margin-bottom: 10px;
}

.box-outer_last {
	width: 100%;
	margin-bottom: 0;
}


.box-outer-underline {
	width: 100%;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
}



/* バナー用囲み
------------------------------------------- */
.bannerBox {
	margin-bottom: 10px;
}

.bannerBox_last {
	margin-bottom: 0;
}

.bannerBox iframe,
.bannerBox_last iframe,
.bannerBox img,
.bannerBox_last img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	line-height: 1;
}

/* 幅320px ２カラム
------------------------------------------- */
.box320_l {
	width: 320px;
	float: left;
}

.box320_r {
	width: 320px;
	float: right;
}



/* 幅400px ２カラム
------------------------------------------- */
.box400_l {
	width: 400px;
	float: left;
}

.box400_r {
	width: 400px;
	float: right;
}

.box240_r {
	width: 240px;
	float: right;
}



/* パディングボックス
------------------------------------------- */
.pad5 {
	padding: 5px;
}

.pad10 {
	padding: 10px;
}



/* 枠線ボックス
------------------------------------------- */
.borderBox {
	border: 1px solid #ccc;
	padding: 10px;
}

.borderBoxHelp {
	border: 1px solid #ccc;
	padding: 10px;
	background-color:#fffcf3;
}


/* カラーボックス
------------------------------------------- */
.boxGray {
	margin-bottom: 10px;
	padding: 7px;
	border: 1px solid #ccc;
	background-color: #eee;
}




/* clearfix
------------------------------------------- */
.box-outer:after,
.box-outer_last:after,
.box-outer-underline:after,
.box-outer_mb:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}






/* ----------------------------------------------------------------------
  05. #contentsArea用
---------------------------------------------------------------------- */






/* ----------------------------------------------------------------------
  06. #extraArea用
---------------------------------------------------------------------- */

#extraArea h2 {
	margin-bottom: 10px;
}

#extraArea .localNavi {
	margin-bottom: 10px;
}

#extraArea .localNavi li {
	margin-bottom: 1px;
}