[コード保管庫]ヘッダーメニューCSS（過去版）
/**** ヘッダー ****/
.jumbotron-overlay {
background: none;
}
/* [MENU]PCでハンバーガー表示 */
@media(max-width: 970px) {
.main-header * {
-webkit-tap-highlight-color: transparent !important;
}
.drawer-hamburger,
.drawer-overlay,
.drawer-navigation
{
display: block;
}
.main-header-content .main-navigation,
.drawer-overlay {
display: none;
}
.drawer-navigation {
width: 100%;
opacity: 0;
transform: translateY(-100%);
transition: .5s;
}
.drawer-opened .drawer-navigation {
opacity: 1;
transform: translateY(0);
}
}
/* [MENU]中身 */
@media(max-width: 970px) {
.drawer-navigation-content {
padding: 80px 0 0;
}
.main-navigation {
width: 100%;
max-width: 300px;
margin: auto;
}
.main-navigation li {
display: block !important;
padding: 0 !important;
border-bottom: 1px solid #aaa;
}
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
font-weight: normal;
}
.main-navigation li:first-child {
border-top: 1px solid #aaa;
}
.main-navigation li a {
font-family: “mamelon”;
font-size: 1.4rem;
display: block;
padding: 20px 5px;
text-align: center;
line-height: 1.5;
}
.main-navigation li:hover a {
background: #479b38;
color: white !important;
}
.main-navigation li:active a {
color: white !important;
}
.drawer-navigation-logo {
display: block;
width: 90%;
max-width: 200px;
margin: 0 auto 60px;
}
.drawer-navigation-logo img {
display: block;
width: 100%;
}
.main-navigation li.nav-btm {
position: relative;
top: 50px;
width: 90%;
margin: auto;
border: solid 2px #479b38;
border-radius: 100px;
}
.main-navigation li.nav-btm a {
padding: 15px 5px;
border-radius: 100px;
}
.main-header-content {
max-width: none;
}
.main-header-clone {
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur( 5px);
}
.header_offer-btn {
display: block;
width: 180px;
margin: 0 30px 0 auto;
z-index: 999;
}
.header_offer-btn a {
font-family: ‘shin-r’;
display: block;
background: #479b38;
color: white;
letter-spacing: 2px;
font-size: 1.4rem;
text-decoration: none;
padding: 15px 0 17px;
border: solid 1px white !important;
border-radius: 8px;
text-align: center;
transition: .3s;
position: relative;
}
.header_offer-btn a:hover {
color: #479b38;
background: white;
border: solid 1px #479b38 !important;
}
.header_offer-btn a img {
max-width: 18px;
margin: 0 0 5px 5px;
}
}
@media(max-width:599px) {
.header_offer-btn {
position: fixed;
bottom: 0;
left: 0;
display: block;
width: 100%;
background: #479b38;
padding: 15px 0;
border-radius: 20px 20px 0 0;
transform: translateY(100%);
transition: .3s;
}
.header_offer-btn.fixed {
transform: translatey(0);
}
.header_offer-btn a {
width: 95%;
max-width: 180px;
margin: auto;
border: solid 1px white !important;
border-radius: 15px;
}
.header_offer-btn a::after {
width: 18px !important;
}
.main-header-clone .header_offer-btn {
display: none;
}
}
/* [MENU]ハンバーガーアイコン */
@media(max-width: 970px) {
.drawer-hamburger {
position: relative;
padding: 20px 20px 10px;
}
.drawer-hamburger .drawer-hamburger-text {
position: absolute;
top: 2px;
right: 0;
display: inline-block;
width: auto;
height: auto;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
clip: auto;
color: black;
}
.drawer-hamburger-icon {
width: 40px;
}
.drawer-hamburger-icon::before {
content: none;
}
.drawer-hamburger-icon::after {
top: 10px;
left: auto;
right: 0;
width: 50px;
}
.drawer-opened .drawer-hamburger-icon {
width: 50px;
background: black;
transform: rotate(45deg);
opacity: 1;
}
.drawer-opened .drawer-hamburger-icon::after {
transform: rotate(-90deg);
}
.drawer-opened .drawer-hamburger-text {
opacity: 0;
}
}