@charset "utf-8"; 
/*----------------------------------------- 
 【CSS編集 目次】 

　(1) 文字のスタイル 

　(2) ボタンのスタイル 

　(3) エリアのスタイル 

　(4) その他、拡張 

  ※CSS編集で広告を修正しないでください 
  （規約違反に該当する可能性があります） 

-----------------------------------------*/ 
/* 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

　(1) 文字のスタイル 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 
*/ 

/* (1-1) 全体の文字 
--------------------------------------------*/ 

/* 通常文字 */ 

.skinTextColor,.skinBaseTextColor,.skinBlock,body{ 

color:#333333; 

} 

/* リンク */ 

.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{ 

color:#0066cc; 

} 

/* 訪問済のリンク */ 

.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{ 

color:#996699; 

} 

/* マウスオーバーしたときのリンク */ 

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{ 

color:#ff3366; 

} 

/* 弱い文字 （日付など）*/ 

.skinWeakColor,.skinBaseWeakColor{ 

color:#999999; 

} 

/* 強い文字 （NEW! 更新!など）*/ 

.skinStrongColor,.skinBaseStrongColor{ 

color:#ff3399; 

} 

/* (1-2) ブログタイトル文字 
--------------------------------------------*/ 

/* skinTitle ブログタイトル文字 */ 

.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{ 

color:#000000; 
font-weight:bold; 
font-size:4.11em; 
} 

/* skinDescription ブログの説明文字 */ 

.skinDescription{ 
color:#333333; 
} 


/* (1-3) 記事／メッセージボード内の文字のスタイル 
--------------------------------------------*/ 

/* skinArticleTitle 記事タイトル文字 */ 
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{ 
font-size:1.31em; 
font-weight:bold; 
color:#0066cc; 
} 


/* (1-4) サイドバー内の文字のスタイル 
--------------------------------------------*/ 

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

/********************************************  

    追加してあるスタイルです 

    フッター部分にあるサイドメニュータイトルです。 

    CSS3のshadowを使い影を付けてます。 

*********************************************/ 

.skinSubB .skinMenuHeader{ 

        text-align: center; 

        font-weight:bold; 

        margin-bottom: 20px; 

        color: #ccc; 

        border-bottom: 1px solid #333; 

        -webkit-box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3); 

        -moz-box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3); 

        box-shadow: inset 0px 3px 8px 1px rgba(0, 0, 0, 0.3); 

        background: #555; 

        -moz-border-radius: 5px; 

        border-radius: 5px; 
} 


/* 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

 (2) ボタンのスタイル 

 ※ボタンの背景画像や文字の色などを指定 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

*/ 

/* (2-1) ボタン[横180px 縦35px] 
--------------------------------------------*/ 

/* ボタンの背景画像 ※[横180px 縦35px]のボタンの背景画像を指定 */ 

