@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,
.skinBlock,
body{
color:#333;			/* 【CSS規則】colorのみ指定可能 */
}

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

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

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

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

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


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

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

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


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


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



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

.skinArticleBody{
color:#393939;
}

.skinArticleBody a{
color:#4f60a6;
}

.skinArticleBody a:visited{
color:#1b8a9e;
}

.skinArticleBody a:focus,
.skinArticleBody a:hover{
color:#4f60a6;
}

.skinArticleWeakColor{
color:#8b99b6;
}

.skinArticleStrongColor{}



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

/*
.skinSubArea,
.skinSubArea .skinTextColor,
.skinSubTextColor,
.skinSubBlock{}

.skinSubArea a,
.skinSubArea .skinAnchorColor,
.skinSubAnchorColor,
.skinSubBlock a{}

.skinSubArea a:visited,
.skinSubArea .skinAnchorVisitedColor,
.skinSubAnchorVisitedColor,
.skinSubBlock a:visited{}

.skinSubArea a:focus,
.skinSubArea a:hover,
.skinSubArea .skinAnchorHoverColor,
.skinSubAnchorHoverColor,
.skinSubBlock a:focus,
.skinSubBlock a:hover{}

.skinSubArea .skinWeakColor,
.skinSubWeakColor{}

.skinSubArea .skinStrongColor,
.skinSubStrongColor{}
*/





/* 【D 枠の外の配色 】
============================================*/
/*
 *
 * 記事やサイドが枠で囲われているデザインで、
 * 枠の外の文字の可読性が低い場合に文字の色か、文字の背景を指定する
 *

.skinFieldBlock a,
.skinFieldBlock a:visited,
.skinFieldBlock a:focus,
.skinFieldBlock a:hover,
.skinFieldBlock {}

 *
 * 記事一覧
 * ※visited hover時の色にも注意
 *
.skinPagingListColor{
color: !important;
}

*/



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

 ボタンのスタイル

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


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

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

/* 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_white.png);/* アイコン画像を指定 */
color:#fff;
}
/*
ボタンのアイコン画像

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 #2f3757;*/
background:#666;
color:#fff !important;
}
.skinSimpleBtn:hover,
.skinSimpleBtn:focus{
background:#aaa;
}



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

 ブロックごとのスタイル

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


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

/* skinBody bodyの代わり（アメーババー含む） */
.skinBody{/* 【簡単カスタム対象】 */
background: url(../img/body_bk.png);
}
/*
.skinBody2{
background:url(../img/body3_bk.png) repeat-x 0 100%;
}
*/
.skinBody3{
padding-bottom:118px;
background:url(../img/footer_bk.png) repeat-x 50% 100%;
}



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

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



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

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

/* skinHeaderFrame 広告もブログタイトルも囲う横幅のないヘッダーフレーム */
.skinHeaderFrame{
width:980px;
min-height:244px;
height:auto !important;
height:244px;
margin:0 auto;
/*background:url(../img/header_bk.png) no-repeat 100% 14px; */
}

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

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

/* skinTitleArea ブログタイトルのブロック */
.skinTitleArea{
padding-bottom:10px;
}

/* skinTitle ブログタイトル文字【簡単カスタム対象】 */
.skinTitle,
.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#333;
font-weight:bold;
font-size:2.11em;
}

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

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


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

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

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


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

.skinMainArea{
}


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

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
padding-top:20px;
background-color: #fff;
border:1px solid #ddd;
}
.skinMessageBoard2{
padding-bottom:20px;
}
.skinMessageBoard3{
padding:0px 26px;
}

/*
.columnA .skinMessageBoard,
.columnB .skinMessageBoard{
background:url(../img/msg2_bg.png) no-repeat 50% 0;
}
.columnA .skinMessageBoard2,
.columnB .skinMessageBoard2{
background:url(../img/msg2_bg.png) no-repeat 50% 100%;
}
.columnA .skinMessageBoard3,
.columnB .skinMessageBoard3{
}
*/

/* カラム別の記述
.columnC .skinMessageBoard,
.columnD .skinMessageBoard,
.columnE .skinMessageBoard{}
*/



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

/* skinArticle 記事ブロック */
.skinArticle{
/* 注　blog.cssに margin-bottom の記述有り */
/*background:#fff url(../img/main_top.png) no-repeat 100% 20px;*/
background-color:#fff;
}
.columnA .skinArticle,
.columnB .skinArticle{
}
.skinArticle2{
border: 1px solid #ddd;
}
.columnA .skinArticle2,
.columnB .skinArticle2{
}
.skinArticle3{
}

/* カラム別の記述
.columnA .skinArticle,
.columnB .skinArticle{}
.columnC .skinArticle,
.columnD .skinArticle,
.columnE .skinArticle{}
*/


/* skinArticleHeader 記事ヘッダーブロック */
.skinArticleHeader{
display:table-cell;
height:38px;
padding:30px 78px 26px 26px;
vertical-align:middle;
}

*:first-child+html .skinArticleHeader{
display:inline;
zoom:1;
}

.skinArticleHeader2{}


/* skinArticleTitle 記事ヘッダー文字 */
.skinArticleTitle,
.skinArticleTitle:hover,
.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:1.24em;
font-weight:bold;
color:#333;
line-height:1.3;
}


/* skinArticleBody 記事本文ブロック */
/*
 * 【デザイン規則】記事の中身の横幅は 2カラム 605px、3カラム 410pxになるように
 */
.skinArticleBody{
*zoom:1;
}
.skinArticleBody:before,
.skinArticleBody:after {
content:" ";
display:table;
}
.skinArticleBody:after {
clear:both;
}

.columnA .skinArticleBody,
.columnB .skinArticleBody{
}
.skinArticleBody2{
margin:0 30px 10px;
}


/* skinArticleFooter 記事フッターブロック */
.skinArticleFooter{
margin:0 30px;
}
.columnA .skinArticleFooter,
.columnB .skinArticleFooter{}

.articleLinkArea{
margin:0;
padding:10px 0 0;
}


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

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



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

/* skinMenu サイドメニューのブロック */
.skinMenu{
/* 注　blog.cssに margin-bottom の記述有り */
border:1px solid #ddd;
background:#fff;
}
.skinSubB .skinMenu{
}
.skinMenu2{
/*background:url(../img/stit.png) no-repeat 0 6px; */
}

/* subA subB別の記述
.skinSubA .skinMenu{}
.skinSubB .skinMenu{}
*/

/* skinMenuHeader サイドメニューヘッダー */
.skinMenuHeader{
padding:12px 0 4px 20px;
color:#333;
font-weight:bold;
}

/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}



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


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

/* skinSubA skinSubBで違う場合*/

.skinSubA .skinSubHr,
.skinSubA .skinSubList li{}

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


/* カスタムエリア
--------------------------------------------*/
.designSelectBtnArea{
*zoom:1;
}
.designSelectBtnArea:before,
.designSelectBtnArea:after {
content:" ";
display:table;
}
.designSelectBtnArea:after {
clear:both;
}

.bnrRope{
display:block;
float:left;
}
.bnrLotta{
display:block;
float:right;
}