header {
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.10);
position: sticky; top: 0; z-index: 100;
}
.header-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 0;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(0.75rem, -1.5rem + 4vw, 1.5rem);
padding: 0 12px;
}
.header-logo img { height: 36px; width: auto; }
.header-nav {
display: flex;
align-items: center;
gap: clamp(0.75rem, -3rem + 6.67vw, 2rem);
}
.header-nav a {
line-height: 24px;
white-space: nowrap;
}
.header-nav a:hover { opacity: 1;color: var(--green-dark); }
/* ─── ドロップダウンナビ ─── */
.nav-item {
position: relative;
display: flex; align-items: center;
}
.nav-item > a,.nav-item > span {
font-size: clamp(0.75rem, 1.33vw, 1rem);
}
.nav-has-children > a,
.nav-has-children > span {
display: flex; align-items: center; gap: 4px;
}
.nav-has-children > span { cursor: default; }
.nav-has-children > a::after,
.nav-has-children > span::after {
content: '';
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #6a7282;
transition: transform .2s;
flex-shrink: 0;
}
.nav-item:hover > a::after,
.nav-item:hover > span::after { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: 100%;
left: 50%; transform: translateX(-50%);
min-width: 200px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 200;
opacity: 0;
visibility: hidden;
transition: opacity .18s, visibility .18s;
}
/* ホバー領域の隙間を埋めるブリッジ */
.nav-dropdown::before {
content: '';
position: absolute;
top: -8px; left: 0; right: 0; height: 8px;
}
.nav-item:hover .nav-dropdown {
opacity: 1; visibility: visible;
}
.nav-dropdown a {
display: block;
padding: 9px 16px;
font-size: 14px; line-height: 22px;
color: var(--text-mid);
white-space: nowrap;
}
.nav-dropdown a:hover {
color: var(--green-dark); background: var(--bg-gray);
}
/* メガメニュー（買取品目）3カラム */
.nav-dropdown.mega {
display: grid;
grid-template-columns: repeat(3, auto);
min-width: 480px;
padding: 10px 4px;
left: 0; transform: none; /* 左端基準 */
}
.nav-dropdown.mega a { font-size: 13px; padding: 7px 14px; }
/* 最後のドロップダウンは右端揃え */
.nav-item:last-child .nav-dropdown {
left: auto; right: 0; transform: none;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-phone span,.btn-line span {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.btn-phone {
display: flex; align-items: center; gap: clamp(0.25rem, -0.5rem + 1.33vw, 0.5rem);
background: var(--gold);
color: var(--white);
padding: 8px clamp(0.75rem, 1.33vw, 1rem);;
border-radius: 8px;
height: 40px;
font-size: clamp(0.75rem, 1.33vw, 1rem);;
font-weight: 600;
white-space: nowrap;
}
.btn-phone img { width: 16px; height: 16px; }
.btn-line {
display: flex; align-items: center; gap: clamp(0.25rem, -0.5rem + 1.33vw, 0.5rem);
background: var(--green-dark);
color: var(--white);
padding: 8px clamp(0.75rem, 1.33vw, 1rem);;
border-radius: 8px;
height: 40px;
font-size: clamp(0.75rem, 1.33vw, 1rem);;
white-space: nowrap;
}
.btn-line img { width: clamp(1.25rem, 0.5rem + 1.33vw, 1.5rem); height: clamp(1.25rem, 0.5rem + 1.33vw, 1.5rem); }
/* ══════════════════════════════════════════
HAMBURGER / MOBILE MENU
══════════════════════════════════════════ */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px; height: 40px;
background: none; border: none; cursor: pointer;
padding: 4px; flex-shrink: 0;
}
.hamburger span {
display: block;
width: 22px; height: 2px;
background: #364153;
border-radius: 2px;
transition: transform .25s, opacity .25s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
top: 60px; left: 0; right: 0; bottom: 0;
background: var(--white);
z-index: 98;
overflow-y: auto;
padding: 0 0 40px;
}
.mobile-menu.active { display: block; }
.mobile-menu nav {
display: flex; flex-direction: column;
border-top: 1px solid var(--border);
}
.mobile-menu nav a {
display: block;
padding: 12px;
font-size: 16px;
}
.mobile-menu nav a:hover { color: var(--green-dark); }
.mobile-menu nav .nav-second a {
    padding: 12px;
}
.mobile-menu-actions {
display: flex; flex-direction: column; gap: 12px;
margin-top: 20px;
}
.mobile-menu-actions .btn-phone,
.mobile-menu-actions .btn-line {
height: 52px; width: 100%;
justify-content: center; font-size: 16px;
border-radius: 8px;
}
/* ─── モバイルアコーディオン ─── */
.mob-nav-item { border-bottom: 1px solid var(--border); }
.mob-nav-row {
display: flex; align-items: center; justify-content: space-between;    padding: 0 12px;
}
/* サブなし行：<a> がそのまま全幅リンク */
.mob-nav-row > a {
flex: 1; display: block;
padding: 14px 0;
font-size: 16px; color: #364153;
}
.mob-nav-row > a:hover { color: var(--green-dark); }
/* サブあり行：行全体がタップ領域 */
.mob-nav-row.mob-has-sub {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.mob-nav-label {
flex: 1; display: block;
padding: 14px 0;
font-size: 16px; color: #364153;
pointer-events: none; /* タップは親 div で受ける */
}
/* 矢印アイコン（視覚のみ） */
.mob-nav-toggle {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
color: #6a7282; font-size: 18px;
transition: transform .25s;
flex-shrink: 0;
pointer-events: none;
}
.mob-nav-toggle.open { transform: rotate(180deg); }
.mob-nav-sub {
display: none;
background: var(--bg-gray);
padding: 4px 0;
}
.mob-nav-sub.open { display: block; }
.mob-nav-sub a {
display: block;
padding: 10px 16px;
font-size: 14px; color: #4a5565; line-height: 1.5;
}
.mob-nav-sub a:hover { color: var(--green-dark); }
/* 買取品目は2カラム */
.mob-nav-sub.mega-sub { columns: 2; column-gap: 0; }
.mob-nav-sub.mega-sub a { break-inside: avoid; font-size: 11px; padding: 8px 12px; }
@media (max-width: 900px) {
/* ─ Header ─ */
header { position: sticky; top: 0; z-index: 100; }
.header-inner { height: 60px; padding: 0 12px; }
.header-logo img { height: 30px; }
.header-nav, .header-actions { display: none; }
.hamburger { display: flex; }
}