@charset "utf-8";


/*=================================
   header(pc)
  =================================*/
.fixed-header{
	background: #fff;
	z-index: 10000;
	padding: 20px 0;	
	position: fixed;	
	margin-top: -10px;
	justify-content: center;
	width: 100%;
}

.fixed-header .header_inner{
	display: flex;
	justify-content: space-between; /* 左右に分ける */	
	flex-direction: row;
	align-items: center;
}

@media screen and (max-width: 834px){
.fixed-header{
	padding: 20px 0 0;	
}
}	


/*naviのlastがずれるので*/
.fixed-header nav{
text-align: right;	
}

/*navi*/
.fixed-header .navi01{
	color: #804c2e;
	flex: 3;
}

.fixed-header .navi01 a{
font-size: 16px;
color: #804c2e;	
}


.fixed-header .navi01 > li{
  position: relative;
  display: inline-block;
  font-weight: normal;
  margin-right: 10px;
  transition: 0.5s;
  padding-left: 0;  /* ← 消す */
}

.fixed-header .navi01 li a{
  display: block;
  padding-left: 20px;  /* ← ここに移動 */
}


.fixed-header .navi01>li:last-child{
padding-right: 20px;
	
}


.fixed-header .navi01>li::before{
  content: "";
  width: 1px;
  height: 16px;
  background-color: #804c2e;
  position: absolute;
  top: 5px;
  left: 0;
}

.fixed-header .navi01>li:last-child::after{
  content: "";
  width: 1px;
  height: 16px;
  background-color: #804c2e;
  position: absolute;
  top: 5px;
  right: 0px;
}


.fixed-header .navi01 li a:hover{
transition : all 0.7s ease 0s;
color: #8f1f41;		
}

@media screen and (max-width: 834px){
	
.fixed-header nav{
text-align: left;	
}	

.fixed-header .navi01>li:last-child{
padding-right: 0px;
	
}


.fixed-header .navi01>li::before{
  content: "";
  width: initial;
  height: initial;
  background-color: none;
  position: absolute;
  top: initial;
  left: 0;
}

.fixed-header .navi01>li:last-child::after{
  content: "";
  width: initial;
  height: initial;
  background-color: none;
  position: absolute;
  top: initial;
  right: initial;
}
	
.logo{
	text-align: center;
	margin: auto;
	
	}
	
}



/* ======================
   ハンバーガー
====================== */
.openbtn1{
  display: none;
  position: relative;
  width: 40px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
}

/* ===== 3本線（中央固定） ===== */
.openbtn1 span:nth-of-type(-n+3){
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;            /* ★ 固定幅にする */
  height: 2px;
  background: #000;
  transition: 0.4s;
}

.openbtn1 span:nth-child(1){ top: 0; }
.openbtn1 span:nth-child(2){ top: 10px; }
.openbtn1 span:nth-child(3){ top: 20px; }

/* ===== ×アニメ ===== */
.openbtn1.active span:nth-child(1){
  top: 10px;
  transform: translateX(-50%) rotate(45deg);
}

.openbtn1.active span:nth-child(2){
  opacity: 0;
}

.openbtn1.active span:nth-child(3){
  top: 10px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===== MENU / CLOSE テキスト ===== */
.menu-text{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* テキスト切替 */
.menu-text::after{
  content: "MENU";
}

.openbtn1.active .menu-text::after{
  content: "CLOSE";
}


/* ======================
   SP（560px以下）
====================== */

@media screen and (max-width: 834px){

  .openbtn1{
    display: block;
  }
	
  .fixed-header .navi01{
    display: flex;
    flex-direction: column;
    flex: initial;
  }

  .nav{
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #f3d64f;
    transition: 0.4s;
    padding-top: 80px;
    /* ★ これ追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	  z-index: 9998; 
  }

  .nav.active{
    right: 0;
  }

  .navi01{
    flex-direction: column;
    gap: 20px;
    padding-left: 30px;
  }

}

/*=================================
 共通
  =================================*/

.fixed-header-container figure img{cursor: pointer;}