@charset "utf-8";
/*--------------------------------------------------
skin.css
$Id: skin.css,v 1.29 2011/08/18 06:49:12 oyama_yuichi Exp $
--------------------------------------------------*/

/*TOC===============================================

カラー設定
	A 基本カラー設定
	B 記事/メッセージ　カラー設定
	C サイドバー　カラー設定
	D 枠の外の配色
ボタンのスタイル
ブロックごとのスタイル

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




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

　カラー設定

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


/* 【A　基本カラー設定】
============================================*/

/* テキスト色
--------------------------------------------*/

/* 地色テキスト */
.skinTextColor,
.skinBaseTextColor,
body{
color:#FFFFFF;			/* 【CSS規則】colorのみ指定可能 */
}

.skinBlock{
color:#000000;			/* 【CSS規則】colorのみ指定可能 */
}

/* リンク色（基本） */
.skinAnchorColor,
.skinBaseAnchorColor,
.skinBlock a,
a{
color:#FFFF99;			/* 【CSS規則】colorのみ指定可能 */
}


/* リンク色（visited） */
.skinAnchorVisitedColor,
.skinBaseAnchorVisitedColor,
.skinBlock a:visited,
a:visited{
color:#FFFF99;			/* 【CSS規則】colorのみ指定可能 */
}


/* リンク色（hover） */
.skinAnchorHoverColor,
.skinBaseAnchorHoverColor,
.skinBlock a:focus,
.skinBlock a:hover,
a:focus,
a:hover{
color:#fcf;			/* 【CSS規則】colorのみ指定可能 */
}


/* 淡　テキスト色 */
.skinWeakColor,
.skinBaseWeakColor{
color:#666666;			/* 【CSS規則】colorのみ指定可能 */
}


/* 強調　テキスト色 */
.skinStrongColor,
.skinBaseStrongColor{
color:#C0012D;			/* 【CSS規則】colorのみ指定可能 */
}




/* 背景色
--------------------------------------------*/
/* 背景色 */
.skinBgColor,
.skinBaseBgColor{
background-color:#CCCCCC;		/* 【CSS規則】background-colorのみ指定可能 */
}

.skinBlock{
background-color:#CCCCCC;		/* 【CSS規則】background-colorのみ指定可能 */
}

.skinSubA2 .skinBlock{
background-color:#67c2c3;		/* 【CSS規則】background-colorのみ指定可能 */
}


/* 淡　背景色 */
.skinWeakBgColor,
.skinBaseWeakBgColor{
background-color:#E7E7E7;	/* 【CSS規則】background-colorのみ指定可能 */
}


/* 強調　背景色 */
.skinStrongBgColor,
.skinBaseStrongBgColor{
background-color:#BBBBBB;	/* 【CSS規則】background-colorのみ指定可能 */
}



/* 枠線色（一覧ページの枠線色など）
--------------------------------------------*/
.skinBorderColor,
.skinBaseBorderColor{
border-color:#FFFFFF;		/* 【CSS規則】border-colorのみ指定可能 */
}

.skinBlock{
border-color:#343434;
}

.skinSubA2 .skinBlock{
border-color:#ffff99;
}

.blogComment{
background-color:#e7e7e7;
}

/* リスト境界線色（メインカラム一覧ページのリストなど　※サイドバー内のリスト境界線色は別）
--------------------------------------------*/
.skinBorderHr,
.skinBorderList li{
border-color:#FFFFFF;	/* 【CSS規則】border-colorのみ指定可能 */
}





/* 【B　記事/メッセージ　カラー設定】
============================================*/
/*
 *
 * ※基本カラー設定と配色を変える箇所のみ指定
 * ※テキストの色のみ
 *
 */


.skinMainArea,
.skinMainArea .skinTextColor,
.skinArticleBlock{
color:#000000;
}

.skinMainArea .skinAnchorColor,
.skinArticleAnchorColor,
.skinMainArea a,
.skinArticleBlock a{
color:#3366FF;
}

.skinMainArea .skinAnchorVisitedColor,
.skinArticleAnchorVisitedColor,
.skinMainArea a:visited,
.skinArticleBlock a:visited{
color:#3366FF;
}

.skinMainArea .skinAnchorHoverColor,
.skinArticleAnchorHoverColor,
.skinMainArea a:focus,
.skinMainArea a:hover,
.skinArticleBlock a:focus,
.skinArticleBlock a:hover{
color:#AA71FF;
}

