/* =========================================
HEADER COMPONENT
========================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height-dt);
background-color: var(--white);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-inner {
max-width: 1400px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
}

.header-left {
display: flex;
align-items: center;
gap: 20px;
}

.brand-logo {
display: flex;
align-items: center;
gap: 15px;
}

.brand-logo img {
height: 48px;
}

.brand-text {
display: flex;
flex-direction: column;
color: var(--primary-color);
font-weight: 400;
font-size: 20px;
line-height: 1.3;
letter-spacing: 0.1em;
font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
}

.header-right {
display: flex;
align-items: center;
gap: 30px;
}

.desktop-nav ul {
display: flex;
align-items: center;
gap: 25px;
}

.desktop-nav > ul > li {
position: relative;
}

.desktop-nav > ul > li > a {
font-size: var(--font-sm);
font-weight: 400;
color: var(--text-color);
padding-bottom: 5px;
position: relative;
display: block;
}

.desktop-nav > ul > li > a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--primary-color);
transform: scaleX(0);
transition: transform 0.3s ease;
}

.desktop-nav > ul > li:hover > a {
color: var(--primary-color);
}

.desktop-nav > ul > li:hover > a::after {
transform: scaleX(1);
}

/* Dropdown Menu */
.desktop-nav .has-dropdown::after {
content: '';
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 15px; /* Transparent bridge so hover doesn't break */
}

.desktop-nav .has-dropdown .dropdown-menu {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: var(--white);
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 15px 0;
min-width: 220px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
z-index: 1000;
}

.desktop-nav .has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}

.desktop-nav .dropdown-menu a {
display: flex;
align-items: center;
padding: 10px 20px;
font-size: 0.85rem;
font-weight: 400;
color: var(--text-color);
transition: color 0.2s ease, background-color 0.2s ease;
text-decoration: none;
white-space: nowrap;
}

.desktop-nav .dropdown-menu a::before {
content: "→";
margin-right: 12px;
color: var(--primary-color);
font-size: 1.1rem;
}

.desktop-nav .dropdown-menu a:hover {
color: var(--primary-color);
background-color: #f9f9f9;
}

.btn-inquiry {
background-color: var(--primary-light);
color: var(--primary-color);
padding: 12px 30px;
border-radius: 4px;
font-weight: 500;
font-size: var(--font-sm);
}

.btn-inquiry:hover {
background-color: var(--primary-color);
color: var(--white);
}

.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}

.menu-toggle span {
width: 25px;
height: 2px;
background-color: var(--text-color);
transition: 0.3s;
}

/* Responsive */
@media (max-width: 1280px) {
.header-right {
gap: 15px;
}

.desktop-nav ul {
gap: 15px;
}
}

@media (max-width: 991px) {
.site-header {
height: var(--header-height-sp);
}

.header-inner {
padding: 0 30px;
}

.desktop-nav,
.header-right .btn-inquiry {
display: none;
}

.menu-toggle {
display: flex;
z-index: 1001;
position: relative;
}

/* Mobile Menu Open Styles */
body.menu-open {
overflow: hidden;
}

body.menu-open .menu-toggle span:nth-child(1),
body.menu-open .menu-toggle span:nth-child(3) {
opacity: 0;
}

body.menu-open .menu-toggle span:nth-child(2) {
background-color: var(--primary-color);
}

body.menu-open .desktop-nav {
display: block;
position: fixed;
top: var(--header-height-sp);
left: 0;
width: 100%;
height: calc(100vh - var(--header-height-sp));
background-color: var(--white);
overflow-y: auto;
padding: 40px;
z-index: 999;
}

.desktop-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}

.desktop-nav > ul > li {
width: 100%;
display: block;
}

.desktop-nav > ul > li > a {
padding: 15px 0;
font-size: 1rem;
font-weight: 700;
color: var(--text-color);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f0f0;
}

.desktop-nav > ul > li > a::after {
display: none;
}

.desktop-nav .has-dropdown > a {
border-bottom: none;
pointer-events: none;
padding-bottom: 10px;
}

.desktop-nav .has-dropdown .dropdown-menu {
position: static;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
border: none;
padding: 0 0 10px 0;
min-width: 100%;
display: flex;
flex-direction: column;
}

.desktop-nav .has-dropdown::after {
display: none;
}

.desktop-nav .has-dropdown .dropdown-menu a {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
color: #666;
font-size: 0.95rem;
}

.desktop-nav .has-dropdown .dropdown-menu a::before {
display: none;
}

.desktop-nav .has-dropdown .dropdown-menu a::after,
.desktop-nav > ul > li:not(.has-dropdown) > a::after {
content: "→";
color: var(--primary-color);
font-size: 1.1rem;
display: block;
transform: none;
position: static;
width: auto;
height: auto;
background-color: transparent;
}

/* Mobile Inquiry Button */
.mobile-inquiry-wrapper {
margin-bottom: 30px;
}

.btn-inquiry-mobile {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
background-color: var(--primary-light);
color: var(--primary-color);
padding: 15px;
border-radius: 8px;
font-weight: 700;
font-size: var(--font-sm);
text-decoration: none;
}

.icon-circle-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid var(--primary-color);
border-radius: 50%;
font-size: 0.8rem;
}
}

@media (max-width: 768px) {
.header-inner {
padding: 0 30px;
}
.brand-logo {
gap: 10px;
}
}

@media (max-width: 480px) {
.brand-logo img {
height: 38px;
}
.brand-text {
font-size: 0.65rem;
}
.menu-toggle span {
width: 22px;
}
}