@charset "Shift_JIS";

/* ===============================
ヘッダー全体
=============================== */
header {
position: fixed;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.9);
padding: 10px 40px;
box-sizing: border-box;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}

/* ===============================
メニュー全体
=============================== */
.menu {
display: flex;
align-items: center;
}

/* ===============================
メニュー項目
=============================== */
.menu li {
list-style: none;
position: relative;
padding: 0 3px;
}

/* ===============================
区切り線
=============================== */
.menu li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 20px;
background: #ddd;
}

/* ===============================
通常メニュー
=============================== */
.menu a {
font-size: 13px;
color: #5d5550;
text-decoration: none;
font-weight: 600;
padding: 19px 12px;
transition: 0.3s;
}

/* ===============================
ホバー（画像のON状態の代わり）
=============================== */
.menu a:hover {
color:#999999;
background: #f7f7f7;
}

/* ===============================
CTA（撮影予約ボタン）
=============================== */
.menu a.cta {
background: #f2972e;
color: #fff;
padding: 20px 16px;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}

/* ===============================
CTAアイコン（画像）
=============================== */
.menu a.cta .icon {
width: 16px;
height: 16px;
display: block;
}

/* ===============================
キャンペーンボタン
=============================== */
.menu a.cta.sub {
background: #534741;
}

/* ===============================
CTAホバー
=============================== */
.menu a.cta:hover {
background: #f5c000;
}

.menu a.cta.sub:hover {
background: #f5c000;
}

/* CTAの前の縦線を消す */
.menu li:has(.cta)::after {
  display: none;
}




/* CTA同士の間をゼロに */
.menu li:has(.cta) {
  padding: 0;   /* ←余白消す */
}

/* 予約とキャンペーンをピッタリ */
.menu a.cta {
  margin: 0;
}

/* 2つ目（キャンペーン）を少し重ねる */
.menu a.cta.sub {
  margin-left: -1px;  /* ←境目の隙間消し */
}