/*
.skinMainArea .skinWeakColor,
.skinArticleWeakColor{}

.skinMainArea .skinStrongColor,
.skinArticleStrongColor{}
*/





/* 【C　サイドバー　カラー設定】
============================================*/
/*
 *
 * ※基本カラー設定と配色を変える箇所のみ指定
 * ※テキストの色のみ
 *
 */


.skinSubArea .skinMenu2,
.skinSubArea .skinMenu2 .skinTextColor,
.skinSubTextColor .skinMenu2,
.skinSubBlock .skinMenu2{
color:#000000;
}

.skinSubArea .skinMenu2 a,
.skinSubArea .skinMenu2 .skinAnchorColor,
.skinSubAnchorColor.skinMenu2,
.skinSubBlock .skinMenu2 a{
color:#3366FF;
}

.skinSubArea .skinMenu2 a:visited,
.skinSubArea .skinMenu2 .skinAnchorVisitedColor,
.skinSubAnchorVisitedColor .skinMenu2,
.skinSubBlock .skinMenu2 a:visited{
color:#3366FF;
}

.skinSubArea .skinMenu2 a:focus,
.skinSubArea .skinMenu2 a:hover,
.skinSubArea .skinMenu2 .skinAnchorHoverColor,
.skinSubAnchorHoverColor .skinMenu2,
.skinSubBlock .skinMenu2 a:focus,
.skinSubBlock .skinMenu2 a:hover{
color:#AA71FF;
}
/*
.skinSubArea .skinWeakColor,
.skinSubWeakColor{}

.skinSubArea .skinStrongColor,
.skinSubStrongColor{}
*/




/* 【D 枠の外の配色 】
============================================*/

 /*
 * センテキ文字
 */
.skinFieldBlock {
color:#ffff99;
}

.skinFieldBlock a,
.skinFieldBlock a:visited{
color:#ffff99;
}

.skinFieldBlock a:focus,
.skinFieldBlock a:hover{
color:#ff66cc;
}

 /*
 * ブログ画像一覧を見る
 * 記事一覧
 */
.imagelistLink,
.skinPagingListColor{
color:#ffff99 !important;
}

.imagelistLink a,
.skinPagingListColor a,
.imagelistLink a:visited,
.skinPagingListColor a:visited{
color:#ffff99 !important;
}

.imagelistLink a:focus,
.skinPagingListColor a:focus,
.imagelistLink a:hover,
.skinPagingListColor a:hover{
color:#ff66cc !important;
}

 /*
 * 気になるキーワード
 */
#resPointArea{
color:#FFFFFF !important;
}

#resPointArea a,
#resPointArea a:visited{
color:#ffff99 !important;
}

#resPointArea a:focus,
#resPointArea a:hover{
color:#ff66cc
}



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

 ボタンのスタイル

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


/* skinImgBtn 読者になるなどのボタン
--------------------------------------------*/

/* skinImgBtnM (180px) */
.skinImgBtnM{
background-image:url(../img/skin_btn_m.png);
}
.skinImgBtnM:hover span,
.skinImgBtnM:focus span,
.skinImgBtnM span{
color:#3070b3;
}


/* skinImgBtnS (128px) */
.skinImgBtnS{
background-image:url(../img/skin_btn_s.png);
}
.skinImgBtnS:hover span,
.skinImgBtnS:focus span,
.skinImgBtnS span{
background-image:url(//stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_pastel.png);/* アイコン画像を指定 */
color:#3070b3;
}
/*
ボタンのアイコン画像

menu_icons_pastel.png
menu_icons_gray.png
menu_icons_black.png
menu_icons_white.png
*/



/* skinSimpleBtn ページングの次へ、前へボタン
--------------------------------------------*/

.skinSimpleBtn,
.skinSimpleBtn:visited,
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
border:1px solid #FFFF99;
background:#67C2C3;
color:#FFFF99 !important;
}
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
background:#00385D;
}







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

 ブロックごとのスタイル

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


/* ボディ　【CSS規則】bodyタグ自体にはスタイルをあてない
--------------------------------------------*/

/* skinBody bodyの代わり（アメーババー含む） */
.skinBody{/* 【簡単カスタム対象】 */
background:url(../img/body_bk.gif) center top;}
.skinBody2{}
.skinBody3{padding-bottom:100px;}



