: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;
} .okura-mcb{display:none;} @media (max-width:768px){ .okura-dcb{display:none !important;}  .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;}
}