/* common(サイドバーの全体的な基本設定) */
body{ font-size:12px; text-align:left; color:#555; line-height:1.5em; background-color:#FFF; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; font-family:'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}

a{text-decoration:none;}
a:visited{color:#5387C2;}
a:link{color:#5387C2;}
a:hover{color:#77A26E;}
a:active{color:#8CB281;}
a img:hover{ filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); opacity: 0.8; }

#sidebar h2{ font-size:12px; margin-top:10px; text-align:left; background-color:#666; color:#FFF; padding:3px 5px; font-weight:100;}
#sidebar .h2{margin-top:10px;}
#sidebar h3{ margin:15px 0; border-left:3px solid #5387c2; padding-left:8px;}
#sidebar h3:hover{margin:15px 0; border-left:3px solid #77a26e; padding-left:8px;}
#sidebar h4{ margin-top:10px; text-align:left; background-color:#C00; color:#FFF; padding:3px 5px; font-weight:100;}
#sidebar hr{ border:0; border-bottom:1px dotted #ccc; background:#fff; width:200px; padding:5px 0; margin:0;}

/* searchBox(検索窓の設定) */
#sidebar .search{ margin:30px 0 10px 0;}
#sidebar .search form{ overflow:hidden; width:200px; }
#sidebar .search form .searchBox{ color:#666; padding-left:8px; float:left; width:155px; height:30px; border-top-left-radius:3px; border-bottom-left-radius:3px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-bottomleft:3px; border:1px solid #CCC; box-sizing:border-box; }
#sidebar .search form .searchButton{ color:#fff; background:#047c18; width:45px; height:30px; border-top-right-radius:3px; border-bottom-right-radius:3px; -webkit-border-top-right-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-radius-topright:3px; -moz-border-radius-bottomright:3px; cursor:pointer; border:1px solid #063; box-sizing:border-box; }
#sidebar .search form .searchButton:hover{ filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); opacity:0.8; }

/* cat(テキストカテゴリの設定) */
#sidebar .cat{ text-align:left; }
#sidebar .cat a{color:#666; }
#sidebar .cat a:hover{color:#77A26E;}
#sidebar .cat ul{margin:5px 0 5px 20px;}
#sidebar .cat li a{ background:url(http://www.rakuten.ne.jp/gold/hana-online/sidebar/img/arrow.gif) left center no-repeat; padding-left:8px;}
#sidebar .cat li a:hover{ background:url(http://www.rakuten.ne.jp/gold/hana-online/sidebar/img/arrow_over.gif) left center no-repeat; padding-left:8px;}
#sidebar .cat .h3{font-weight:bold; margin-top:10px;}
#sidebar .cat .kajyu1 a{background:url(http://image.rakuten.co.jp/hana-online/cabinet/nabibotan/a-mondo1.jpg) left center no-repeat; background-size:25px; display:block;}
#sidebar .cat .mb10{ display:block; margin-top:-20px; margin-left:35px;}

/* bunner(サイドバーバナーエリアの設定) */
#sidebar #bunner { clear:both; overflow:hidden;}
#sidebar #bunner .bunS{ float:left; margin-top:10px; }
#sidebar #bunner .bunLeft{ margin-right:10px;}

/* 庭木・資材のカテゴリ */
#sidebar .niwaCat{ text-align:left; }
#sidebar .niwaCat a{ color:#666;}
#sidebar .niwaCat ul{margin:5px 0 5px 30px;}
#sidebar .niwaCat img{ border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; }
#sidebar .niwaCat li a{ background:url(http://www.rakuten.ne.jp/gold/hana-online/sidebar/img/arrow.gif) left center no-repeat; padding-left:8px;}
#sidebar .niwaCat li a:hover{ background:url(http://www.rakuten.ne.jp/gold/hana-online/sidebar/img/arrow_over.gif) left center no-repeat; padding-left:8px;}
#sidebar .niwaCat .h3{ margin:15px 0;}
#sidebar .niwaCat .kajyu1 a{background:url(http://image.rakuten.co.jp/hana-online/cabinet/nabibotan/a-mondo1.jpg) left center no-repeat; background-size:25px; display:block;}
#sidebar .niwaCat .mb10{ display:block; margin-top:-27px; margin-left:45px;}

/* バラのカテゴリ */
#sidebar .baraCat {text-align:center;}
#sidebar .baraCat p{text-align:left; margin:10px 0 5px 0; }
#sidebar .baraCat img{ margin-bottom:5px; width:200px; }
#sidebar .baraCat .thum{ text-align:center; border:1px solid #CCC; box-sizing:border-box; padding:5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

/* catImg(画像カテゴリの設定) */
#sidebar .catImg{text-align:center;}
#sidebar .catImg li {margin-bottom:5px;}
#sidebar .catImg li img{border:1px solid #CCC; padding:4px;}

#side{ width:200px; overflow:hidden; }
/* sidebar(サイドバー基本設定) */
#sideWrap { width:200px; background-color:#fff; font-size:12px; margin-left:15px; float:left; margin-bottom:20px; }
#sideWrap a{ color:#727272; }
#sideWrap img:hover{ filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); opacity: 0.8; }
#sideWrap h2{margin-top:10px; text-align:left; background-color:#666; color:#FFF; padding:3px 5px; font-weight:100; font-size:12px;}
#sideWrap .h2{margin:5px 0;}
#sideWrap h3{margin-top:30px; border-left:3px solid #5387c2; padding-left:8px}
#sideWrap h3:hover{margin-top:30px; border-left:3px solid #77a26e; padding-left:8px}

/* review(サイドバーレビューエリアの設定) */
#sideWrap .review p{margin-left:5px;}
#sideWrap .review .none{ width:190px; height:20px; border-bottom:1px dotted #CCC; margin:0 auto;}
#sideWrap .review h2{margin:20px 5px 10px 5px;}

/* caution(サイドバー注意書きの設定) */
#sideWrap .caution p{text-align:left;}
#sideWrap .caution ul{margin:5px 0;}

#sideWrap .about{text-align:center;}
#sideWrap .about p{margin-top:5px;}
#sideWrap .about .tencyou img{border:1px solid #CCC; padding:4px;}

/* bunner(バナーエリアの設定) */
#sidebar .bunner {text-align:center;}
#sidebar .bunner p{text-align:left; margin-bottom:5px; }
#sidebar .bunner .left{float:left; width:50%;}
#sidebar .bunner .right{float:right; width:50%;}
#sidebar .bunner .under{margin-top:10px;}
#sidebar .bunner img{border:1px solid #CCC; padding:4px; margin-bottom:-5px;}

#sidebar .text{ padding-top:5px; clear:both; }
#sidebar .text1{ margin:5px 0; border:1px dotted #FF0000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;  padding:10px; clear:both; }
#sidebar .text2{ margin:5px 0; border:1px dotted #FF0000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;  padding:10px; clear:both; }
#sidebar .text2 a{ color:#C00; text-decoration:underline; }
#sidebar .bg1{ color:#C00; font-size:25px; font-weight:bold; }

/* caution(注意書きの設定) */
#sidebar .caution p{text-align:left;}
#sidebar .caution ul{margin:5px 0;}

#sidebar .about{text-align:center;}
#sidebar .about p{margin-top:5px;}
#sidebar .about .tencyou img{border:1px solid #CCC; padding:4px;}

/* QandA(よくある質問の設定) */
#sidebar .qanda{ padding:10px; border:1px solid #CCC; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-top:10px; overflow:hidden; }
#sidebar .qanda .question{ font-size:14px; font-weight:bold; border-bottom:1px dotted #CCC; margin-bottom:10px; padding-bottom:10px; }
#sidebar .qanda img{float:left; border:none; margin-right:5px; margin-bottom:5px; background-color:#FFF; width:50px;}
#sidebar #slidetoggle{ cursor:pointer; color:#5387C2;}
#sidebar .toggle{ display:none; }

/* cds-navi(サイドバーカテゴリリスト) */
#sidebar .cds-navi{ list-style-type:none; margin:0 0 2em; padding-left:0; }
#sidebar .cds-navi li { display: inline; text-align:left;}
#sidebar .cds-navi li a { margin-bottom: 1px; padding:5px 0 5px 10px; display:block; width:100%; text-decoration:none; border-left:5px solid #5387C2; background-color:#eeeeee; color:#515151; }
#sidebar .cds-navi li a:hover { background-color:#D8D8D8; color:#77A26E; border-left:5px solid #77A26E; }

/* CSSスライダー */
#stage{ position:relative; width:200px; height:270px; margin:0 auto; }
span.fs9{ font-size:8px; color:#555;}
#photo1,#photo2,#photo3,#photo4,#photo5,#photo6,#photo7,#photo8,#photo9,#photo10 { position: absolute; float:left; width:200px; height:260px; left:200px; -moz-animation: imgtrans 50s infinite; -webkit-animation:imgtrans 50s infinite; animation:imgtrans 50s infinite; }
.name{ font-size:9px; }
#photo1 { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; }
#photo2 { -moz-animation-delay: 5s; -webkit-animation-delay: 5s; animation-delay: 5s; }
#photo3 { -moz-animation-delay: 10s; -webkit-animation-delay: 10s; animation-delay: 10s; }
#photo4 { -moz-animation-delay: 15s; -webkit-animation-delay: 15s; animation-delay: 15s; }
#photo5 { -moz-animation-delay: 20s; -webkit-animation-delay: 20s; animation-delay: 20s; }
#photo6 { -moz-animation-delay: 25s; -webkit-animation-delay: 25s; animation-delay: 25s; }
#photo7 { -moz-animation-delay: 30s; -webkit-animation-delay: 30s; animation-delay: 30s; }
#photo8 { -moz-animation-delay: 35s; -webkit-animation-delay: 35s; animation-delay: 35s; }
#photo9 { -moz-animation-delay: 40s; -webkit-animation-delay: 40s; animation-delay: 40s; }
#photo10 { -moz-animation-delay: 45s; -webkit-animation-delay: 45s; animation-delay: 45s; }
#frame { width:200px; height: 270px; position:relative; overflow:hidden; }
@-webkit-keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}
@-moz-keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}
@keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}

/* CSSスライダー */
#stage2{ position:relative; width:200px; height:220px; margin:0 auto; }
#stage2 span.fs9{ font-size:8px; color:#555;}
#photo1,#photo2,#photo3,#photo4,#photo5,#photo6,#photo7,#photo8,#photo9,#photo10 { position: absolute; float:left; width:200px; height:260px; left:200px; -moz-animation: imgtrans 50s infinite; -webkit-animation:imgtrans 50s infinite; animation:imgtrans 50s infinite; }
.name{ font-size:9px; }
#photo1 { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; }
#photo2 { -moz-animation-delay: 5s; -webkit-animation-delay: 5s; animation-delay: 5s; }
#photo3 { -moz-animation-delay: 10s; -webkit-animation-delay: 10s; animation-delay: 10s; }
#photo4 { -moz-animation-delay: 15s; -webkit-animation-delay: 15s; animation-delay: 15s; }
#photo5 { -moz-animation-delay: 20s; -webkit-animation-delay: 20s; animation-delay: 20s; }
#photo6 { -moz-animation-delay: 25s; -webkit-animation-delay: 25s; animation-delay: 25s; }
#photo7 { -moz-animation-delay: 30s; -webkit-animation-delay: 30s; animation-delay: 30s; }
#photo8 { -moz-animation-delay: 35s; -webkit-animation-delay: 35s; animation-delay: 35s; }
#photo9 { -moz-animation-delay: 40s; -webkit-animation-delay: 40s; animation-delay: 40s; }
#photo10 { -moz-animation-delay: 45s; -webkit-animation-delay: 45s; animation-delay: 45s; }
#stage2 #frame { width:200px; height: 220px; position:relative; overflow:hidden; }
@-webkit-keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}
@-moz-keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}
@keyframes imgtrans {
 0% { left:100%; } 5% { left:0%; } 10% { left:0%; } 15% { left:-100%; } 100% { left:-100%; }
}

/* 右バナー ※header.cssと重複し、競合していたため一旦削除*/