/* skinFrame ブログ全体を囲うブロック
--------------------------------------------*/
/* （ヘッダーバナー含む） */
.skinFrame{
padding-top:22px;
}

/* （ヘッダーバナー含まない） */
.skinFrame2{

    margin: 0 auto;
    padding: 0 25px;

}



/* ヘッダー
--------------------------------------------*/

/*
 * .headerBnrArea 広告が出力されるエリア
 * 広告が出力されないときも、高さを維持したい時に使う
 *
 */
.headerBnrArea{
/* 注 blog.cssにpadding-bottom:15px;記述有り */
}


/* skinHeaderFrame 広告もブログタイトルも囲う横幅のないヘッダーフレーム */
.skinHeaderFrame{
width: 1081px;
height: 428px;
background:url(../img/header_bk.png) no-repeat center top;
margin:0 auto;
padding-bottom: 29px
}


/* skinHeaderArea ブログヘッダー */
.skinHeaderArea{/*【簡単カスタム対象】*/
/* 注 blog.cssにwidth:980px;の記述有り */
/* 【簡単カスタム対象】注 paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
}
.skinHeaderArea2{
/* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
}


/* skinBlogHeadingGroupArea 【簡単カスタム対象】*/
.skinBlogHeadingGroupArea{
display:table-cell;
padding: 0 490px 0 20px;/* 【簡単カスタム対象】ブログタイトルと説明のpaddingのみ指定可能 */
}


/* skinTitleArea ブログタイトルのブロック */
.skinTitleArea{}


/* skinTitle ブログタイトル文字【簡単カスタム対象】 */
.skinTitle,
.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#FFFF66;
font-weight: 400;
font-size:23px;
line-height: 1em;
}


/* skinDescription ブログの説明ブロック */
.skinDescriptionArea{
}

/* skinDescription ブログの説明文字【簡単カスタム対象】 */
.skinDescription{
color:#FFFFFF;
}



/* コンテンツエリア
--------------------------------------------*/

/* skinContentsFrame コンテンツを囲う横幅の無いフレーム */
.skinContentsFrame{}

/* skinContentsArea コンテンツ980pxブロック */
.skinContentsArea{}
/* 注 blog.cssに width:980px;, padding-bottom の記述有り */



/* メインエリア
--------------------------------------------*/

.skinMainArea{}



/* メッセージボード
--------------------------------------------*/

.columnC .skinMessageBoard,
.columnD .skinMessageBoard,
.columnE .skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
background: url(../img/msg_s.png) no-repeat top center;
}

.columnA .skinMessageBoard,
.columnB .skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
background: url(../img/msg_m.png) no-repeat top center;
}

.columnA .skinMessageBoard2,
.columnB .skinMessageBoard2{
/* 注 blog.cssに margin-bottom の記述有り */
background: url(../img/msg_m.png) no-repeat bottom center;
padding:45px 30px;
color:#ffffff !important;
}

.columnC .skinMessageBoard2,
.columnD .skinMessageBoard2,
.columnE .skinMessageBoard2{
/* 注 blog.cssに margin-bottom の記述有り */
background: url(../img/msg_s.png) no-repeat bottom center;
padding:45px 30px;
color:#ffffff !important;
}

.skinMessageBoard3 a,
.skinMessageBoard3 a:visited{
color:#ffff99 !important;
}

.skinMessageBoard3 a:hover,
.skinMessageBoard3 a:focus{
color:#ff66cc !important;
}


/* 記事
--------------------------------------------*/

/* skinArticle 記事ブロック */


.columnA .skinArticle3,
.columnB .skinArticle3{background: url(../img/main_bot_2col.png) no-repeat center bottom;padding: 0 0 54px;}

.columnC .skinArticle3,
.columnD .skinArticle3,
.columnE .skinArticle3{background: url(../img/main_bot_3col.png) no-repeat center bottom;padding: 0 0 54px;}


/* skinArticleHeader 記事ヘッダーブロック */
.columnA .skinArticleHeader,
.columnB .skinArticleHeader{
background: url(../img/main_top_2col.png) no-repeat center top;
padding-left: 60px;
display: table-cell;
vertical-align: middle;
width: 605px;
height: 73px;
}

.columnC .skinArticleHeader,
.columnD .skinArticleHeader,
.columnE .skinArticleHeader{
background: url(../img/main_top_3col.png) no-repeat center top;
padding-left:60px;
display: table-cell;
width: 410px;
height: 73px;
}

