#sales-comment{
   position: fixed;
   top: 86px;
   right: 10px;
   visibility: hidden;
   opacity: 0;
   transition: .3s;
}
#sales-comment.scrolled{
   visibility: visible;
   opacity: 1;
   transition: .3s;
   z-index: 10;
}
#sales-comment a{
   display: block;
   text-align: center;
   color: #fff;
   background-color: rgba(0, 0, 0, .7);
   padding: 10px 17px;
}
#sales-comment a:hover{
   opacity: .8!important;
}
#banana-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:11;
}
#pcNav{
  display: flex;
  margin-left: auto;
}
#spNav {
   display:none;
}
#banana-header-container{
  display: flex;
  position:relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 77px;
  box-sizing: initial;
  transition: .5s;
}
.top #banana-header-container,
#banana-header-container.scrolled{
   background-color: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(8px) brightness(105%);
}
#banana-header-container{
   display: flex;
   position:relative;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   height: 77px;
   box-sizing: initial;
 }
#banana-header.initial{
  background-color:transparent;
  transition: all 0.5s ease;
}
.spMenu-opened #banana-header{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#banana-header.scrolled{
  background-color:rgba(255,255,255,0.85);
  transition: all 0.5s ease;
}
.logo a img{
  width: 150px;
  height: auto;
  margin: 0 0 8px 25px;
}
#pcNav ul {
  display: flex;
  align-items: center;
  padding:0;
  font-size:1.1rem;
}
ul.menus{
   gap: 2em;
   margin-right: 3em;
}

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: 11px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #897c74;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a.underline:hover {
   opacity: 1;
}
a.underline:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

#banana-header.scrolled a.underline::before,
#banana-header.scrolled a.underline::after {
  border-bottom: solid 2px #000;
}

#banana-header li::before {
  content: none;
}
#pcNav li a {
  color:#333;
  position: relative;
}
#pcNav li>a.underline {
  padding: 18px 0em;
}

#pcNav li .reserve,
#pcNav li .contact{
   display: flex;
   flex-direction: column;
   height: 77px;
   color: #fff;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
}
#pcNav li .reserve img,
#pcNav li .contact img{
   width: 20px;
}

#pcNav li .reserve{
   padding: 0 2em 9px;
   background-color: #b7333f;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
#pcNav li .reserve:hover{
   background-color: #bb555e;
   opacity: 1;
}
#pcNav li .contact{
   padding: 0 1em 9px;
   background-color: #245039;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
#pcNav li .contact:hover{
   background-color: #43795c;
   opacity: 1;
}
#pcNav li .reserve:hover img,
#pcNav li .contact:hover img{
   transform: scale(1);
}

/*----------------------------------------------------
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;
  transition: all .2s ease;
  padding: 1.5em 0 1.5em 1.0em;
  border:1px solid #e3e3e3;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}

.top #pcNav .drop-down > div{
  background-color:rgba(51, 51, 51, 70%);
}

.services-container{
  width: 33em;
  left: -260px;
}
.samples-container{
  width: 15.7em;
  left: -30px;
}

#pcNav .drop-down:hover > div{
  opacity: 1;
  visibility: visible;
  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: #E85E48;
  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:#E85E48;
  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: 15.4em;
  top: 62px;
  left: -113px;
  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 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{
   position: absolute;
   font-family: 'icons';
   content: '\e901';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}
#pcNav li.online a::before{
   position: absolute;
   font-family: 'icons';
   content: '\e905';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}
#pcNav li.tel a::before{
   position: absolute;
   font-family: 'icons';
   content: '\e91f';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}


/*********************************************************
1100px
**********************************************************/
@media screen and (max-width:1100px) {

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

/*--------------------------------------------------------
Hamburger Menu
--------------------------------------------------------*/
button#spMenuBtn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 12px;
   width: 60px;
   height: 50px;
   border: none;
   background-color: transparent;
   color: #333;
   font-size: 10pt;
   transition: .5s;
   border-radius: 6px;
}

#spNav.active button#spMenuBtn {
  position: absolute;
  color:#333;
  z-index: 2;
  transition: .5s;
}

