@charset "utf-8";

/*
.header.UpMove{
animation: UpAnime 0.5s forwards;
}*/

/*
.header.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100px);
}
}
@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}*/


.header{
  padding:2.5rem 2.5% 0;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
}

.header-logo{
  display: block;
  width: 12%;
  max-width:192px;
  opacity:0;
  transition:0.3s;
  pointer-events:none;
}

.header-logo.active{
  opacity:1;
  pointer-events:auto;
}

.flow-btn {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 200px; /* お好み */
  height: 56px; /* お好み */
  background: transparent;
  color: #C49E37;
  border:1.5px solid #C49E37;
  text-decoration: none;
  white-space: nowrap;
  border-radius:28px;
}

.flow-btn:hover {
  color: #C49E37;
}

.green .flow-btn{
  color:#181618;
  border-color:#181618;
}

.green .hamBar{
  color:#181618;
}

.green .hamBar.active img{
  filter: brightness(1);
}

.green .hamBar.active p::after{
  color:#C49E37;
}

.green .flow-btn p::after,
.green .hamBar img{
  filter: brightness(0);
}

.green .flow-btn:hover{
  color:#181618;
}

.flow-btn > div {
  display: flex;
  align-items: center;
  width: max-content;
  animation: flowText 8s linear infinite;
}

.flow-btn p {
  flex-shrink: 0;
  margin: 0;
  padding-right: 40px;
  white-space: nowrap;
  display:flex;
  align-items:center;
  gap:8px;
}

.flow-btn p::after {
  content:"";
  display:block;
  width:7.5px;
  height:7.5px;
  background:url(https://bubutan.jp/system_panel/uploads/images/20260611121452918728.png) no-repeat center/contain;
}

@keyframes flowText {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / 3));
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


.header_menu{
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
}

.header-right{
  display: flex;
  align-items: center;
  gap:1rem;
}

.hamBtn {
  cursor: pointer;
  z-index: 9999;
  transition: all .5s;
  display: flex;
  align-items: center;
  width: 42px;
  height: 60px;
  justify-content: center;
}

.hamBar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  color:#C49E37;
  font-size:14px;
  justify-content: end;
}

.hamBar img{
  width:2.5rem;
}

.hamBar.active p {
  font-size:0;
}

.hamBar.active p::after {
  content:"CLOSE";
  font-size:14px;
}

.ham-cover{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#181618;
  opacity:0;
  z-index:-1;
  transition:0.3s;
}

.ham-cover.active{
  z-index:1000;
  opacity:0.88;
}

.sp__menu {
  background: url(https://bubutan.jp/system_panel/uploads/images/20260611124206960679.png) no-repeat center/contain;
  position: fixed;
  bottom:0;
  right: 5%;
  opacity: 0;
  aspect-ratio:512/980;
  padding: 0 3% 5%;
  width: 26%;
  max-width:512px;
  display:flex;
  flex-direction: column;
  justify-content: end;
  transition: 1s;
  z-index:-100;
}

.sp__menu a{
  color: #44403F;
  font-size:clamp(1.125rem, 0.833rem + 0.97vw, 2rem);
}

.sp__menu a:hover{
  color:#C49E37 !important;
  opacity:1;
}

.ham-wrap{
  margin:0 auto 100px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-transform: uppercase;
}

.ham-wrap a img{
  width:1.5rem;
}


.sp__menu.active {
  opacity: 1;
  visibility: visible;
  z-index:100000;
}

body:has(.sp__menu.active) .header-logo,
body:has(.sp__menu.active) .flow-btn{
  opacity:0;
  pointer-events:none;
}

.online-a{
  position:relative;
}

.online-a > img{
  transition: 0.3s;
}

.online-a::before {
  content: "";
  position: absolute;
  width: 69%;
  bottom: 11%;
  background: url(https://bubutan.jp/system_panel/uploads/images/20260616113429540396.png) no-repeat center / contain;
  opacity: 0;
  transition: 0.3s;
  aspect-ratio: 263 / 132;
  right: -0.1%;
}

.online-a:hover{
  opacity:1;
}

.online-a:hover::before{
  opacity:1;
}

.online-a:hover > img{
  opacity:1;
}

@media (max-width: 1700px) {
  .sp__menu {
    padding: 0 3% 2%;
  }
  .ham-wrap{
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
}

@media (max-width: 1024px) {
  .header-logo{
    width:150px;
  }
  .header {
    padding: 1.5rem 2.5% 0;
  }
}

@media  (min-width: 768px)  and  (max-height: 750px) {
  .ham-wrap {
    gap: 2.5rem;
    margin-bottom: 2rem;
    gap: 2rem;
  }
}

@media  (min-width: 768px)  and  (max-width: 1024px) and  (min-height: 900px) {
  .sp__menu{
    width: 60%;
    max-width: 600px;
    padding: 0 5% 2%;
    right:auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    justify-content: flex-end;
    gap: 5%;
  }
  .ham-wrap {
    gap: 3.5rem;
  }
}


@media (max-width: 767px) {
  .header{
    padding: 0.5rem 2.5% 0;
  }
  .flow-btn{
    width: 130px;
    height: 40px;
  }
  .hamBtn{
    width: 30px;
    height: 50px;
  }
  .hamBar img {
    width: 30px;
  }
  .hamBar{
    font-size:10px;
  }
  .sp__menu {
    width: 85%;
    padding: 2.5rem 5%;
    max-width:335px;
    top: 56px;
  }
  .header-logo{
    width: 100px;
  }
  .ham-wrap {
    gap: 2rem;
    margin-bottom: 2rem;
  }
  .hamBar.active p::after {
    content: "CLOSE";
    font-size: 10px;
  }
}


#header.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}