.header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: transparent; /* 初期は透明 */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.header-inner {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
	.header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
header {
  transition: background-color 0.3s ease;
  background-color: transparent;
}

header.bg-change {
  background-color: #fff; /* ←好きな色に変更 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけたい場合 */
}
/* 左側ロゴエリア */
.header-left {
	max-width: 40%;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo {
	height: 30px;
	width: auto;
}
/* 右側メニューエリア */
.header-right {
	max-width: 60%;
	flex: 1;
	background: #ECE9D8;
	border-bottom-left-radius: 10px;
	display: flex;
	justify-content: center; /* 中央寄せ */
	align-items: center;
	height: 100%;
	padding-right: 0; /* 不要なので削除 */
	position: relative;
}
/* メニュー */
.nav {
	width: 100%; /* 幅を持たせる */
}

@media screen and (min-width: 1165px) {
.hamburger, .mobile-menu {
	display: none
}
.nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.nav ul li {
	flex: 1; /* liを均等幅に */
}
.nav ul li a {
	display: flex;              /* 中央揃えしつつ幅いっぱい */
	justify-content: center;
	align-items: center;
	width: 100%;                /* li幅いっぱい */
	height: 40px;               /* 高さを固定 */
	text-decoration: none;
	color: #333;
	transition: background 0.3s ease, color 0.3s ease;
	font-size: 0.8em;
}
.nav ul li a.reserve {
	background: #FEBE65;
}
.nav ul li a:hover {
	background: #ECE9D8;
}
}

/* === PC時の基本設定は前回と同じ === */

@media screen and (max-width: 1164px) {
.header {
	height: 80px;
}
/* メインナビ非表示 */
.nav {
	display: none;
}
/* ハンバーガー表示 */
 

  /* header-right の背景と角丸を消す、幅を最小に */
.header-right {
	background: none;
	border-bottom-left-radius: 0;
	max-width: none;
	width: auto;
	padding-right: 0;
	display: flex;
	justify-content: flex-end; /* 右端に寄せる */
	align-items: center;
}
/* ロゴを中央に配置 */
.header-left {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	max-width: none;
	width: auto;
	display: flex;
	justify-content: center;
	z-index: 900;
}
.logo {
	height: 45px;
}
/* header-inner を左右配置に */
.header-inner {
	position: relative;
	display: flex;
	justify-content: space-between; /* 左右に分離 */
	align-items: center;
	padding: 0 20px; /* ハンバーガー右端20px */
}
/* ハンバーガー基本 */
.hamburger {
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	width: 30px;
	height: 22px;
	
	position: relative;
}
	.hamburger.active{
		z-index: 1001;
	}
.hamburger span {
	width: 28px;
	height: 3px;
	background: #333;
	border-radius: 2px;
	position: absolute;
	left: 0;
	transition: all 0.35s ease; /* ← 全体をなめらかに */
	transform-origin: center;
}
/* 通常位置 */
.hamburger span:nth-child(1) {
	top: 0;
}
.hamburger span:nth-child(2) {
	top: 8px;
}
.hamburger span:nth-child(3) {
	top: 16px;
}
/* 開いた時（×） */
.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translateY(8px);
	transition-delay: 0.05s; /* ← 少し遅れて動く */
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
	transition-delay: 0s;
}
.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translateY(-11px) translateX(3px);
	transition-delay: 0.1s; /* ← さらに少し遅れて動く */
}
/* モバイルメニュー */
.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(236, 233, 216, 0.95);
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(0.95);
	opacity: 0;
	transition: all 0.4s ease;
	z-index: 1000;
	pointer-events: none;
}
.mobile-menu.active {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
.mobile-menu ul {
	list-style: none;
	text-align: center;
	padding: 0;
	width: 90%;
}
.mobile-menu li {
	margin: 20px 0;
}
.mobile-menu a {
  display: block;
  width: 90%;
  margin: 12px auto;
  padding: 10px;
  background: #fff;
  color: #333;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  font-size: 1.5rem;
}
.mobile-menu a.reserve {
	background: #FEBE65;

}
}