@charset "UTF-8";
/* ============================================================
   花秘書 コンシェルジュ相談ボタン
   設置先: /css/hh_chat.css
   ============================================================ */

.hhc{
  position:fixed !important;
  right:12px !important;
  bottom:calc(12px + env(safe-area-inset-bottom)) !important;
  z-index:9000 !important;
  display:flex !important;
  align-items:center !important;
  width:58px !important;
  height:58px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:999px !important;
  overflow:hidden !important;
  visibility:hidden;
  text-decoration:none !important;
  color:#2c333d !important;
  background:rgba(255,255,255,.80) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(168,150,79,.6) !important;
  box-shadow:0 8px 26px rgba(44,51,61,.22),inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition:width .5s cubic-bezier(.32,.72,.28,1),box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
@supports not (backdrop-filter:blur(2px)){
  .hhc{ background:rgba(255,255,255,.96) !important; }
}
.hhc.is-ready{ visibility:visible; }

.hhc__face{
  flex:none !important;
  width:46px !important;
  height:46px !important;
  margin-left:6px !important;
  border-radius:50% !important;
  background:#fff !important;
  overflow:hidden !important;
  position:relative !important;
  box-shadow:inset 0 0 0 1px rgba(168,150,79,.22) !important;
}
.hhc__face img{
  position:absolute !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  left:0 !important;
  top:0 !important;
  object-fit:cover !important;
  margin:0 !important;
}

.hhc__tx{
  padding-left:11px !important;
  white-space:nowrap !important;
  line-height:1.32 !important;
  overflow:hidden !important;
}
.hhc__tx b{
  display:block !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:#2c333d !important;
  transform:translateX(-8px);
  opacity:0;
  transition:transform .32s .13s cubic-bezier(.32,.72,.28,1),opacity .32s .13s;
}
.hhc__tx span{
  display:block !important;
  font-size:10.5px !important;
  color:#5a6470 !important;
  margin-top:1px !important;
  transform:translateX(-8px);
  opacity:0;
  transition:transform .32s .19s cubic-bezier(.32,.72,.28,1),opacity .32s .19s;
}

/* 展開状態 */
.hhc.is-open{ width:211px !important; }
.hhc.is-open .hhc__tx b,
.hhc.is-open .hhc__tx span{ transform:none; opacity:1; }

/* ---------- PC ---------- */
@media (min-width:768px){
  .hhc{ right:22px !important; bottom:22px !important; width:64px !important; height:64px !important; }
  .hhc__face{ width:52px !important; height:52px !important; margin-left:6px !important; }
  .hhc__tx{ padding-left:13px !important; }
  .hhc__tx b{ font-size:14.5px !important; }
  .hhc__tx span{ font-size:11px !important; }
  .hhc.is-open{ width:248px !important; }
}
@media (min-width:768px){
  .hhc:hover{ width:248px !important; box-shadow:0 12px 32px rgba(44,51,61,.22) !important; }
  .hhc:hover .hhc__tx b,
  .hhc:hover .hhc__tx span{ transform:none !important; opacity:1 !important; }
}

@media (prefers-reduced-motion:reduce){
  .hhc,.hhc__tx b,.hhc__tx span{ transition:none !important; }
  .hhc__face,.hhc__face::after{ animation:none !important; }
}


/* ============================================================
   閉じている時のアニメーション
   ・光沢が斜めに走る（4.6秒周期）
   展開中（.is-open）は停止する
   ============================================================ */

/* 光沢 */
.hhc__face::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-90%;
  width:45%;
  height:190%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(18deg);
  animation:hhcSweep 4.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes hhcSweep{
  0%        { left:-90%; }
  42%,100%  { left:150%; }
}

/* 展開中は停止 */
.hhc.is-open .hhc__face::after{ animation:none !important; }

#eye_catcher{
  opacity:0 !important;
  pointer-events:none !important;
}
/* 既定CSSの #chatplusview img{pointer-events:auto} を打ち消す
   （透明でも画像がカーソルを吸い、相談ボタンの hover が効かなくなるため） */
#chatplusview #eye_catcher img{
  pointer-events:none !important;
}


/* ページトップへ戻るボタンを非表示 */
#pageTop{ display:none !important; }


/* ChatPlusの吹き出し（お困りではありませんか？）を非表示 */
#chatplusview balloon{ display:none !important; }

/* 左サイドバナーを非表示 */
#pageSideBnr{ display:none !important; }