.columnA .skinArticleHeader2,
.columnB .skinArticleHeader2{
width: 440px;
margin-top: 29px;
}


.columnC .skinArticleHeader2,
.columnD .skinArticleHeader2,
.columnE .skinArticleHeader2{
width: 350px;
margin-top: 29px;
}


/* skinArticleTitle 記事ヘッダー文字 */
.skinArticleTitle,
.skinArticleTitle:hover,
.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:1.1em;
font-weight:bold;
color:#FFFFFF!important;
}


/* skinArticleBody 記事本文ブロック */
/*
 * 【デザイン規則】記事の中身の横幅は 2カラム 605px、3カラム 410pxになるように
 */
.columnA .skinArticleBody,
.columnB .skinArticleBody{
background: url(../img/main_mid_2col.png) repeat-y center top;
}
.columnC .skinArticleBody,
.columnD .skinArticleBody,
.columnE .skinArticleBody{
background: url(../img/main_mid_3col.png) repeat-y center top;
}


.columnA .skinArticleBody2,
.columnB .skinArticleBody2{
background: url(../img/main_midbg_2col.png) no-repeat center bottom;
padding: 0 32px 10px 28px;
zoom:1;
}
.columnC .skinArticleBody2,
.columnD .skinArticleBody2,
.columnE .skinArticleBody2{
background: url(../img/main_midbg_3col.png) no-repeat center bottom;
padding: 0 32px 10px 28px;
zoom:1;
}


/* skinArticleFooter 記事フッターブロック */
.skinArticleFooter{
border-bottom:1px dotted #A7A8AA;
padding:15px 0 5px;
}




/* サイドエリア
--------------------------------------------*/

.skinSubArea {}/* 共通 */
.skinSubA{}/* (300px) */
.skinSubB{}/* (180px) */





/* サイド　メニュー
--------------------------------------------*/


/* skinMenu サイドメニューのブロック */
.skinMenu{
/* 注　blog.cssに margin-bottom の記述有り */
margin-bottom:30px;
}
.skinMenu2{}

/* subA subB別の記述
.skinSubA .skinMenu{}
.skinSubB .skinMenu{}
*/
/* skinMenu2 */
.skinSubA .skinMenu2{
background:url(../img/side_a_bot.png) no-repeat center bottom;
padding-bottom: 17px;
}
.skinSubB .skinMenu2{
background:url(../img/side_b_bot.png) no-repeat center bottom;
padding-bottom: 17px;
}


/* skinMenuHeader サイドメニューヘッダー */
/*
 * 【デザイン規則】サイドバーの中身の横幅は subA 260px、subB 140px
 */
.skinSubA .skinMenuHeader{
height: 42px;
padding-top: 17px;
background: url(../img/side_a_top.png) no-repeat left top;
}
.skinSubB .skinMenuHeader{
height: 42px;
padding-top: 17px;
background: url(../img/side_b_top.png) no-repeat left top;
}


/* skinMenuBody サイドメニュー本文ブロック */
.skinSubA .skinMenuBody{
background:url(../img/side_a_mid.png) no-repeat center bottom;
background-color: #EEEEEE;
padding: 0 20px;
min-height: 60px;
}
.skinSubB .skinMenuBody{
background:url(../img/side_b_mid.png) no-repeat center bottom;
background-color: #EEEEEE;
padding: 0 20px;
min-height: 60px;
}



/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
color:#3070b3;
font-weight: bold;
margin:20px;
}



/* skinMenuBody サイドメニュー本文ブロック */
/*
 * 【デザイン規則】サイドバーの中身の横幅は subA 260px、subB 140px
 */
.skinMenuBody{
padding:10px;
}





/* サイドバーのリスト、境界線
--------------------------------------------*/
/*
 * 【CSS規則】
 * ・要素の下に表示すること
 * ・境界線が持つ余白（margin-bottom, padding-bottom）も設定すること
 *
 */
.skinSubHr,
.skinSubList li{
margin-bottom:3px;
padding-bottom:8px;
border-bottom:1px solid #CCCCCC;
}

/* skinSubA skinSubBで違う場合
.skinSubA .skinSubHr,
.skinSubA .skinSubList li{}

.skinSubB .skinSubHr,
.skinSubB .skinSubList li{}
*/