:root{
  --okura-dcb-size:86px;
  --okura-dcb-right:18px;
  --okura-dcb-bottom:20px;
}

.okura-dcb{
  position:fixed;
  right:var(--okura-dcb-right);
  bottom:var(--okura-dcb-bottom);
  z-index:99990;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:var(--okura-dcb-size);
  margin:0;
  padding:0;
  line-height:1;
  pointer-events:none;
}

.okura-dcb__button{
  pointer-events:auto;
  width:var(--okura-dcb-size);
  height:var(--okura-dcb-size);
  min-width:var(--okura-dcb-size);
  min-height:var(--okura-dcb-size);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  overflow:hidden;
  border:3px solid #fff;
  border-radius:50%;
  color:#fff !important;
  text-decoration:none !important;
  text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  box-shadow:0 3px 10px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}

.okura-dcb__button--contact{background:#5f7f2f;}
.okura-dcb__button--line{background:#0f8f63;}
.okura-dcb__button--phone{background:#1f5a46;}

.okura-dcb__button:hover{
  color:#fff !important;
  text-decoration:none !important;
  transform:translateX(-3px) scale(1.035);
  filter:brightness(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,.30),0 0 0 1px rgba(0,0,0,.08);
}

.okura-dcb__button:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(17,24,39,.35),0 5px 15px rgba(0,0,0,.28);
}

.okura-dcb__label{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:calc(var(--okura-dcb-size) - 14px);
  color:#fff !important;
  font-size:11px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  text-shadow:0 1px 1px rgba(0,0,0,.14);
}

.okura-dcb__label span{
  display:block;
  white-space:nowrap;
}

.okura-dcb__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:#fff;
}

.okura-dcb__icon svg{
  display:block;
  width:22px;
  height:22px;
  fill:currentColor;
}

.okura-dcb__icon--line{
  width:24px;
  height:24px;
}

.okura-dcb__icon--line svg{
  width:24px;
  height:24px;
}

/* スマホ用の3分割追従フッターはPCでは非表示。 */
.okura-mcb{display:none;}

/* スマホ表示 */
@media (max-width:768px){
  /* PC用丸ボタンは非表示 */
  .okura-dcb{display:none !important;}

  /*
   * 旧CTAの非表示はPHP側のサイト判定付きインラインCSSで行う。
   * これにより、他サイトで同名クラスを誤って消しにくくする。
   */

  /* 新しいスマホ追従フッター */
  .okura-mcb{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:100000;
    display:flex;
    width:100%;
    min-height:64px;
    margin:0;
    padding:0 0 env(safe-area-inset-bottom,0px);
    box-sizing:border-box;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.10);
    box-shadow:0 -5px 18px rgba(0,0,0,.16);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  }

  .okura-mcb__button{
    flex:1 1 33.333%;
    min-width:0;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    box-sizing:border-box;
    margin:0;
    padding:8px 6px;
    border:0;
    border-right:2px solid rgba(255,255,255,.92);
    border-radius:0;
    color:#fff !important;
    text-decoration:none !important;
    text-align:left;
    line-height:1;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  .okura-mcb__button:last-child{border-right:0;}
  .okura-mcb__button--contact{background:#66843b;}
  .okura-mcb__button--line{background:#078a4f;}
  .okura-mcb__button--phone{background:#075c48;}

  .okura-mcb__button:active{filter:brightness(.92);}
  .okura-mcb__button:focus-visible{
    outline:3px solid #fff;
    outline-offset:-5px;
  }

  .okura-mcb__icon{
    flex:0 0 auto;
    width:23px;
    height:23px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
  }

  .okura-mcb__icon svg{
    display:block;
    width:23px;
    height:23px;
    fill:currentColor;
  }

  .okura-mcb__icon--line,
  .okura-mcb__icon--line svg{
    width:25px;
    height:25px;
  }

  .okura-mcb__label{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    color:#fff !important;
    font-size:12px;
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.02em;
    text-shadow:0 1px 1px rgba(0,0,0,.12);
    white-space:nowrap;
  }

  .okura-mcb__label span{display:block;}

  /* 追従フッターで本文最下部が隠れないよう余白を確保 */
  body{
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@media (max-width:360px){
  .okura-mcb__button{gap:5px;padding-left:4px;padding-right:4px;}
  .okura-mcb__icon,.okura-mcb__icon svg{width:20px;height:20px;}
  .okura-mcb__icon--line,.okura-mcb__icon--line svg{width:22px;height:22px;}
  .okura-mcb__label{font-size:11px;}
}

/* 印刷時は不要。 */
@media print{
  .okura-dcb,.okura-mcb{display:none !important;}
}

/* 動きを抑える設定の利用者にはアニメーションを止める。 */
@media (prefers-reduced-motion:reduce){
  .okura-dcb__button{transition:none;}
  .okura-dcb__button:hover{transform:none;}
}