#bf-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:11;
}
#pcNav .sns{
   padding: 0 8px;
}
#pcNav .contact{
   padding: 0 1em 0 10px;
}
.sns-01>a{
   display: flex;
   align-items: center;
   justify-content: center;
}
header .sns-01 img{
   width: 20px;
   height: 20px;
}
#pcNav{
  display:block;
  margin-left: auto;
}
#spNav {
   display:none;
}
#bf-header-container{
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 65px;
  box-sizing: initial;
}
#bf-header.initial{
  background-color:transparent;
  transition: all 0.5s ease;
}
.spMenu-opened #bf-header{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#bf-header.scrolled{
  background-color:rgba(255,255,255,0.85);
  transition: all 0.5s ease;
}
.logo a img{
  width: 187px;
  height: auto;
  margin: 0 0 0 25px;
}
#pcNav ul {
  display: flex;
  align-items: center;
  padding:0;
  font-size:1.1rem;
}
#pcNav li {
  padding:0 1em;
}
header .contact a {
  font-weight: bold;
}
header .contact span{
  padding-right: 0.5em;
  margin-left:8px;
  color: #fff;
}
a.underline{
  position: relative;
  display: inline-block;
}
a.underline::after {
  position: absolute;
  bottom: 3px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: rgb(0, 0, 0);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a.underline:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
#bf-header.scrolled a.underline::before,
#bf-header.scrolled a.underline::after {
  border-bottom: solid 2px #000;
}
#bf-header li::before {
  content: none;
}
#pcNav li a {
  color:#000;
  position: relative;
}
#pcNav li>a.underline {
  padding: 18px 0em;
}
/*----------------------------------------------------
list
--------------------------------------------------- */
#pcNav .drop-down,
#pcNav .drop-down ul{
  position:relative;
}
#pcNav .drop-down .fa-chevron-down{
  font-size:0.8rem;
  color:#1a1a1a;
}
#pcNav .drop-down > div{
  position: absolute;
  display: flex;
  top: 60px;
  background-color:#333;
  padding: 1.5em 0 1.5em 1.0em;
  border:1px solid #e3e3e3;
  visibility: hidden;
  opacity: 0;
  /*transform: scaleY(0);*/
  transform-origin: center top;
  transition: .5s;
}
.top #pcNav .drop-down > div{
   background-color:rgba(51, 51, 51, 70%);
}
header .services-container{
   width: 565px;
   left: -260px;
}
header .works-container{
   width: 140px;
   left: 0;
}
header .products-container{
   width: 351px;
   left: -30px;
}
#pcNav .drop-down:hover > div{
  visibility: visible;
  /*transform: scaleY(1);*/
  opacity: 1;
  transition: .5s;
}
 #pcNav .drop-down ul{
  display: block;
}
#pcNav .drop-down ul:nth-child(1){
  margin-right:0.5em;
}
#pcNav .drop-down li{
  line-height:2.5em;
  font-size:1rem;
}
#pcNav .drop-down li>a{
  color:#fff;
  transition:all .5s ease;
}
#pcNav .drop-down li>a:hover{
  color:#effd2f;
  transition:all .5s ease;
}

#pcNav li.contact li a{
   padding:0.3em 1em 0.3em 3.5em;
   font-weight:normal;
   display: block;
}

/*---------------------------------------------------
contact
----------------------------------------------------*/
#pcNav li.contact > a {
  background-color: #EB6035;
  color: #fff;
  border-radius: 1.5em;
  transition:all .5s ease;
  width:8em;
  height: 40px;
  padding-left:1.3em;
  vertical-align: middle;
  text-align:center;
  display: table-cell;
}
#pcNav li.contact > a::before{
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  background-color:#EB6035;
  width:8em;
  height:2em;
  transition:all .5s ease;
  visibility: hidden;
  opacity: 0;
  z-index:-1;
}

#pcNav li.contact:hover > a{
  background-color:#3c1031;
  transition:all .5s ease;
  border-radius:0.5em 0.5em 0 0;
  height:50px;
}
#pcNav li.contact:hover > a::before{
  content:"";
  position:absolute;
  bottom:-1em;
  right:0;
  background-color:#3c1031;
  width:8em;
  height:2em;
  visibility: visible;
  opacity: 1;
  transition:all .5s ease;
}
#pcNav li.contact {
  position: relative;
}