.skinImgBtnM{ 

background-image:url(https://stat.blogskin.ameba.jp/blogskin_images/20120811/13/45/47/p/o01800035reborn-ibaraki1344657851902.png); 

} 

/* ボタンの文字色 */ 

.skinImgBtnM:hover span,.skinImgBtnM:focus span,.skinImgBtnM span{ 

color:#333333 !important; 

} 


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

/* アイコン付き ボタンの背景画像 ※[横128px 縦28px]のボタンの背景画像を指定 */ 
.skinImgBtnS{ 
background-image:url(https://stat.blogskin.ameba.jp/blogskin_images/20120811/14/e7/ac/p/o01280028reborn-ibaraki1344661535711.png); 
} 

.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(https://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 #dddddd; 

background:#ffffff; 

color:#0066cc !important; 

} 


/* ボタンにマウスオーバー */ 

.skinSimpleBtn:hover,.skinSimpleBtn:focus{ 

background:#f7f7f7; 

} 


/********************************************  

    ページ送りで追加してあるスタイルです 

*********************************************/ 

.pagingArea { 

    width: 600px; 

    padding: 5px; 

    background-color: #FFF; 

    -moz-border-radius: 5px; 

    border-radius: 5px; 

} 

.pagingPrev { 

    top: 5px; 

    left: 80px; 

    width: 120px; 

} 

.pagingNext { 

    top: 5px; 

    left: 380px; 

    width: 120px; 

} 


/* 
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

 (3) エリアのスタイル 

 ※背景画像、サイズ、ボーダーなどを各部分ごとに指定 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 
*/ 

/********************************************  

    追加してあるスタイルです。 

　　　　広告が上部に表示されるのでここを基準に 

　　　　しています。 
*********************************************/ 

.skinFrame { 

   position: relative; 

} 


/* (3-1) ボディ（全体） 
--------------------------------------------*/ 

/* skinBody ボディ */ 

.skinBody{ 

/********************************************  

    追加してあるスタイルです。背景色白 

*********************************************/ 

    background-color: none; 

}/* ←ブログ全体に背景を敷きたいとき */ 

.skinBody2{
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20120817/17/ae/a1/p/o00100470reborn-ibaraki1345190502302.png);
	background-repeat: repeat-x;
	background-position: top;
} 

.skinBody3{} 


/* (3-2) ブログヘッダー 
--------------------------------------------*/ 
 
/* skinHeaderArea ブログヘッダー980pxエリア */ 

.skinHeaderArea{ 

/********************************************  

    追加してあるスタイルです。 

    skinHeaderAreaをなくしています 

*********************************************/ 

    height: 90px; 

}/* ←ブログヘッダーに背景画像を敷きたいとき */ 


/********************************************  

    追加してあるスタイルです。 

    ブラウザ幅いっぱいに広がってるヘッダー部分です。 

    CSS3のshadowで影を付けてます。 

*********************************************/ 

.headerBnrArea{ 

  } 

/********************************************  

    追加してあるスタイルです。 

    ヘッダーバナーの表示位置を決めてます。 

*********************************************/ 

.headerBnr{ 

    padding: 40px 0 0 250px; 

} 


/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */ 

.skinBlogHeadingGroupArea{ 

padding:20px 0 30px; 

} 


/* skinTitleArea ブログタイトルのエリア */ 

.skinTitleArea{ 

/********************************************  

   padding-bottom:4pxは削除してます。 

*********************************************/ 
} 

/********************************************  

    追加してあるスタイルです。 

    ブログタイトルのエリアの文字を画像で表示 

    させ表示位置を指定しています。 

    background画像は各自で用意してください。 

    画像サイズは横250px縦150pxです。 

*********************************************/ 

.skinTitleArea a{ 

    width: 980px; 

    height: 155px; 

    text-indent: -999999px;/* ブログタイトル文字を消し画像で表示させてます */ 

    text-decoration: none; 

    background: url(https://stat.blogskin.ameba.jp/blogskin_images/20140505/16/16/f6/p/o09800155reborn-ibaraki1399274640941.png) no-repeat; 

    position: absolute; 

    top: 0px; 

} 

/* skinDescriptionArea ブログの説明エリア */ 

.skinDescriptionArea { 

/********************************************  

    追加してあるスタイルです。 

    GoogleAD広告の上辺りに表示されるように 

    表示位置を指定しています。 

*********************************************/ 

    position: absolute; 

    top: 15px; 

    padding-left: 0px; 

} 


/* (3-3) コンテンツエリア 
--------------------------------------------*/ 

/* skinContentsArea コンテンツ980pxエリア */ 

.skinContentsArea{ 

/********************************************  

    追加してあるスタイルです。 

    フッターの幅を広げるためにwidth: 100%に 

    !importantを指定してこのスタイルを 

    優先しているようにしています。 

*********************************************/ 

    width: 100%!important;/*フッターの幅を広げるため*/ 

    padding: 0px!important; 

/* 注 ベースのcssにwidth:980px;の記述有り */ 

} 


/* (3-4) メインエリア 
--------------------------------------------*/ 

.skinMainArea{ 

/********************************************  

    追加してあるスタイルです。 

    この部分が記事やコメントなどが表示される 

    メインエリアになります。 

*********************************************/ 

    float: left !important; 

    width: 650px!important; 

    margin: 10px 10px 0 10px; 

} 

/********************************************  

    追加してあるスタイルです。 

    メインエリアとサイドバーを含む 

    ブロックになります。 

*********************************************/ 

.skinContentsArea2 { 

    width: 980px !important; 

    margin: 0 auto !important; 

   padding:30px 0px 0px 0px;

} 

/********************************************  

    追加してあるスタイルです。 

    ここもメインエリアとサイドバーを含む 

    ブロックになります。又ここで背景色 

    を表示させてます。 

*********************************************/ 

.layoutContentsA{ 

    margin-top: 70px; 

    background-color: #F2F3F4; 

    padding-bottom: 20px; 

    width: 980px !important; 

} 


/* (3-5) メッセージボード 
--------------------------------------------*/ 

.skinMessageBoard{ 

/* 注 ベースのcssに margin-bottom の記述有り */ 

border-top:1px dotted #979797; 

border-bottom:1px dotted #979797; 

background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */ 

} 

.skinMessageBoard2{} 

.skinMessageBoard3{ 

 padding:16px 30px;

} 


/* (3-6) 記事 
--------------------------------------------*/ 

/* skinArticle 記事エリア */ 

.skinArticle{ 

/* 注　ベースのcssに margin-bottom の記述有り */ 

padding:16px 0; 

border:1px solid #dddddd; 

background:#ffffff;/* ←記事に背景を敷きたいとき */ 

/********************************************  

    追加してあるスタイルです。 

********************************************/ 

    margin-top: 20px; 

} 

.skinArticle2{} 

.skinArticle3{} 


/* skinArticleHeader 記事タイトルエリア */ 

.skinArticleHeader{ 

margin:0 29px; 

padding:2px 10px; 

border-left:5px solid #e4e4e4; 

} 

.skinArticleHeader2{} 


/* skinArticleBody 記事本文エリア */ 

.skinArticleBody{} 

.skinArticleBody2{ 

margin:0 29px; 

} 


/* skinArticleFooter 記事フッターエリア */ 

.skinArticleFooter{ 

margin:10px 29px 0; 

border-top:1px dotted #949494; 

} 


/********************************************  

    追加してあるスタイルです。 

    ブログ記事一覧ブロック部分です。 

********************************************/ 

.listPageArea.tabList { 

    margin-top: 20px; 

} 

 
/********************************************  

    追加してあるスタイルです。 

    Amebaおすすめキーワードの広告部分になります。 

*********************************************/ 

#resPointArea { 

    width: 100%; 

    background-color: #FFF; 

    border:1px solid #eeeeee; 

    margin-top: -10px!important; 

} 


/********************************************  

    追加してあるスタイルです。 

    記事した部分にあるAmeba広告と 

    Googlead広告を含むブロックになります。 

*********************************************/ 

#footer_ad { 

    background-color: #FFF; 

    border:1px solid #eeeeee; 

    margin: 0 0 20px 0!important; 

    width: 100%; 

    float: left; 

} 

