/*
 * 中古スマホ価格ドットコム
 * Global header / primary navigation.
 * Uses native Twenty Twenty-One navigation + JS.
 */

.site-header {
width: min(1180px, calc(100% - 40px));
max-width: none;
margin: 0 auto;
padding: 22px 0 18px;
border-bottom: 1px solid #e5ebf3;
}

.site-header.has-menu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}

.site-header .site-branding {
flex: 0 1 auto;
margin: 0;
}

.site-header .site-title {
margin: 0;
color: #17233b;
font-size: 19px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.02em;
}

.site-header .site-title,
.site-header .site-title a {
color: #17233b;
text-decoration: none;
}

.site-header .site-title a:hover {
color: #2368c9;
}

.site-header .site-description {
margin: 4px 0 0;
color: #7a8799;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
}

.site-header .primary-navigation {
margin-left: auto;
}

.site-header .primary-navigation > .primary-menu-container {
margin: 0;
}

.site-header .primary-navigation > div > .menu-wrapper {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}

.site-header .primary-navigation > div > .menu-wrapper > li {
margin: 0;
padding: 0;
}

.site-header .primary-navigation > div > .menu-wrapper > li > a {
display: flex;
align-items: center;
min-height: 42px;
padding: 9px 11px;
border-radius: 9px;
color: #34445b;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
white-space: nowrap;
transition:
color 0.16s ease,
background-color 0.16s ease;
}

.site-header .primary-navigation > div > .menu-wrapper > li > a:hover {
background: #f0f5fc;
color: #2368c9;
text-decoration: none;
}

.site-header .primary-navigation .usp-menu-search > a,
.site-header .primary-navigation .usp-menu-search > a:link,
.site-header .primary-navigation .usp-menu-search > a:visited {
margin-left: 5px;
padding-right: 17px;
padding-left: 17px;
background: #2368c9;
color: #ffffff;
}

.site-header .primary-navigation .usp-menu-search > a:hover,
.site-header .primary-navigation .usp-menu-search > a:focus {
background: #1857ae;
color: #ffffff;
}

body.home .site-header + .site-content {
margin-top: 0;
}

@media only screen and (min-width: 893px) {

.site-header .menu-button-container {
display: none;
}

}

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

.site-header,
.site-header.has-menu {
width: calc(100% - 24px);
min-height: 68px;
padding: 14px 0;
align-items: center;
gap: 12px;
}

.site-header .site-branding {
max-width: calc(100% - 64px);
}

.site-header .site-title {
font-size: 16px;
line-height: 1.35;
}

.site-header .site-description {
display: none;
}

.site-header .menu-button-container {
padding: 0;
}

.site-header .menu-button-container #primary-mobile-menu {
padding: 8px;
color: #17233b;
font-size: 12px;
font-weight: 800;
}

.primary-navigation-open .site-header .primary-navigation {
background: #ffffff;
}

.site-header .primary-navigation > div > .menu-wrapper {
display: block;
}

.site-header .primary-navigation > div > .menu-wrapper > li > a {
min-height: 52px;
padding: 14px 18px;
border-radius: 10px;
font-size: 15px;
}

.site-header .primary-navigation .usp-menu-search > a,
.site-header .primary-navigation .usp-menu-search > a:link,
.site-header .primary-navigation .usp-menu-search > a:visited {
justify-content: center;
margin: 12px 18px 0;
background: #2368c9;
color: #ffffff;
}

}