#pcNav li.contact li{
  padding:0;
  font-size:1.0rem;
}
#pcNav li.contact ul {
  position: absolute;
  display: block;
  width: 243px;
  top: 62px;
  right: 18px;
  background-color: #3c1031;
  border-radius:.5em;
  box-shadow: 0px 1px 3px -1px #555;
  transition: all .2s ease;
  padding: 0.5em;
  visibility: hidden;
  opacity: 0;
}
#pcNav li.contact:hover ul{
  top: 57px;
  visibility: visible;
  opacity: 1;
 }

#pcNav li.contact::before{
  content:none;
}

#pcNav li.contact li{
  line-height: 2.5em;
}

#pcNav li.contact li a{
  color:#fff;
  border-radius: 0.35em;
}

#pcNav span.fas{
  margin-right: 0.5em;
  color:#fff;
}

#pcNav li.contact li a:hover{
  color: rgb(11, 116, 148);
  background-color:#fff;
  transition:0.5s ease;
}
#pcNav li.contact li a:hover span{
  color: rgb(11, 116, 148);
  transition:0.5s ease;
}
#pcNav li.form a::before,
#pcNav li.online a::before,
#pcNav li.tel a::before{
   position: absolute;
   transform: translateY(-50%);
   left: 24px;
   width: 17px;
   height: 17px;
}
#pcNav li.form a::before{
   content: url(/wp-content/themes/bf-official/images/icons/email-w.svg);
   top: calc(50% - 11px);
}
#pcNav li.online a::before{
   content: url(/wp-content/themes/bf-official/images/icons/check-w.svg);
   top: calc(50% - 10px);
}

#pcNav li.tel a::before{
   content: url(/wp-content/themes/bf-official/images/icons/tel-w.svg);
   top: calc(50% - 8px);
   left: 25px;
}
#pcNav li.form a:hover::before{
   content: url(/wp-content/themes/bf-official/images/icons/email-blue.svg);
}
#pcNav li.online a:hover::before{
   content: url(/wp-content/themes/bf-official/images/icons/check-blue.svg);
}
#pcNav li.tel a:hover::before{
   content: url(/wp-content/themes/bf-official/images/icons/tel-blue.svg);
}
/*********************************************************
1100px
**********************************************************/
@media screen and (max-width:1100px) {

#pcNav{
  display:none;
}
#spNav {
  display:block;
 }

