@charset "UTF-8";
/* CSS Document */

html { height:100%; padding:0; font-size:12px; line-height:19px; -webkit-text-size-adjust: 100%;}

* {font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}

/* new header area! 2016/04/14 */
#main-header{ width:100% !important; height:240px; background:#F7F7F7;}
.mh-area{ width:900px; height:220px; margin:0 auto; font-size:10px; color:#666; position:relative;}

/* トピックスエリア */
.mh-call{ background:#fff; padding:3px 14px 2px 7px; display:inline-block; border:1px solid #ccc; border-radius:4px; font-size:11px; color:#111; text-align:left; position:absolute; top:10px;}
.mh-call img{ width:14px; padding-right:8px;}
.mh-call:hover{ color:#069;-webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out; border:1px solid #069;}
.mh-call a{ color:#111 !important; text-decoration:none;}
.mh-call a:hover{ color:#069 !important; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
.mh-area ul{ width:880px; height:60px; margin:0;}
.mh-area li{ list-style:none; float:right;font-size:13px; color:#000; margin-right:20px; margin-top:10px; border:1px solid #ccc; padding:2px 6px 1px 6px; display:inline-block;}
/* 会員エリアのリスト */
.mh-area li:hover{ border:1px solid #222;}
.mh-area li a{ color:#000; text-decoration:none;}
.mh-area li img{ width:14px; padding-right:5px}
.mh-knb img{ margin:0 auto; margin-top:-18px; width:203px !important;}

/* 仲間募集 */
.nakama{ position:absolute;left:0;top:36px; cursor:pointer; height:40px; width:550px; background-position:bottom bottom;}
.nakama img{ width:360px !important; margin-left:-10px; z-index:1; margin-bottom:6px;}

/* ソーシャルエリアのリスト */
.mh-sosial{ position:absolute; width:230px; bottom:12px; left:-45px;}
.mh-sosial ul{ width:300px; height:auto; margin:0;}
.mh-sosial li{ float:left; margin-right:7px; display:inline-block; border:none !important; padding:0 !important;}
.mh-sosial img{ width:40px !important;}

/* 新着バナー */
.mh-shinchaku{ position:absolute; right:-8px; top:50px;}

/* header コンテンツ */
.mh-cont{ position:absolute; width:680px; bottom:15px; left:199px;}
.mh-cont ul{ width:700px; height:auto; margin:0;}
.mh-cont li{ float:left; margin-right:10px; border:none !important; display:inline-block; border-left:1px solid #CCCCB7 !important; padding:0 !important; color:#111; font-size:13px; padding-left:8px !important;}

.mh-cont li a{ color:#222 !important;}
.mh-cont li a:hover{ color:#111; text-decoration:none;-webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out; border-bottom:1px solid #666;}

/* facebook プラグイン */
.mh-plug{ position:absolute; right:-30px; top:8px;}


/* 注意喚起 */
 #caution01 {
  padding:3px 5px;
  display:inline-block;
  text-align: center;
  font-size:10px;
  color:#333;
  position:absolute;
  right:122px;
  top:41px;
  z-index:10;
 }
  
 #caution01 a{ 
 color:#333 !important;
 text-decoration:underline;
 }
 
 #caution01 a:hover{ 
 text-decoration:none !important;
 
 }

/* イチオシのプロモーションがスタートしたときに使うエリア */

 @keyframes diy-op {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
 }

#diy-op {
 display: inline-block;
 animation: diy-op 2s linear infinite;
 position:absolute;
 top:110px;
 left:0;
 padding: 3px 8px 3px 3px;
 border: 1px dashed #333;
 border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
 color: #333;
 font-weight:bold;
 font-size:10px;
 text-decoration: none;
 text-align:left;
 font-style:italic;
 float:left;
 box-shadow: 9px 9px 1px -6px rgba(0, 0, 0, 0.1);
 -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;
 margin:0;
}

#diy-op img{ width:13px;}
#diy-op a{ color:#333 !important;}
#diy-op a:hover{ text-decoration:none;color:#930 !important;}

#diy-op:hover{ 
 border: 1px dashed #930;
 font-weight:bold;
 box-shadow:none;
 -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;
}

/* テキストリンクのスタイルここから */
a { text-decoration: none; }
a: { text-decoration: underline; font-size: 14px; }
a:visited{color:#5387C2; text-decoration:none;}
a:link{color:#5387C2;}
a:hover{color:#77A26E; text-decoration:underline;}
a:hover img { opacity: 0.7; filter: alpha(opacity=80); }

/* スマホ,タブレット iframe対策 */
#box { overflow: auto; width: 488px; height: 126px; }
#box iframe { width: 483px; height:126px; }

hr{ border:none; border-top:dotted 1px #CCCCCC; height:1px; color:#FFFFFF; }
td { font-size:80%; }
td { font-size: 14px; line-height: 19px; }

.FS2_body_text{ font-size:10px; color:#666; border:none; text-align:left; margin-bottom:13px;}
span.fb{ float:right; margin-bottom:6px;}
span.txx{ padding:5px 10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:5px 0;}

/* header検索 */
#headSearch{ width:904px; margin:0 auto; font-size:11px; color:#555; overflow:hidden; clear:both; padding-top:15px; padding-bottom:0;}
#headSearch .form{ width:241px; float:left; margin-left:-2px;}
#headSearch .rightSearch{ width:660px; float:right;}
#headSearch .rightSearch p{ margin:0; padding:3px 0; margin-right:3px;}
#headSearch .iciranSearch{ width:210px; background:#333; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; float:right; text-align:center; }
#headSearch .iciranSearch:hover{ background:#666;}
#headSearch .iciranSearch a{ color:#fff; background:url(https://www.hanahiroba.com/images/iciranNext.png) 8px center no-repeat; padding-left:20px; display:block; background-size:15px 15px; }

#headSearch .word{ float:left; width:420px; text-align:left; margin-left:15px !important;}
span.wo a{ border:1px solid #ccc; margin-left:3px; color:#333; padding:3px;}
span.wo a:hover{ color:#C30; border:1px solid #C30; text-decoration:none;}
span.ge a{ background:#333; margin-left:3px; color:#fff; border-radius:4px; padding:7px 8px 7px 8px; margin-left:5px;}
span.ge a:hover{ color:#fff; background:#06C; text-decoration:none;}
#headSearch .word a{ margin:0 3px; }
#headSearch .sideSearchBox{ color:#666; height:27px; width:200px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border:1px solid #999; box-sizing:border-box;vertical-align: middle; padding-left:5px; }
#headSearch .sideSearchButton{ margin-left:-4px; vertical-align: middle;}

/* オンライン写真集 */
#ktrg{ width:897px; margin:15px auto; box-sizing:border-box; overflow:hidden; margin-bottom:5px; }
#ktrg p{ margin:0; padding:0;}
#ktrg .left{ float:left; width:170px; }
#ktrg .right{ float:right; }
#ktrg ul{ clear:both; border:1px solid #CCC; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; overflow:hidden; padding:2px; margin-top:2px; }
#ktrg li{ float:left; list-style:none; text-align:left; }
#ktrg li a{ padding-left:70px; border-left:1px solid #CCC; display:block; width:105px;padding-top:9px; padding-bottom:8px; color:#333; }
#ktrg li.ktrg01 a{ background:url(https://www.hanahiroba.com/images/icon01.png) no-repeat 15px 0; }
#ktrg li.ktrg02 a{ background:url(https://www.hanahiroba.com/images/icon02.png) no-repeat 15px 0; }
#ktrg li.ktrg03 a{ background:url(https://www.hanahiroba.com/images/icon03.png) no-repeat 15px 0; }
#ktrg li.ktrg04 a{ background:url(https://www.hanahiroba.com/images/icon04.png) no-repeat 15px 0; }
#ktrg li:first-child a{ border-left:none; }
#ktrg li a:hover{ background-color:#ecf0e6; text-decoration:none;}

/* katarogu(商品カタログ一覧) */
#katarogu { text-align:left; overflow:hidden; }
#katarogu ul{ margin:0; padding:0; line-height:1.6em; }
#katarogu li{ list-style:none; color:#999;}
#katarogu li.kate01{ float:left; margin-left:35px; width:205px; padding-bottom:20px; }
#katarogu li.kate01:first-child{ margin-left:0; }
#katarogu li.kate01 ul{ height:250px; padding-top:10px; }
#katarogu li.kate02{ list-style:circle; margin-left:20px; }
#katarogu .kateLeft{ float:left; width:100px; }
#katarogu .kateRight{ float:right; width:100px; }



/* PR-NEWエリア (メルマガなどで人気が出た商品たち) */
.pr-new{ width:898px; height:450px; margin:0 auto; padding:4px; background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/uddo-seam2.jpg) repeat; margin-bottom:28px; margin-top:-10px;}
.pr-new img{ width:220px; height:200px; border-radius:3px; text-align:center; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; margin-top:20px; border:1px solid #ccc;}
.pr-new img:hover { -webkit-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.pr-new ul{ margin:0; padding:0; width:990px;}
.pr-new li{ width:266px; height:410px; list-style:none; float:left; margin-top:10px; margin-left:25px;background:#fff !important; text-align:center; box-shadow: 0px 9px 7px -5px rgba(0, 0, 0, 0.2);}
.pr-new a li { border:none;}
.pr-new a li:hover{ background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/haikei_boder.jpg) repeat !important; border-bottom:2px solid #C30;}
.pr-name1{ font-size:14px; color:#333; text-align:center; margin-top:13px; font-weight:bold;}
.pr-price1{ font-size:17px; color:#F63; text-align:center; margin-top:-13px; float:right; margin-right:5px; letter-spacing:0.5px;}
.pr-price2{ font-size:10px;}
.pr-new hr{ color:#ccc; border-top:1px; width:90%; margin-top:-17px;}
.pr-new-txt{ font-size:12px; color:#555; text-align:left; padding:10px;line-height:1.9em; padding-left:13px; margin-top:-7px;}



/* インテリアプランツPRエリア */
.pr-new1{ width:908px; height:335px; margin:0 auto; padding:4px 0; background:url(https://image.rakuten.co.jp/hana-online/cabinet/aikon/ttl-hon6.jpg) no-repeat; margin-bottom:28px; margin-top:-10px;}
.pr-new1 img{ width:220px; height:200px; border-radius:3px; text-align:center; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; margin-top:20px; border:1px solid #ccc;}
.pr-new1 img:hover { -webkit-transform: rotate(-7deg);-ms-transform: rotate(-7deg);transform: rotate(-7deg);}
.pr-new1 ul{ margin:0; padding:0; width:990px;}
.pr-new1 li{ width:266px; height:300px; list-style:none; float:left; margin-top:10px; margin-left:27px;background:#fff !important; text-align:center; box-shadow: 0px 9px 7px -5px rgba(0, 0, 0, 0.2);}
.pr-new1 a li { border:none;}
.pr-new1 a li:hover{ background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/haikei_boder.jpg) repeat !important; border-bottom:2px solid #C30;}
.pr-name1{ font-size:14px; color:#333; text-align:center; margin-top:13px; font-weight:bold;}
.pr-price3{ font-size:17px; color:#F63; text-align:center; margin-top:-3px; float:right; margin-right:5px; letter-spacing:0.5px;}
.pr-price2{ font-size:10px;}
.pr-new hr{ color:#ccc; border-top:1px; width:90%; margin-top:-17px;}
.pr-new-txt{ font-size:12px; color:#555; text-align:left; padding:10px;line-height:1.9em; padding-left:13px; margin-top:-7px;}


/* sidebar(サイドバー) */
#topSide1{ color: #454545; background:#f1f1f1; width:170px; padding:5px 10px; margin-left:10px; font-weight:normal; margin-top:15px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; }
#topSide1 hr{ border: none; border-top: dotted 1px #CCC; border-bottom:dotted 1px #fff; height:0; color:#CCC; }
#topSide2{ color: #454545; background-repeat: repeat; background-image: url(https://image.rakuten.co.jp/hana-online/cabinet/souko/haikei_boder.jpg); width:170px; padding:5px 10px; margin-left:10px; font-weight:normal; margin-top:15px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; }
#topSide1 a,#topSide2 a{ color:#666; font-size:11px; line-height:1.5em; }
#topSide1 p,#topSide2 p{ margin-bottom:10px; }
#topSide2 .fb{ background-color:#FFF; }
/* sidebar(サイドバー)  amazonペイメント*/
.amazon{ border:1px solid #333; height:225px; width:170px; padding:0; margin:0 auto; margin:6px 0 5px 0; background:#fff !important;}
.amazon1{ background:#222; height:25px; width:170px;}
.amazon2 a{ text-decoration:none; color:#fff !important;}
.amazon2 { background:#222; width:155px; padding:8px 5px 8px 5px; font-size:12px; margin:0 auto; text-align:center; border-radius:3px; margin-top:5px;}
.amazon2:hover{ background:#063; color:#fff;}


/* トップページ サイドバースタイル (テキストアイテムエリアの処理) */
.sa-ttl{ color:#fff; font-weight:bold; text-align:left; font-size:12px; letter-spacing:0.6px; background:#333; width:178px; padding:5px 0px 3px 5px; margin-bottom:10px; margin-left:15px;}

.sa-ttl-tuiseki{ color:#fff; font-weight:bold; text-align:left; font-size:12px; letter-spacing:0.6px; background:#333; width:179px; padding:5px 0px 3px 5px; margin-bottom:10px; margin-left:-9px; margin-top:7px;}

.sa-main ul{ width:180px; margin:0; padding:0; margin-left:15px; height:auto;}

.sa-main li{ 
width:168px;
height:auto;
background:#fff;
border:1px solid #ccc;
margin-bottom:4px;
padding:8px 5px 8px 5px;
list-style:none;
border-left: 3px solid #063;
font-size:12px;
color:#000;
letter-spacing:0.5px;
box-shadow: 0px 7px 3px -5px rgba(0, 0, 0, 0.1);
}

.sa-main li a{ color:#222; text-decoration:none;}
.sa-main li:hover{ color:#C30; border-bottom:1px solid #C30; border-left: 3px solid #C30;}
.sa-main li a:hover{ color:#930;}


/* PRエリア */
#hot-area{ 
width:900px;
height:650px;
margin:0 auto;
padding:5px;
border-right:1px dotted #eee;
position:relative;
}

.hot ul {
width:970px;
font-size:13px;
line-height:1.7;
margin:0;
padding:0;
}
.hot li {
list-style-type :none;
color:#333;
width:380px;
height:200px;
float:left;
margin:10px 190px 5px -95px;
position:relative;
}

.hot img{ 
border-radius:3px;
overflow:hidden;
width:190px;
height:160px;
}

.hot-name{ 
padding-left:20px;
font-weight:bold;
height:170px;
position:absolute;
text-align:left;
display:inline-block;
}

span.hot-time{ 
border:1px solid #ccc;
padding:2px;
font-weight:normal;
font-size:10px;
color:#333;
}

span.hot-price{ 
color:#F63;
font-size:14px;
}

span.hot-txt{ 
font-weight:normal;
display:inline-block;
width:210px;
font-size:13px;
}

.hot-all{ 
font-size:12px;
color:#444;
position:absolute;
bottom:1px;
text-align:left;
right:5px;
background:#eee;
padding:2px 6px 2px 6px;
border:1px solid #ccc;
}

.hot-all a{ color:#444 !important;}
.hot-all a:hover{ color:#C30 !important; text-decoration:none;}

/* DXチャンネル トップページレイアウト */
.dx-douga{ width:900px; margin:0 auto;height:330px; margin-top:28px; margin-bottom:15px; position:relative; border:1px solid #ccc; border-top:none; border-bottom:none;}
.dx-douga ul{ width:900px; margin:0; padding:0;}
.dx-douga li{ width:400px; list-style:none; float:left; height:200px; margin-top:30px; margin-left:31px;}
.dx-douga-matome{ display:inline-block; padding:4px 12px 4px 12px; color:#222; background:#eee; border:1px solid #ccc; position:absolute; bottom:8px; right:10px;}
.dx-douga-matome a{ color:#222 !important; text-decoration:none;}
.dx-douga-matome a:hover{ color:#C30 !important; text-decoration:underline;}
.dx-douga iframe{ border-radius:10px;}


/* topMain style(メインスタイル) */
#topMain{ margin-left:20px; margin-right:10px; font-weight:normal; font-size:12px; overflow:hidden;}
#topMain .conTitle{ font-size:18px; background:url(https://www.hanahiroba.com/images/conTitle_bg.gif) repeat; padding:8px 8px 6px 8px; color:#FFF; font-weight:normal; margin:10px 0; }

#topMain .small{ font-size:13px; }
#topMain .topIciran{ background:#f6f6f6; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; margin-top:25px; }
#topMain .contents{ padding:15px; text-align:left; }
#topMain p{ margin:0;}
#topMain .topIciran .title{ margin-top:20px; }
#topMain .topIciran .title a{ font-weight:bold; color:#77A26E; }
#topMain .topIciran ul{ clear:both; padding:0; margin:10px 0; overflow:hidden; }
#topMain .topIciran ul li{ float:left; margin-right:15px; list-style:none; }
#topMain .topIciran ul li:last-child{ margin-right:0; }
#topMain .topIciran ul li a{ width:153px; height:30px; display:block; border:2px solid #CCC; box-sizing:border-box; padding-top:4px; padding-left:5px; color:#666; font-size:11px; background:#FFF; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
#topMain .topIciran ul li span.arrow{ background:URL(https://www.hanahiroba.com/images/top/iciran_arrow2.png) no-repeat left center; padding-left:8px;}
#topMain .topIciran ul li a:hover{ color:#666; background:#CCC; text-decoration:none; }
#topMain hr{ border: none; border-top: dotted 1px #CCC; border-bottom: dotted 1px #fff; height: 0; color: #CCC; }
#topMain .topIciran .kisetu{ overflow:hidden; }
#topMain .topIciran .kisetu ul{ clear:both; padding:0; margin:20px 0; overflow:hidden; }
#topMain .topIciran .kisetu ul li{ float:left; margin-right:10px; list-style:none; }
#topMain .topIciran .kisetu ul li a{ width:67px; height:30px; display:block; border:2px solid #CCC; box-sizing:border-box; padding-top:4px; padding-left:5px; color:#666; font-size:10px; background:#FFF; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
#topMain .topIciran ul li a:hover{ color:#666; background:#CCC; text-decoration:none; }
#topMain .kisetu ul .kisetu_title{ font-size:12px; margin-bottom:5px; }
#topMain .kisetu ul .kisetu_title span{ font-size:20px; line-height:1.5em; background:none; }
#topMain .topIciran .kisetu .fLeft{ float:left; width:320px; }
#topMain .topIciran .kisetu .fRight{ float:right; width:320px; }
#topMain .topSche{ background:#f6f6f6; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; margin-top:25px; }
#topMain .topSche ul{ clear:both; overflow:hidden; }
#topMain .topSche ul li{ float:left; margin-right:15px; list-style:none; }
#topMain .topSche ul li span.arrow{ background:URL(https://www.hanahiroba.com/images/top/iciran_arrow2.png) no-repeat left center; padding-left:8px; color:#999; }
#topMain .topSche ul li a:hover{ color:#666; text-decoration:none; }

/* 吹き出し本体の基本スタイル */
a.tooltip:hover .tip,a.tooltip2:hover .tip,a.tooltip3:hover .tip,a.tooltip4:hover .tip{ font-size:10px; color:#666; height:15px; cursor:text; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;  background-color:#CCC; }
/* 吹き出しの足の部分の色（※borderの色を変更すると変わります。） */
a.tooltip:hover .tip:after,a.tooltip2:hover .tip:after,a.tooltip3:hover .tip:after{ border-top:8px solid #CCC; }
a.tooltip4:hover .tip:after{ border-bottom:8px solid #CCC; }

/* 各吹き出しの仕様 */
a.tooltip .tip{ display: none; padding: 8px; font-size: 12px; margin-left: -55px; margin-top: -48px; line-height: 1.5em; }
a.tooltip:hover .tip{ display: inline; position: absolute;}
a.tooltip:hover .tip:after{ content: ""; display: block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; left: 15px; bottom:-5px; }

a.tooltip2 .tip{ display: none; padding: 8px; font-size: 12px; margin-left: -150px; margin-top: -48px; line-height: 1.5em; }
a.tooltip2:hover .tip{ display: inline; position: absolute; width:150px; }
a.tooltip2:hover .tip:after{ content: ""; display: block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; right: 15px; bottom:-5px; }

a.tooltip3 .tip{ display: none; padding: 8px; margin-left: -7px; margin-top: -67px; font-size: 12px; line-height: 1.5em; }
a.tooltip3:hover .tip{ display: inline; position: absolute; }
a.tooltip3:hover .tip:after{ content: ""; display: block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; left: 15px; bottom:-5px; }

a.tooltip4 .tip{ display: none; padding: 8px; margin-left: -7px; margin-top: 13px; font-size: 12px; line-height: 1.5em; }
a.tooltip4:hover .tip{ display: inline; position: absolute; }
a.tooltip4:hover .tip:after{ content: ""; display: block; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;  position: absolute; left: 15px; top:-5px; }

@media screen and (max-width: 1000px) {
/* 吹き出し本体の基本スタイル */
a.tooltip:hover .tip,a.tooltip2:hover .tip,a.tooltip3:hover .tip,a.tooltip4:hover .tip{ font-size:10px; color:#666; height:15px; cursor:text; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;  background-color:#CCC; }
/* 吹き出しの足の部分の色（※borderの色を変更すると変わりまーす。） */
a.tooltip:hover .tip:after,a.tooltip2:hover .tip:after,a.tooltip3:hover .tip:after{ border-top:8px solid #CCC; }
a.tooltip4:hover .tip:after{ border-bottom:8px solid #CCC; }

/* 各吹き出しの仕様 */
a.tooltip .tip{ display: none; padding: 8px; font-size: 12px; margin-left: -55px; margin-top: -48px; line-height: 1.5em; }
a.tooltip:hover .tip{ display: none; position: absolute;}
a.tooltip:hover .tip:after{ content: ""; display: none; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; left: 15px; bottom:-5px; }

a.tooltip2 .tip{ display: none; padding: 8px; font-size: 12px; margin-left: -150px; margin-top: -48px; line-height: 1.5em; }
a.tooltip2:hover .tip{ display: none; position: absolute; width:150px; }
a.tooltip2:hover .tip:after{ content: ""; display: none; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; right: 15px; bottom:-5px; }

a.tooltip3 .tip{ display: none; padding: 8px; margin-left: -7px; margin-top: -67px; font-size: 12px; line-height: 1.5em; }
a.tooltip3:hover .tip{ display: none; position: absolute; }
a.tooltip3:hover .tip:after{ content: ""; display: none; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; position: absolute; left: 15px; bottom:-5px; }

a.tooltip4 .tip{ display: none; padding: 8px; margin-left: -7px; margin-top: 13px; font-size: 12px; line-height: 1.5em; }
a.tooltip4:hover .tip{ display: none; position: absolute; }
a.tooltip4:hover .tip:after{ content: ""; display: none; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;  position: absolute; left: 15px; top:-5px; }
}

/* page-top */
#page-top { position:fixed; bottom:5px; right:20px; font-size:75%; z-index:999; }
#page-top a { background:#222222; text-decoration:none; color:#fff; width:59px; padding:10px 0; text-align:center; display:block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
#page-top a:hover { text-decoration:none; background:#888; }
#page-top img{ width:27px; margin-top:5px;}

/* footer(商品名ずらり) */
#footer .goodsText{ -webkit-font-smoothing:antialiased; color:#999; font-size:12px; }
#footer .goodsText a{ color:#666; font-size:12px; font-weight:normal;}

/* footer(緑のところ) */
#footer .footGreen { -webkit-font-smoothing:antialiased; font-weight:normal; color:#FFF; width:100%; position:absolute; background-color:#4B642A; left:-3px; font-size:10px; }
#footer .footGreen .wfoot{ width:880px; margin:0 auto; clear:both; overflow:hidden;}
#footer .footGreen .footNav{ clear:both; overflow:hidden; border-bottom:1px dotted #FFFFFF;}
#footer .footGreen .footLogo{ float:left; width:100px;}
#footer .footGreen ul{ padding-top:40px; overflow:hidden; float:right; width:600px; }
#footer .footGreen li{ float:left; margin-right:20px; list-style:none; }
#footer .footGreen li a{ color:#FFF; background:url(https://www.hanahiroba.com/images/top/footer_arrow.gif) no-repeat left center; padding-left:15px; }

/* 左タテ帯 */
.tateobi1{ position:absolute; top:240px; left:0; width:100px; visibility:visible; display:block;background: url(https://image.rakuten.co.jp/hana-online/cabinet/bana-/kessan513.jpg) repeat-y scroll; min-height:100%; height:6800px; z-index:auto; margin-top:0px; }
.tateobi1 a{ display:block; min-height:100%; visibility:visible; text-indent:-9999px; }
 @media screen and (max-width: 1150px) {
.tateobi1{ display:none; }
 }

/* 右バナー */
#rc_rightArea{ position:fixed; top:80px; right:0px; z-index:50; display:block; }
#rc_rightArea ul{ margin-bottom:15px; margin:0; padding:0;}
#rc_rightArea ul li{ margin-bottom:15px; list-style:none;}
#rc_rightArea a{ text-indent:-9999px; display:block; width:110px; height:88px;}
#rc_rightArea .rc_right1{ background: url("https://www.hanahiroba.com/images/lemon-rn2.png") no-repeat 28px 0; }
#rc_rightArea .rc_right1:hover{ background:url("https://www.hanahiroba.com/images/lemon-rn2.png") no-repeat 10px 0; }
#rc_rightArea .rc_right2{ background:url("https://www.hanahiroba.com/images/horidasi-rn.png") no-repeat 28px 0; }
#rc_rightArea .rc_right2:hover{ background:url("https://www.hanahiroba.com/images/horidasi-rn.png") no-repeat 10px 0; }
#rc_rightArea .rc_right3{ background:url("https://www.hanahiroba.com/images/sodatekata-rn2.png") no-repeat 28px 0; }
#rc_rightArea .rc_right3:hover{ background:url("https://www.hanahiroba.com/images/sodatekata-rn2.png") no-repeat 10px 0 ; }
#rc_rightArea .rc_right4{ background:url("https://www.hanahiroba.com/images/i-all2.png") no-repeat 28px 0; }
#rc_rightArea .rc_right4:hover{ background:url("https://www.hanahiroba.com/images/i-all2.png") no-repeat 10px 0 ; }


@media screen and (max-width: 1280px) {
#rc_rightArea a{ width:90px; height:88px;}
#rc_rightArea{ top:60px; display:block; }
}

@media screen and (max-width: 1100px) {
#rc_rightArea{ display:none; }
}

/* 予約タブ */
#tab { width:83px; height:100px; background:url(https://www.hanahiroba.com/images/yoyakunabi.png) no-repeat; position:fixed; right:0; bottom:95px; display:block; -webkit-transition:width ease-in-out 0.5s; -moz-transition:width ease-in-out 0.5s; -ms-transition:width ease-in-out 0.5s; -o-transition:width ease-in-out 0.5s; transition:width ease-in-out 0.5s; }
#tab a { display:block; width:100%; height:100%; }
#tab:hover { width:200px; }
@media screen and (max-width: 1100px) {
#tab { display:none; }
}
/* footer */
div#footer-bk { 
background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/tekusuacha-09.jpg) repeat;
width:100%;
height: 50px;
position: fixed;
bottom: 0px;
left: 0px;
padding: 8px 0;
z-index:99999
}
/* footerの表示領域 */
div#footer{
border: 1px none #fff;
height: 50px;
width: 920px;
margin:0 auto;
}
#menu ul{ 
margin: 0; 
padding: 0;
}
#menu li{ 
display: inline; 
padding: 0;
margin-right: 35px;
}
#menu li a{
display: block; 
border: 1px solid #9F99A3;
border-left : 7px ridge #669966 ;
background-color: #EEEEEE;
padding: 3px 10px;
text-decoration: none;
color: #444;
width: 120px; 
margin: 2px 0px;
text-align: left;
font-size: 12px;
font-weight:bold;
border-radius: 5px;
}
#menu li a:hover{
border: 1px solid #F0E68C;
border-left : 7px ridge #FFFFCC ;
background-color: #CC3333;
color:#FFF;
font-weight:bold;
}



/* :::::: toggle button (裏メニュー) :::::: */
 
#navTgl {
  display: none;
  width:190px;
  position:relative;
}

 
label.open,
label.close {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
}

label.open1 {
  cursor: pointer;
  position:fixed;
  top: 140px;
  background:url(https://www.hanahiroba.com/images/close2.png) no-repeat !important;
  left:2px;
}

@media screen and (max-width: 1080px) {
.open { display:none;}
}
 
.open {
  z-index: 2;
  width: 90px;
  height: 20px;
  color: white;
  color:#000;
  font-size: 60px;
  line-height: 60px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}


/* :::::: text iconの場合のみ有効 :::::: */
.open:hover { 
  z-index: 2;
  width: 90px;
  height: 20px;
  color: white;
  color:#C30;
  font-size: 60px;
  line-height: 60px;
  text-align: center;
  -webkit-transition: background-color .6s, -webkit-transform .6s;
  transition: background-color .6s, transform .6s;
}
 
#navTgl:checked + .open {
  -webkit-transform: translateX(250px);
  transform: translateX(250px);
}
 
/* :::::: text iconの場合のみ有効 :::::: */ 
.close {
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: background-color .6s;

}
 
#navTgl:checked ~ .close {
  pointer-events: auto;
  background-color: rgba(0,0,0,.3);

}
 
/* :::::: drawer menu :::::: */
 
.menu {
  z-index:9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: rgba(0,0,0,.9);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform .6s;
  transition: transform .6s;
}
 
#navTgl:checked ~ .menu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 
.menu p,
.menu li a {
  color:#fff;
}
 
.menu p {
  text-align: center;
  padding:10px;
  font-size:12px;
  color:#222;
  line-height:1.6em;
  width:85%;
  border-radius:5px;
  margin:0 auto;
  margin-top:10px;
  background:#fff;
  padding:7px;
  margin-bottom:30px;
}

span.uraura{ 
font-weight:bold;
color:#F33;
font-size:15px;
}

span.uraura1{ 
color:#000;
font-size:11px;
}
 
.menu ul {
  padding: 0;
  list-style-type:none;
}
 
.menu li {
  border-bottom: 1px solid rgba(255,255,255,.6);
  line-height: 1.7em;
  font-size:12px;
  margin-left:-10px;
  font-weight:bold;
}
 
.menu li:first-child {
  border-top: 1px solid rgba(255,255,255,.6);
}
 
.menu li a {
  display: block;
  padding: 1em 2em;
  text-align:left;
  text-decoration: none;
  transition: background-color .2s;
}
 
.menu li a:hover {
  background-color:#fff;
  color:#063;
}

@media screen and (max-width: 1280px) {
.menu{ width:192px; font-size:44%;}
.menu li{ font-size:10px; font-weight:normal;}
}



/*ie*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/*firefox*/
-moz-transform-origin:0% 0%;
-moz-transform: rotate(-90deg) translate(-100%);

/*safari,chrome*/
-webkit-transform-origin:0% 0%;
-webkit-transform: rotate(-90deg) translate(-100%);

/*opera*/
transform-origin:0% 0%;
transform: rotate(-90deg) translate(-100%);


<!-- /*////ショップ ガーデニングインフォメーション！/////*/-->
.info-box hr {border:none;border-top:dotted 1px #ccc;height:1px;width:880px; margin-left:-35px;}

.info-ttl{ background:url(https://image.rakuten.co.jp/hana-online/cabinet/aikon/ttl-hon.jpg) no-repeat; font-size:13px; color:#fff; font-weight:bold; padding:5px; letter-spacing:0.6px; width:893px; margin:0 auto; text-align:left; height:30px; margin-top:13px; margin-bottom:-40px;}

.info-ttl1{ background:url(https://image.rakuten.co.jp/hana-online/cabinet/aikon/ttl-hon1.jpg) no-repeat; font-size:13px; color:#fff; font-weight:bold; padding:5px; letter-spacing:0.6px; width:896px; margin:0 auto; text-align:left; height:30px; margin-top:15px;}

.info-box{ width:900px; height:150px; color:#333; font-size:12px; border:1px solid #999; text-align:left; border-top:none; overflow-y:scroll; overflow-x:hidden; text-align:left; margin-bottom:10px; margin-top:30px;}

.info-box ul li{ 
padding:0;
margin:0;
list-style:none;
float:left;
width:920px;
font-size:13px;
letter-spacing:0.6px;
text-align:left;
margin-bottom:5px;
margin-top:4px;
line-height:1.8em;
}
@-moz-document url-prefix() {
  button {
    line-height: -moz-block-height;
  }
}


.info-box li a { color:#333; text-decoration:none;}
.info-box li a:hover{ color:#C30;text-decoration:underline;}

.info-icon{ background:#C30; color:#fff; font-weight:bold; padding:1px 3px 1px 3px; display:inline-block; font-size:10px; margin-right:21px;}
.info-icon1{ background:#36C; color:#fff; font-weight:bold; padding:1px 3px 1px 3px; display:inline-block; font-size:10px; margin-right:15px;}
.info-icon2{ background:#000; color:#fff; font-weight:bold; padding:1px 3px 1px 3px; display:inline-block; font-size:10px; margin-right:14px;}
span.info-dialy{ color:#777; margin-right:20px;margin-left:-30px; font-size:11px;}


/* Super Rose Saleのトップページ訴求 */
#obibi{ width:900px; height:auto; margin:0 auto; margin-bottom:15px;}
#obitabu{ width:900px; background:url(https://image.rakuten.co.jp/hana-online/cabinet/sonota/ibento/rs006.jpg) repeat left; !important; height:50px; z-index:999999; margin:0 auto;}

/* Amazonログイン&ペイメント */
.amazon{ border:1px solid #333; height:225px; width:170px; padding:0; margin:0 auto; margin:6px 0 5px 0; background:#fff !important;}
.amazon1{ background:#222; height:25px; width:170px;}
.amazon2 a{ text-decoration:none; color:#fff !important;}
.amazon2 { background:#222; width:155px; padding:8px 5px 8px 5px; font-size:12px; margin:0 auto; text-align:center; border-radius:3px; margin-top:5px;}
.amazon2:hover{ background:#063; color:#fff;}




/* 緊急性の高いニュース */
.news-foot{ margin:0; padding:0; position:relative; width:100%; z-index:99999 !important;}
.news-foot-navi{ width:163px; height:121px; left:0 !important; bottom:0; z-index:99999 !important; background:url(https://www.hanahiroba.com/images/jabo-bottom1.png) no-repeat; text-indent:-9999px; position:fixed !important;}

@media screen and (max-width: 1220px) {
    .news-foot {
        display: none;
    }
}


/* 店長ブログのアーカイブエリア */
.blog-box{ 
width:902px;
height:100%;
margin:0 auto;
border:2px solid #eee;
background:#fff;
border-radius:3px;
margin-top:-10px;
margin-bottom:40px;
color:#444;
font-size:14px;
}

.blog-box ul{ 
width:902px;
height:100%;
margin:0;
padding:0;
}

.blog-box li{ 
width:902px;
height:110px;
position:relative;
list-style:none;
margin-bottom:20px;
margin-top:20px;
padding:8px 0;
}

.blog-box hr{ border:none !important; border-bottom:2px solid #eee !important;}

.b-diary{ 
font-size:24px;
color:#000;
position:absolute;
left:10px; 
top:10px;
font-weight:100;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}
.b-day{ 
font-size:60px;
position:absolute;
left:60px;
top:25px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}
.blog-box h2 a{ 
position:absolute !important;
left:203px !important;
top:6px !important;
color:#000 !important;
font-size:20px !important;
display:inline-block !important;
letter-spacing:1.5px !important;
padding-left:12px !important;
font-weight:300 !important;
font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN", serif !important;
}
.blog-box h2 a:hover{ text-decoration:none !important;}

.b-pre{
 width: 470px;
 height: 70px;
 line-height: 1.8em;
 color: #555;
 position: absolute;
 left: 237px;
 font-size: 12px;
 top: 45px;
 text-align: left !important;
}

.b-after a{ 
font-size:13px;
text-decoration:underline !important;
color:#222 !important;
}

.b-after a:hover{ color:#C30 !important;}

.b-one{ 
font-family: 'Covered By Your Grace', cursive !important; /* Google web fonts */
font-size:22px;
color:#000;
letter-spacing:0.8px;
position:absolute;
top:88px;
left:13px;
}

.blog-box li img{ 
position:absolute;
width:150px;
border-radius:3px;
top:15px;
right:10px;
}

.b-share{
 background: #36C;
 color: #fff;
 font-size: 11px;
 padding: 2px 5px;
 display: inline-block;
 position: absolute;
 top: 4px;
 right: 195px;
}

.b-share-1{ font-size:15px;}

.b-share a{ color:#fff !important; text-decoration:none;}

.b-all a{ float:right; background:#eee; font-size:12px; color:#333 !important; border:1px solid #ccc; padding:3px 6px; text-decoration:none; margin-right:-2px;}
.b-all a:hover{ color:#C30 !important; text-decoration:none !important;}


/* お知らせナビゲーションcss */
#slide {
    position: fixed;
    width: 230px;
    height: 30px;
    bottom: 0;
    left: 0;
    color: #333;
    background: #fff;
    border-right: solid 1px #999;
    border-top: solid 1px #999;
 z-index:9;
}
#slide-in {
    padding: 5px 10px;
}
#slide a {
    text-decoration: none;
    cursor: pointer;
}
#slide h3 {
 font-size:14px;
 margin-top:-3px;
 letter-spacing:0.6px;
}

#slide h3 img{
 width:20px !important;
 padding-right:10px !important;
}

#slide #open-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
 z-index:1;
}

#slide-contents{
 font-size:12px;
 float:right;
}

#slide-contents p{
 margin-left:20px;
 width:230px;
 margin-top:-2px;
 line-height:1.8em !important;
 padding-bottom:3px;
}

#slide-contents img{
 width:130px !important;
 position:absolute;
 border-radius:3px;
 left:5px;
}

.to-page{
 background:#333;
 margin-left:19px !important;
 color:#fff;
 padding:7px;
 border-radius:3px;
}

.to-page a{
 text-decoration:none !important;
 color:#fff !important;
}

.to-page:hover{
 background:#C30;
}

/* イベント時フッタードロワー処理 ※静的HTML用のイベントドロワー。ここの部分がscriptと連動 */
/*(バックアップ)　https://image.rakuten.co.jp/hana-online/cabinet/souko/honoo-seam.jpg */

footer {
  background:#45ABDA repeat;
  line-height: 10px;
  text-align: center;
  width: 100%;
  z-index:6;
}
.cb-footer {
  position: fixed; 
  bottom: 0; /* 下から0の位置に固定 */
  left: 0;
  display: none; /* イベントヘッダーバーを非表示 */
}

.cb-footer img{ width:780px;}


@media screen and (max-width: 1280px) {
.cb-footer img{ width:600px;}
}



/* トップページ見出しの処理 ※レイアウト崩れ防止のため、display:noneで！ */

.t-head h1{ display:none;}


/* 長期休暇の案内 */
#kyuka{ width:100% !important; margin-bottom:20px !important; background:url(https://image.rakuten.co.jp/hana-online/cabinet/souko/haikei12166.jpg) repeat;height:170px; padding:0; margin:0; max-width:3000px !important; border-top:1px solid #000; border-bottom:2px solid #039;}
.kyuka1{ width:900px; margin:0 auto;}
.kyuka1 img{ width:900px; margin-top:5px;}



.pppp{ position:fixed; text-indent:-9999px; z-index:6; top:190px; right:0; display:block;}
.pppp img{ width:98px; z-index:7;}



/* ライトナビお知らせエリア */
#slideR {
 z-index: 99;
 cursor: pointer;
 position: fixed;
 top: 215px;
 right: -255px;
 background:#fff;
 border-radius:0 0 0 5px;
 width: 240px;
 color: #333;
 border:1px solid #bbb;
 padding:9px 5px 4px 7px;
 height:395px;
 font-size: 16px;
}
#slideR a {
 color: #666 !important;
 display: block !important;
 padding: 5px 10px;
 background:#fff;
 text-decoration:none !important;
}

#slideR a:hover{ 
    color:#C30 !important;
 font-weight:600 !important;
}

#navi-f{
 z-index: 99;
 cursor: pointer;
 position:relative;
 top: 152px;
 right: 45px;
 background:#333;
 border-radius:2px 0 0 15px;
 width: 50px;
 height:120px;
 color: #fff;
 border:1px solid #333;
 font-size: 16px;
}

#navi-f:hover{ 
    background:#555;
}


#slideR dl {
 position: relative;
 right:14px;
 bottom:186px;
}

.p-ten {  
    position:relative;
 right:-94px;
 bottom:180px;
}

.p-ten img{ width:95px;}

#slideR dt {
 color:#000;
 margin-left:16px;
 position:relative;
 font-size:15px;
 font-weight:600;
}

.sel{ 
   color:#000;
 margin-left:16px;
 position:relative;
 font-size:15px;
 font-weight:600;
 margin-top:13px;
}


#slideR dd { 
    list-style:none;
 background:#fff;
 margin-left:15px;
 position:relative;
 font-size:14px;
 line-height:1em;
 white-space:nowrap;
 text-overflow: ellipsis; 
    -webkit-text-overflow: ellipsis; /* Safari用 */
    -o-text-overflow: ellipsis; /* Opera用 */
}

/* メニューテキストのブラウザハック */
writing-mode: tb-rl; /*IE*/
-o-writing-mode: vertical-rl; /*Opera*/
-webkit-writing-mode: vertical-rl; /*Chrome, Safari*/
writing-mode: vertical-rl; /*Firefox, Edge*/

.ami{ color:#999;}

.menu-tx{
 height: 16em;
 margin-left:1em;
 color:#fff;
 font-size:15px;
 font-weight:700;
 padding-top:8px;
 z-index:99999;
-ms-writing-mode: tb-rl; /* for MS IE8+ */
-webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
}

.menu-tx img{ 
 width:22px;
}

@media screen and (max-width: 1280px) {
#slideR{ top:70px; display:block; }
}

@media screen and (max-width: 1100px) {
#slideR{ display:none; }
#navi-f{ display:none; }
}



/* アクセス時のモーダル (scriptは別ファイルに) */
* html .layer_board_bg,
* html .layer_board {
    position: absolute;
}

.layer_board_bg {
    position: fixed;
    width: 100%;
    height: 100%;

    z-index: 1000;

    top: 0;
    left: 0;

    display: none;
    cursor: pointer;
    background: #000;
}

.layer_board {
    display: none;
    position: fixed;
    left: 50%;
    margin: 130px 0px 0px -360px;

    text-align: center;
    z-index: 2000;
}

@media screen and (max-width: 1280px) {
.layer_board img{ width:520px;}
.btn_close img{ width:90px;}

.layer_board {
    display: none;
    position: fixed;
    left: 50%;
    margin: 10px 0px 0px -260px;

    text-align: center;
    z-index: 2000;
}
}