/*------------------------------------------------------
footer
-------------------------------------------------------*/
#footer {
  position: sticky;
  font-size:1.0rem;
  overflow-y: hidden;
  background-color: #ededed;
  z-index: 1;
}
#footer .contact{
   display: flex;
   visibility: hidden;
   position: fixed;
   bottom: 0;
   right: 0;
   background-color: rgba(81,71,70,.9);
   z-index: 100;
   opacity: 0;
   transition: .3s;
}
#footer .contact li{
   text-align: center;
}
#footer .contact a{
   color: #fff;
   padding: 10px 0 10px 20px;
   width: 120px;
}
#footer .email::before,
#footer .tel::before{
   position: absolute;
   top: calc(50% - 3px);
   transform: translateY(-50%);
   font-weight: normal;
   width: 18px;
   height: 18px;
}
#footer .email::before {
   content: url(/wp-content/themes/bf-official/images/icons/email-w.svg);
   left: 20px;
}
#footer .border {
   position: absolute;
   width: 1px;
   height: 100px;
   background-color: #959595;
   display: block;
   top: 0;
   right: 0;
}
#footer .tel::before {
   content: url(/wp-content/themes/bf-official/images/icons/tel-w.svg);
   left: 28px;
}

/*-------------------------------------------------------
page top
--------------------------------------------------------*/
 #pageTop{
   position: absolute;
   top:0;
   right: 15px;
   z-index:10;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius:0px 0px 3px 3px;
   background-color:#a3a3a3;
   transition: .3s;
 }
 #pageTop span{
   position: relative;
   width: 100%;
   height: 100%;
 }
 #pageTop:hover {
   background-color:#8b8b8b;
   transition: .3s;
 }
 
 #pageTop::before {
   content:"";
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
   width: 23px;
   height: 3px;
   background-color:#fff;
 }
 #pageTop>span::before {
   content: "";
   position: absolute;
   top: calc(50% + 4px);
   left: calc(50% - 6px);
   transform: translate(-50%, -50%) rotate(-40deg);
   height: 3px;
   width: 18px;
   font-size: 32px;
   background-color: #fff;
   z-index: 1;
}
#pageTop>span::after {
   content: "";
   position: absolute;
   top: calc(50% + 4px);
   left: calc(50% + 6px);
   transform: translate(-50%, -50%) rotate(40deg);
   height: 3px;
   width: 18px;
   font-size: 32px;
   background-color: #fff;
   z-index: 1;
}
.footer-msg{
   text-align: center;
   font-size: 20px;
   font-family:'Shippori Antique',sans-serif!important;
   color: #000;
}
.footer-logo{
   width: 170px;
   margin: 30px auto 48px;
}

.footer-container {
   padding: 46px 20px 55px;
   z-index:2;
}

.footer-inner{
  display:flex;
  justify-content: center;
  gap: 80px;
  padding-top: 30px;
  border-top: 1px dotted #ccc;
  max-width: 800px;
  margin: 0 auto;
  padding:30px 20px;
}
#footer dt{
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}
#footer dd{
  margin-left: 1.4em;
}
.footer-container a{
  position: relative;
  color: #000;
}
#footer a:hover {
   opacity: .7;
}
#footer dd a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -1.3em;
  width: 13px;
  height: 4px;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  transform: translateY(-50%) skew(45deg);
}
#footer dd address>a::before {
   content: none;
}
#footer dd address::before {
   content: '\e91f';
   font-family: 'icons';
   width: 25px;
   height: 25px;
   display: inline-block;
   margin-right: 0px;
   transform: translateY(-1px) rotate(6deg);
   font-size: 18px;
   color: #303030;
}
.footer-tel{
   margin-top: 14px;
   margin-left: 5px!important;
}
.footer-tel a{
   font-size: 22px;
}
.copyright-wrapper{
  background-color:#6a3d3d;
  text-align: center;
  position:relative;
  z-index:99;
}
.copyright{
   padding: 10px 0;
   color:#fff;
   margin: 0;
}



.blogs-list-at-bottom-container{
   max-width: 1600px;
   margin: 0 auto;
}
.blogs-list.at-bottom time dl {
   margin: 5px 15px 0px 0;
   color:#000;
   font-size:14px;
}

/*------------------------------------------------------------ 
announcement
------------------------------------------------------------ */
.announcement{
   position: fixed;
   text-align: center;
   bottom: 0;
   left: 0;
   width: 100%;
   height: auto;
   background-color: rgb(160 145 39 / 90%);
   border: 1px solid #fff;
/*   display: flex;*/
   display: none;
   align-items: center;
   justify-content: center;
   transition: .5s;
   z-index: 999;
   padding: 15px;
   text-align: center;
   color: #fff;
}
.announcement.fixed{
   opacity:1;
   transition: .5s;
   z-index: 1000;
}
.announcement p{
   font-weight: normal;
   font-size:16px;
   line-height: 20px;
   width: 100%;
}
#footer .announcement a{
   color: #fff;
}
/*****************************************************************************
1100px
******************************************************************************/
@media screen and (max-width:1100px) {
#footer .contact.scrolled{
   visibility: visible;
   opacity: 1;
   transition: .3s;
}
}
/*****************************************************************************
1024px
******************************************************************************/
@media screen and (max-width:1024px) {
.footer-inner{
  gap: 50px;
}
}

/*****************************************************************************
599px
******************************************************************************/
@media screen and (max-width:599px) {
.announcement p {
   font-size:14px;
}
#footer dt{
  font-size:1rem;
}
#footer dd{
  font-size:.9rem;
}
.footer-container {
  justify-content: flex-start;
  padding: 70px 50px 30px;
}
.footer-inner{
  flex-direction: column;
  gap: 20px;
}
.announcement {
   padding: 2px 15px;
}
.footer-msg {
   font-size: 16px;
}
#footer .email::before {
   left: 16px;
}
#footer .tel::before {
   left: 21px;
}
}