/*--------------------------------------------------------
Hamburger Menu
--------------------------------------------------------*/
#spMenuBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  width: 50px;
  height: 50px;
  border: none;
  background-color:transparent;
  color:#333;
  font-size:8pt;
  transition: .5s;
  border-radius:2px;
}
.active #spMenuBtn {
  position: absolute;
  color:#fff;
  z-index: 2;
  transition: .5s;
}
.spMenuBtn-container {
  position:relative;
  display: block;
  width: 100%;
  height: 100%;
}
.spMenuBtn-container .bar {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  border-radius: 4px;
  background-color: #333;
  transition:.5s;
}
.spMenu-opened .spMenuBtn-container .bar{
  background-color:#fff;
}
.spMenuBtn-container .bar:nth-of-type(1) {
  top: 5px;
}
.spMenuBtn-container .bar:nth-of-type(2) {
  top: 15px;
}
.spMenuBtn-container .bar:nth-of-type(3) {
  top: 25px;
}
.spMenuBtn-container span:last-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(1) {
  transform: translate(-50% , 10px) rotate(-45deg);
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(2) {
  left: 100%;
  opacity: 0;
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(3) {
  transform: translate(-50% , -10px) rotate(45deg);
}
/*-------------------------------------------------------
spMenu
------------------------------------------------------- */
.spMenu-container img{
   width: 150px;
   margin: 22px 0 0 22px;
}
.spMenu-container>li{
  border-bottom: 1px solid #52384b;
}
.spMenu-container .drop-down>li:not(:last-child),
.spMenu-container .drop-down>li:not(:last-child){
  border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.spMenu-container .drop-down>li:last-child,
.spMenu-container .drop-down>li:last-child{
  border-bottom: none;
}
#spNav li a:hover,
#spNav li>button:hover{
  background-color:#4a3232;
}
.accordion li:not(:last-of-type) a{
  border-bottom:1px dotted #4a3232;
}
.spMenu-container {
  position: fixed;
  top: 0px;
  right: -100vw;
  width: 86%;
  height: 100%;
  background-color: #341212;
  transition: all .5s;
  opacity: 0;
  z-index: -1;
}
#spNav.active .spMenu-container {
   display:block;
   right: 0px;
   opacity: 1;
   z-index:1;
}
.spMenu-container>ul {
  padding: 27px 0 0 33px;
  text-align: left;
  z-index:100000;
}
.spMenu-container>ul ul{
  margin-top:0px;
  padding:0 5px 0 30px;
  text-align: left;
}
.spMenu-container li::before{
  content:none;
}
.spMenu-container li a,
.spMenu-container li>button{
  color:#fff;
  font-size:1rem;
  padding: 12px 15px;
  font-weight: normal;
  line-height: 1.2em;
}
#spNav .contact-wrapper a{
   padding-left: 47px;
}
#spNav .contact-wrapper>li::before{
   position: absolute;
   transform: translateY(-50%);
   left: 15px;
   width: 20px;
   height: 20px;
}
#spNav .contact::before{
   content: url(/wp-content/themes/bf-official/images/icons/email-w.svg);
   top: calc(50% - 3px);
}
#spNav .online-consultation::before{
   content: url(/wp-content/themes/bf-official/images/icons/check-w.svg);
   top: calc(50% - 0px);
}
#spNav .tel::before{
   content: url(/wp-content/themes/bf-official/images/icons/tel-w.svg);
   top: calc(50% - 0px);
}
#spNav .twitter::before{
   content: url(/wp-content/themes/bf-official/images/sns/twitter-w.svg);
   top: calc(50% - 0px);
}
#spNav .overlay {
  position:fixed;
  top:0;
  left:-100vw;
  background-color:#000;
  width:100%;
  height:100%;
  opacity:0;
  visibility: hidden;
 }
#spNav.active .overlay {
 left:0;
 opacity:0.6;
 visibility: visible;
 transition:0.5s;
}
header li.contact span {
  margin-left: 0px;
}
header li.contact a:hover span {
  color:#000;
}

/*背景のスクロールを止める*/
.spMenu-opened {
   overflow-y:hidden;
 }

/*---------------------------------------------------------------
accordion
----------------------------------------------------------------*/
#spNav li>button::before {
  right: 35px;
  left: initial;
  width:1.5px;
  height:8px;
  background-color:#fff;
}
#spNav li>button::after {
  right: 30px;
  left: initial;
  width:1.5px;
  height:8px;
  background-color:#fff;
}

#spNav li.active button{
  border-bottom:1px solid #52384b;
  /*こちらはJSのアニメーション*/
}
#spNav li li>a{
  font-size:0.9rem;
}

.include-accordion button{
   display:block;
   position:relative;
   width:100%;
   background-color:inherit;
   text-align:left;
   padding:10px;
}
.include-accordion button:hover{
   background-color:rgb(194,209,211);
}
.include-accordion button::before,.include-accordion button::after{
   content:"";
   position:absolute;
   top: 50%;
   width:2px;
   height:8px;
   background-color:#878787;
   transition:.5s;
}
.include-accordion button::before{
   transform: translateY(-50%) rotate(-45deg);
   right:210px;
}
.include-accordion button::after{
   right:204px;
   transform: translateY(-50%) rotate(45deg);
}
.include-accordion li.active button::before{
   transform: translateY(-50%) rotate(-135deg);
   transition:.5s;
}
.include-accordion li.active button::after{
   transform: translateY(-50%) rotate(135deg);
   transition:.5s;
}
.scroll-control.active{
   overflow-y:auto;
}
.include-accordion ul{
   height:0;
   padding:0;
   overflow:hidden;
   transition:.5s;
   background-color:transparent;
   margin:0;
}
.include-accordion>li{
   border-bottom:1px solid #503434;
}
.include-accordion li.active button{
   border-bottom:1px solid #cbcbcb;
}


}