.spMenuBtn-container {
  position:relative;
  display: block;
  width: 100%;
  height: 100%;
}

.spMenuBtn-container .bar {
  display: block;
  position: absolute;
  height: 2px;
  border-radius: 10px;
  background-color: #333;
  transition:.5s;
}
.spMenu-opened .spMenuBtn-container .bar{
  background-color:#333;
  transition:.5s;
}

.spMenuBtn-container .bar:nth-of-type(1) {
  top: 12px;
  right: 0;
  width: 36px;
}
.spMenuBtn-container .bar:nth-of-type(2) {
  top: 23px;
  right: 0;
  width: 33px;
}
.spMenuBtn-container span:last-child {
  position: absolute;
  bottom: 0;
  right: -1px;
}

.spMenu-opened .spMenuBtn-container span:nth-of-type(1) {
  transform: rotate(-30deg);
  top: 15px;
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(2) {
  transform: rotate(30deg);
  width: 36px;
  top: 15px;
}


/*-------------------------------------------------------
spMenu
------------------------------------------------------- */

.spMenu-container li{
   border-bottom: 1px dotted #c9d3d3;
   margin-bottom: 22px;
   padding-bottom: 12px;
}

.spMenu-container li a:hover{
   opacity: .7;
}
.spMenu-opened main{
   display: none;
}
.spMenu-container {
   position: fixed;
   top: 0px;
   width: 100%;
   height: 100%;
   background-color: #F1E6AA;
   transition: all .5s;
   opacity: 0;
   z-index: -1;
}
#spNav.active .spMenu-container {
   display:block;
   right: 0px;
   opacity: 1;
   visibility: visible;
   z-index: 1;
   width: 100vw;
   height: 100vh;
}
.spMenu-inner {
   display: flex;
   margin-top: 30px;
   height: calc(100% - 200px);
   gap: 25px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
   z-index: 3;
}

.spMenu-container>ul {
  padding:70px 0 500px 33px;
  text-align: left;
  z-index:100000;
}

.spMenu-container li::before{
  content:none;
}
.spMenu-container li a{
  color:#000;
  font-weight: bold;
  padding: 0 20px 0;
  display: block;
  min-width: 250px;
}

.spMenu-container .reserve,
.spMenu-container .contact{
   padding: 0 20px 0 35px;
}

.spMenu-container .reserve::before{
   content: url(../images/icons/calender.svg);
   position: absolute;
   display: inline-block;
   left: -5px;
   top: calc(50% - 4px);
   transform: translateY(-50%) scale(.5);
}
.spMenu-container .contact::before{
   content: url(../images/icons/e-mail.svg);
   position: absolute;
   display: inline-block;
   left: -5px;
   top: calc(50% - 4px);
   transform: translateY(-50%) scale(.5);
}


#spNav div.overlay {
  position:fixed;
  top:0;
  background-color:#000;
  width:100%;
  height:100%;
  opacity:0;
  visibility: hidden;
  z-index: -1;
}
#spNav.active div.overlay {
 left:0;
 opacity:0.6;
 visibility: visible;
 z-index: 1;
 transition:0.5s;
}
.circle {
   overflow: hidden;
   width: 2000px;
   height: 2000px;
   border-radius: 50%;
   z-index: 2;
   background-color: #F8FAE2;
   position: absolute;
   bottom: -3000px;
   left: -3000px;
   opacity:0;
}
.active .circle {
   width: 3000px;
   height: 3000px;
   bottom: -1500px;
   left: -1500px;
   transition: 2s;
   opacity: 1;
}
.spMenu-container img {
   width: 180px;
   margin: 22px auto 30px 30px;
   position: relative;
   z-index: 3;
}
.spMenu-container .logo-inmg-wrapper{
   width: 100%;
   text-align: center;
}
/*背景のスクロールを止める*/
body.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;
}
}

/*********************************************************
599px
**********************************************************/
@media screen and (max-width:599px) {
#sales-comment{
   font-size: 12px;
   top: unset;
   right: unset;
   bottom: 12px;
   right: 10px;
} 
#sales-comment a{
   padding: 8px 12px;
   line-height: 18px;
}
.top-msg {
   min-width: unset!important;
}
}