/********************************************  

    追加してあるスタイルです。 

    記事した部分にあるAmeba広告ブロックです。 

*********************************************/ 

#footer_ad ul { 

    width: 300px; 

    padding: 5px; 

    float: left; 

} 

/********************************************  

    追加してあるスタイルです。 

    記事した部分にあるGooglead広告ブロックです。 

*********************************************/ 

#advertising3 { 

    width: 300px; 

    float: left; 

} 

/********************************************  

    追加してあるスタイルです。 

    記事表示一覧した部分にある 

    Googlead広告ブロックです。 

*********************************************/ 

#advertising2 { 

    background-color: #FFF; 

} 

 
/* (3-7) サイドバーエリア 
--------------------------------------------*/ 

.skinSubArea{ 

} /* サイドバーエリア共通 */ 

.skinSubA{ 

/********************************************  

    追加してあるスタイルです。 

    margin-rightで右にマージンを設けてます。 

*********************************************/ 

        margin-right: 5px; 

} /* 300pxのサイドバーエリア */ 

.skinSubB{ 

/********************************************  

    追加してあるスタイルです。 

    このサイドバーがフッターに表示されます。 

    width: 100%でブラウザ幅いっぱいに表示 

    されるようにしてあります。 

*********************************************/ 

    width: 100% !important; 

} /* 180pxのサイドバーエリア */ 


