@charset "utf-8";
/*--------------------------------------------------
skin.css
$Id: skin.css,v 1.18 2011/10/27 04:45:43 moteki_miyuki_gn Exp $
--------------------------------------------------*/

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

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




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

　カラー設定

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


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

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

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


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


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


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


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


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




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


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


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



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



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





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

/*
.skinMainArea,
.skinMainArea .skinTextColor,
.skinArticleTextColor,
.skinArticleBlock{}

.skinMainArea .skinAnchorColor,
.skinArticleAnchorColor,
.skinMainArea a,
.skinArticleBlock a{}

.skinMainArea .skinAnchorVisitedColor,
.skinArticleAnchorVisitedColor,
.skinMainArea a:visited,
.skinArticleBlock a:visited{}

.skinMainArea .skinAnchorHoverColor,
.skinArticleAnchorHoverColor,
.skinMainArea a:focus,
.skinMainArea a:hover,
.skinArticleBlock a:focus,
.skinArticleBlock a:hover{}

.skinMainArea .skinWeakColor,
.skinArticleWeakColor{}

.skinMainArea .skinStrongColor,
.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 {}

 */

.skinFieldBlock {
background-color:#fff;
margin-top:10px;
padding:10px;
}



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

 ボタンのスタイル

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


/* (2-2) アイコン付きボタン[横128px 縦28px]
--------------------------------------------*/


/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */
.skinImgBtnS{
/*background-image:url(//stat100.ameba.jp/p_skin/wu_pf_cssedit/img/skin_btn_s.png);*/
background:#ff679a;
border:none;
/* border-radius */
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;

}
.skinSubArea .skinImgBtnS{background: #ff679a;}


.skinImgBtnS:hover span,.skinImgBtnS:focus span,.skinImgBtnS span{
/*
 アイコン画像は下記から指定
 menu_icons_pastel.png (パステル）
 menu_icons_gray.png（グレー）
 menu_icons_black.png（黒）
 menu_icons_white.png（白）
*/
background-image:url(//stat100.ameba.jp/common_style/img/skin/cmn/icons/menu_icons/menu_icons_white.png);
color:#ffffff !important;/* ←ボタンの文字色 */
}




/* (2-3) ページ送りボタンの  << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/


.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #ff679a;
background:#ffffff;
color:#ec5286 !important;
/* box-shadow */
box-shadow:rgb(255, 103, 154) 2px 2px 0px 1px;
-webkit-box-shadow:rgb(255, 103, 154) 2px 2px 0px 1px;
-moz-box-shadow:rgb(255, 103, 154) 2px 2px 0px 1px;
/* border-radius */
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
}


/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
background:#b7793c;
color: #ffffff !important;
/*border: 1px solid #d4d8ce;*/
}






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

 ブロックごとのスタイル

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


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

/* skinBody bodyの代わり */
.skinBody{/* 【簡単カスタム対象】 */
background:#ff7eb0;
}
.skinBody2{}
.skinBody3{}


/* skinFrame 横幅を指定したいときなどに使うフレーム */
.skinFrame{}



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

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


/* skinHeaderFrame 広告もブログタイトルも囲う横幅のないヘッダーフレーム */
.skinHeaderFrame{}


/* skinHeaderArea ブログヘッダー */
.skinHeaderArea{/*【簡単カスタム対象】*/
/* 注 blog.cssにwidth:980px;の記述有り */
/* 【簡単カスタム対象】注 paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
background:url(//stat100.ameba.jp/p_skin/w_officialskin/mayn-blog/img/header.jpg) no-repeat top left;
width: 980px;
margin:0 auto;
}
.skinHeaderArea2{
/* 【簡単カスタム対象】注 margin,paddingの指定禁止 .skinBlogHeadingGroupAreaに指定すること*/
}


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


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

.skinTitleArea a{
display:block;
width:980px;
height:400px;
text-indent:-9999px;
}


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


/* skinDescription ブログの説明ブロック */
.skinDescriptionArea{
	display: none;
}

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



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

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


/* skinContentsArea コンテンツ980pxブロック */
.skinContentsArea{
background:#ffffff;
}



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

.skinMainArea{
padding:15px 0 0 0;
}



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

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
border:none;
background:none;
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:0 15px;
}

/* カラム別の記述
.columnA .skinMessageBoard,
.columnB .skinMessageBoard{}

.columnC .skinMessageBoard,
.columnD .skinMessageBoard,
.columnE .skinMessageBoard{}
*/




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

/* skinArticle 記事ブロック */
.skinArticle{
/* 注　blog.cssに margin-bottom の記述有り */
margin:0 15px;
padding:15px 0;
border:none;
background:none;
}
.skinArticle2{}
.skinArticle3{}

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

.columnC .skinArticle,
.columnD .skinArticle,
.columnE .skinArticle{}
*/


/* skinArticleHeader 記事ヘッダーブロック */
.skinArticleHeader{
margin:0 auto;
padding:0 0 5px 0;
border-left:none;
border-bottom:1px dotted #fcaedb;
}
.skinArticleHeader2{}


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


/* skinArticleBody 記事本文ブロック */
/*
 * 【デザイン規則】記事の中身の横幅は 2カラム 605px、3カラム 410pxになるように
 */
.skinArticleBody{}
.skinArticleBody2{
margin:0 auto;
}


/* skinArticleFooter 記事フッターブロック */
.skinArticleFooter{
margin:10px auto 0;
border-top:1px dotted #cccccc;
}




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

.skinSubArea {
padding:15px 0 0 0;
}/* 共通 */

.skinSubA{
width:310px !important;
}/* (300px) */

.skinSubB{
width:190px !important;
}/* (180px) */

.skinSubArea a:link{color: #ff0000;}
.skinSubArea a:visited{color: #cc0000;}
.skinSubArea a:hover{color: #ff5555;}



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


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

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



/* skinMenuHeader サイドメニューヘッダー */
.skinMenuHeader{
height:30px;
padding:0;
background:url(//stat100.ameba.jp/p_skin/w_officialskin/mayn-blog/img/menu.png) no-repeat;
}


.profileMenu .skinMenuHeader{background-position:0px 0px;}
.recentEntriesMenu .skinMenuHeader{background-position:0px -30px;}
.themeMenu .skinMenuHeader{background-position:0px -60px;}
.calendarMenu .skinMenuHeader{background-position:0px -90px;}
.archiveMenu .skinMenuHeader{background-position:0px -120px;}
.bookmarkMenu .skinMenuHeader{background-position:0px -150px;}
.readerMenu .skinMenuHeader{background-position:0px -180px;}
.favoriteMenu .skinMenuHeader{background-position:0px -210px;}


/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
display:block;
text-indent:-9999px;
}



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



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

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

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


.blogSearchForm {
margin:20px auto;
}

#ameblo {
margin: 0 0 0 5px;
}

.skinFieldBlock{background: none;}

#officialGnere dd{margin-left: 0px;}

.officialBloggerRibbon {margin-bottom: 7px;}

#ameblo dd {margin-left: 0px;}