.headermenublock{ padding:10px 0; position: relative; font-size:.9em; } .navi ul { margin: 0; display: flex; flex-wrap: wrap; transition-duration:.3s; } .navi ul li { position:relative; } .navi ul li a{ line-height:1.2em; padding:15px; box-sizing: border-box; text-decoration: none; width: 100%; display: block; } .navi ul ul { min-width:250px; box-sizing:border-box; position: absolute; z-index: 9; top:100%; left:0; opacity:0; visibility: hidden; width:0; background:#f9f9f9; margin:-10px 0 0; display: block; } .navi ul ul ul{ position:relative; } .navi li ul li { width: 100%; position:relative; } .navi ul li:hover ul { visibility: visible; opacity: 1; width:100%; margin:0; } .navi li ul li a{ color:#000; } .navi li ul li ul li a{ padding-left:40px; } .navi li ul li ul { padding:0; } .navi ul li ul li ul li:after { display: block; content: ''; position: absolute; top: 50%; left:1.8em; width: 4px; height: 4px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: rotate(-45deg) translateY(-75%); } .bunnypresslite_dm,.bunnypresslite_check,.navi li ul li ul li:before,.navi ul.bunnypresslite_navi_sp{ display:none; } @media screen and (max-width: 768px) { .navi ul ul,.navi ul ul ul,.navi ul li:hover ul ul { width: 100%; position:relative; opacity: 1; visibility:visible; background: #fff; margin: 0; } .bunnypresslite_dm,.navi ul,.navi li ul li{ display:block; } .navi { box-sizing: border-box; position: fixed; padding:4em 0 0; top: 0; right: -300px; width: 300px; height: 100%; background:#fff; transition-duration: .5s; z-index:2; box-shadow:13px 0 10px 10px #333; overflow: auto; } .navi:before { content:'MENU'; padding:1em; background:#eee; display:block; } .navi ul li ul li:before { content:'■'; color:#ccc; left:1em; transform:translateY(50%); position:absolute; } .navi ul li a { border-bottom:1px solid #ccc; color:#000 !important; } .navi li ul li a,.navi li ul li ul li a{ padding:1em 1em 1em 2.5em; } .navi li ul li ul li a{ padding-left:40px; } .navi ul.bunnypresslite_navi_pc{ display:none; } .navi ul.bunnypresslite_navi_sp{ display:block; } .bunnypresslite_dm { position: absolute; top:-10px; left: -35px; width: 40px; height: 40px; font-size: 10px; cursor: pointer; z-index: 3; padding:30px 0 0 10px; } .bar { position: absolute; top:0; left: 5px; width: 30px; height: 2px; transition: all .5s; transform-origin: left top; } .bar.middle { top: 10px; } .bar.bottom { top: 20px; } .bunnypresslite_dm_menu { position: absolute; top:22px; right:15px; margin: auto; transition: all .6s; } .bunnypresslite_close { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transition-duration:1s; visibility: hidden; z-index:1; } .bunnypresslite_check:checked ~ .navi { right:0; z-index: 2; box-shadow:15px 0 15px 15px #333; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bunnypresslite_dm_menu,.bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.middle{ opacity: 0; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.top { width: 36px; transform: rotate(45deg); background:#999; } .bunnypresslite_check:checked ~ .bunnypresslite_dm .bar.bottom { width: 36px; top: 25px; transform: rotate(-45deg); background:#999; } .bunnypresslite_check:checked ~ .bunnypresslite_close { background: rgba(0,0,0,.4); visibility: visible; opacity: 1; } }