/********************************************  

    追加してあるスタイルです。 

    ブラウザ幅いっぱいに広がるフッターブロック 

    の背景色ぶろっくです。 

*********************************************/ 

.layoutContentsB{ 

    margin: 0px -500px 0px -500px; 

    padding: 20px 500px 10px; 

    width: 100% !important; 

    background: #333; 

    -webkit-box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5); 

    -moz-box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5); 

    box-shadow: 0px -3px 8px 2px rgba(0, 0, 0, 0.5); 

} 

 
/********************************************  

    追加してあるスタイルです。 

    フッターエリアに表示される各メニューのブロック 

    です。ブロックは4つで設定してあります。 

*********************************************/ 

.skinSubB .skinMenu{ 

    width: 230px !important; 

    float: left !important; 

    margin-right: 20px; 

    background: none !important; 

} 

/********************************************  

    追加してあるスタイルです。 

    フッターエリアに表示される各メニューのブロック 

    です。ブロックの背景を消してます。 

*********************************************/ 

.skinSubB .skinMenuBody{ 

    background: none !important; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアに表示される各メニューのブロック 

    です。４つめのブロックの右側マージンを0pxに 

    してあります。 

*********************************************/ 

.skinSubB .skinMenu + .skinMenu + .skinMenu + .skinMenu{ 

    margin-right: 0px; 

} 


/* (3-8) サイドバー　メニュー 
--------------------------------------------*/ 
  
/* skinMenu サイドバー　メニューのエリア */ 

.skinMenu{ 

/* 注　ベースのcssに margin-bottom の記述有り */ 

background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */ 

} 

.skinMenu2{} 

/* skinMenuHeader サイドメニュータイトルエリア */ 

.skinMenuHeader{ 

margin:10px; 

padding:5px 10px; 

background:#ffCC99;/* ←サイドメニューのタイトルに背景を敷きたいとき */ 

} 

/* skinMenuBody サイドメニュー本文エリア */ 

.skinMenuBody{ 

margin:10px; 

padding:10px; 

background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */ 

} 


/* (3-9) サイドバーの　リスト画像、ボーダー　※要素のbottomに指定すること 
--------------------------------------------*/ 

.skinSubHr, 

.skinSubList li{ 

margin-bottom:3px; 

padding-bottom:3px; 

border-bottom:1px dotted #b3b3b3; 

} 


/********************************************  

    追加してあるスタイルです。 

    サイドバーにあるAmeba会員登録とRSS部分の 

    ブロックです。 

*********************************************/ 

.registArea.subModule, 

.rss.skinFieldBlock { 

    padding: 10px 0; 

    background:#ffffff; 

    border:1px solid #eeeeee; 

} 


/********************************************  

    追加してあるスタイルです。 

    サイドバーにあるRSS部分のブロックです。 

*********************************************/ 

.rss.skinFieldBlock { 

    padding-left: 20px; 

    width: 278px!important;/* 追加 */ 

} 


/* 追加してあるフッターエリア 
--------------------------------------------*/ 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアにhrタグを使った場合は凹みの 

    あるような線で表示されます。 

*********************************************/ 

.skinSubB .skinSubHr{ 

    border-top: 1px solid #111; 

    border-bottom: 1px solid #666; 

    margin:0px; 

    padding:0px; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアにul li リストタグを使って 

    いる部分のラインに凹みがあるようなライン 

    で表示させています。 

    ここはulの最後の部分です。 

*********************************************/ 

.skinSubB .skinSubList{ 

    border-bottom: 1px solid #666; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアにul li リストタグを使って 

    いる部分のラインに凹みがあるようなライン 

    で表示させています。 

    ここはliの部分です。 

*********************************************/ 

.skinSubB .skinSubList li{ 

    margin:0px; 

    padding:0px; 

    line-height: 2.5; 

    border-top: 1px solid #666; 

    border-bottom: 1px solid #111; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアにul li リストタグを使って 

    いる部分のラインに凹みがあるようなライン 

    で表示させています。 

    ここでは最初のliタグのボーダートップの表示を 

    させないようにしています。 

*********************************************/ 

.skinSubB .skinSubList li:first-child { 

    border-top: none; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリア文字色とリンク色を変更してます。 

*********************************************/ 

.skinSubB, 

.skinSubB a { 

         color: #ccc; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアホバー色を変更してます。 

*********************************************/ 

.skinSubB a:hover { 

    color: #1982d1; 

    text-decoration: none; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアカレンダー内 

    tdリンク色を変更してます。 

*********************************************/ 

.skinSubB .calendar td a { 

    color: #fff; 

    background-color: #999; 

} 


/********************************************  

    追加してあるスタイルです。 

    フッターエリアカレンダー内 

    tdホバー色を変更してます。 

*********************************************/ 

.skinSubB .calendar td a:hover { 

    color: #ccc; 

    background-color: #1982d1; 

} 


/* (3-10) コメント欄、トラバ欄、記事一覧などの一覧 
--------------------------------------------*/ 

/* 背景色 */ 

.skinBgColor,.skinBaseBgColor,.skinBlock{ 

background-color:#ffffff; 

} 


/* 弱い背景色 */ 

.skinWeakBgColor,.skinBaseWeakBgColor{ 

background-color:#f7f7f7; 

} 


/* 強い背景色 */ 

.skinStrongBgColor,.skinBaseStrongBgColor{ 

background-color:#f7f7f7; 

} 


/* 枠線の色 */ 

.skinBorderColor,.skinBaseBorderColor,.skinBlock{ 

border-color:#dddddd; 

} 



/* 境界線の色 */ 

.skinBorderHr,.skinBorderList li{ 

border-color:#b3b3b3; 

} 


/* 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

 (4) その他、拡張 

＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊ 

*/ 

/* その他、拡張があれば記述 */


div{/* IE用スクロールバーカラー */
    scrollbar-arrow-color:#ffffff;/* 矢印 */
    scrollbar-face-color:#ffff00;/* スクロールバー表面 */
    scrollbar-3dlight-color:#ffff00;/* ボタン外側の左と上の枠 */
    scrollbar-darkshadow-color:#ffff00;/* ボタン外側の右と下の枠 */
}


div::-webkit-scrollbar {/* スクロールバー幅 */
    width: 10px;
    height: 10px;
}


div::-webkit-scrollbar-track {/* 背景 */
    background: #ffffcc;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}


div::-webkit-scrollbar-thumb {/* 表面 */
    background:#ffff00;
    border-radius: 10px;
}

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
/* ▼▼▼ 変更しない */
#wrap,.skinContentsArea{
  position:relative;
}
#headerMenu{
  position:absolute;
  margin:0;
  padding:0;
}
#headerMenu ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#headerMenu ul.menu li{
  display:inline;
}
#headerMenu ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
/* ▲▲▲ 変更しない */
/* ▼▼▼ 位置・サイズ調整 */
#wrap,.skinContentsArea{
  padding-top:40px;             /* メニュー設置用スペース */
}
#headerMenu{
  top:35px;                      /* 上下位置調整 */
  padding:0px 0px 60px 0px;  
  margin:0px;
  width:980px;              /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
  width:163px;                  /* ボタンの幅 */
  line-height:40px;             /* ボタンの高さ */
  font-size:14px;               /* ボタンの文字サイズ */
  padding-top: 0px;
}
/*▲▲▲ 位置・サイズ調整 */
/*▼▼▼ 色・文字装飾・背景など */
#headerMenu ul.menu li a{       /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:bold;           /* 太字(なし) */
  text-decoration:none;         /* 下線(なし) */
  background-color:none;     /* 背景色(濃い青) */
  background-image:url(https://stat.blogskin.ameba.jp/blogskin_images/20120810/23/ea/f8/p/o01630040reborn-ibaraki1344608756529.png);       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
  color:#ffcc00;                /* 文字色(白) */
  font-weight:bold;           /* 太字(なし) */
  text-decoration:underline;    /* 下線(あり) */
  background-color:none;     /* 背景色(薄い青) */
  background-image:url(https://stat.blogskin.ameba.jp/blogskin_images/20120810/23/ea/f8/p/o01630040reborn-ibaraki1344608756529.png);       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
/*▲▲▲ 色・文字装飾・背景など */