@charset "utf-8";

/*========= ボタンのためのCSS ===============*/

.openbtn1{
  position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
  padding: 0;
  top:10px;
  right: 2%;
  cursor: pointer;
  width: 42px;
  height:42px;
  background:#f1e6d4;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
@media screen and (max-width: 767px){
.openbtn1{
  top:10px; 
  right:20px;
}
}
/*肉球に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 8px;
  height: 3px;
  border-radius: 2px;
  background-color: #3a3122;
  width: 60%;
}

.openbtn1 span:nth-of-type(1) {
top:11px; 
}

.openbtn1 span:nth-of-type(2) {
top:19px;
}

.openbtn1 span:nth-of-type(3) {
top:27px;
}

.openbtn1.active .openbtn-area{
  transform: rotateX(360deg);
}

.openbtn1.active span:nth-of-type(1) {
    visibility: hidden;
}
.openbtn1.active span{
  opacity: 1;
  background: none;
  width: 60%;
  left:8px;
  height:50px;
  top:0;
}

.openbtn1.active span:nth-of-type(2)::before {
  font-family: "Font Awesome 6 Free";
  content: "\f1b0";
  font-size:2.5rem;
  font-weight: 900;
  color: #3a3122;
  position: absolute;
  top:3px;
  left:0;
 }
 .openbtn1.active span:nth-of-type(2)::after {

  content: "close";
  font-size:1.2rem;
  color: #3a3122;
  position: absolute;
  top:19px;
  left:0;
 }
.openbtn1.active span:nth-of-type(3){
    visibility: hidden;
}


/*=========================================*/



.title_symbol{
  display: inline-block;
  width:1.3rem;
  height:1.3rem;
  line-height: 2.5rem;
  margin:0;
  padding:0;
background-image:url(https://stella-paws.littlestar.jp/wp-content/themes/StellaPaws2023/img/stella.png) ;
background-size:contain;
background-position: bottom center;
background-repeat: no-repeat;
}

#header .menu a,
#header .submenu a{
  color: #3a3122;
  position:relative;
  margin:auto 5px;
  transition: all .3s;
  text-decoration: none;
  outline: none;
  border: 0;
  z-index: 999;
}

#header .menu a,
#header .submenu a{
  box-shadow: inset 0 0 0 0 #54b3d6;
  padding: 4px 6px;
  margin:0;
}

#header .menu a:hover,
#header .submenu a:hover {
  color: #fff;

background: #54b3d6;
border-radius: 5px;
transition: color .3s ease-in-out, background .3s ease-in-out;
}



.dropdown__lists {
 display: none;
 position: absolute;
 z-index: 999;
}
.gnavi__list:hover .dropdown__lists {
 display: block;
}

.dropdown__lists {
 transform: scaleY(0);
 transform-origin: left top;
 transition: all .3s;
 position: absolute;
}


.dropdown__list {
 transition: all .3s;
 border-radius: 5px;
 margin-bottom:2px;
 margin-left:1rem;
 background-color: #e9fbffdd;
 width:calc( 100% - 1rem);
}

.dropdown__list a {
 display: block;
 font-size: 1.6rem;
 padding:0;
 width:calc( 100% + 2rem);
}
.dropdown__list a:hover{
display: block;
 color:#fff;
 background: #54b3d6;
 padding:0;
 border-radius: 5px;
 height: max-content;
 width:calc( 100% + 2rem);
}

.gnavi__list:hover .dropdown__lists {
    transform: scaleY(1);
}

#header .hidden{
  display: none;
}


/*========= ナビゲーションのためのCSS ===============*/

#g-nav.panelactive{
  right: 0;
}

#g-nav{
  position:fixed;
  z-index: 999;
  top:0;
  right: -120%;
  width:100%;
  height: 100vh;
  background:#d6f3f9;
  transition: all 0.6s;
 border: 0px solid orange;
 text-align: left;
}
#g-nav .logo{
  position: absolute;
  display: block;
  z-index: 999;
  margin:0;
  padding:0;
  top:20px;
  left:50%;
  transform: translateX(-50%);
}

/*ナビゲーション*/
#g-nav ul {
  position: absolute;
  display: block;
  z-index: 999;
  font-size: 2.0rem;
  left:50%;
  top: 150px;
  transform: translateX(-50%);
  text-align: left;
  width:max-content;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav-list li,
#g-nav li{
  color:#43413d;
  display: block;
  list-style: none;
  text-align: left;
  font-size:1.8rem;
  line-height:3.5rem;
  border-bottom:1px dotted #999;
  font-weight: 400;
}
#g-nav li a{
text-decoration: none;
padding:0.5rem;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 400;
text-align: left;
}

#g-nav li.submenu{
 display: block;
 list-style: none;
}


#g-nav li.menu::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  content: "\f1b0";
  display: inline;
  margin-right:0.5rem;
  background-image:none;
  vertical-align: top;
 }
#g-nav li.menu:nth-of-type(10):before,
#g-nav li.menu:last-of-type:before{
  content: "";
}


#g-nav li.submenu a::before{
 font-family: "Font Awesome 6 Free";
 font-weight: 700;
 content: "\f068";
 display: inline-block;
 margin-left:1.5rem;
 background-image:none;
 vertical-align: top;
}
#g-nav li.submenu a{
text-decoration: none;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 400;
}

#g-nav li.submenu.active a{
 color: #999;
 }

 #g-nav li:nth-child(10),
 #g-nav li:last-of-type{
  margin-top:1.6rem;
  text-align: center;
  border-bottom: 0;
}
#g-nav li:nth-child(10) a{
  font-size: 2.2rem;
  color: #fff;
}
#g-nav li:nth-child(10) a::before{
  font-family: "Font Awesome 6 Free";
  content: "\f1d8"; 
  display: inline-block;
  font-weight: 700;
  margin-right:0.8rem;
  background-image:none;
}