pc用のヘッダーとスマートフォン用にcssを分けてヘッダーを作成中です。
(max-width: 768px)までは左のトグルバーを押下し
果物のカテゴリーは出てくるのですが、768pxを下回った時点でのヘッダーではカテゴリーを押下してもオレンジは出てこないです。
@media screen and ( min-width: 0px ) and (max-width: 640px){
内の何かが悪い気がするのですが、切り分けができませんでした。
よろしくお願いします。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, em, img, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, section, summary, div, input, select {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
main, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
font-family: 'ゴシックMB101 L';
font-size: 62.5%;
touch-action: manipulation;
box-sizing: border-box;
height:100%;
}
.wrap {
min-height: 100vh;
position: relative;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
img {
max-width: 100%;
max-height: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
color: #5d737e;
transition: .3s ease-in-out;
}
a:hover, a:active {
opacity: 0.5;
}
input,select,option {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
background-color: #F7F8F8;
border: none;
padding: 1rem;
}
::-webkit-scrollbar{
width: 4px;
}
::-webkit-scrollbar-track{
background: #fff;
border-left: solid 1px #ececec;
}
::-webkit-scrollbar-thumb{
background: #ccc;
border-radius: 4px;
box-shadow: inset 0 0 0 2px #fff;
}
/*Loading animation */
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #5d737e;
position: fixed;
z-index: 30;
top: 0;
right: 100%;
width: 100%;
height: 1px;
}
/*top main*/
.bx-wrapper .bx-prev, .bx-wrapper .bx-next {
display: none;
}
.bx-wrapper {
box-shadow: none;
margin-bottom: 2.5vh;
}
.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover {
background: #5d737e;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #adb8be;
}
.main-wrap {
padding: 5vh 5vw;
}
.logo-image {
margin: 2.5vh 0;
text-align: center;
}
.top-image img {
width: 100%;
object-fit: cover;
}
/*contents*/
.page-wrap {
width: 100%;
min-height: 100%;
padding: 60px 0 25vh;
margin: 0 auto;
}
.content-wrap {
width: 100%;
max-width: 910px;
margin: 0 auto;
padding: 0 5vw;
}
.content-title {
font-size: 2rem;
text-align: center;
margin: 5vh 0;
background-color: lightgray;
}
.cartcontent-title {
font-size: 2rem;
text-align: center;
margin: 5vh 0;
}
.content-item {
max-width: 650px;
margin: 0 auto 5vh;
}
.content-item pre {
white-space: pre-wrap;
}
.content-subtitle {
font-size: 1.6rem;
padding-bottom: 0.5rem;
margin-bottom: 2.5vh;
border-bottom: solid 1px;
}
.item-list-wrap {
max-width: calc(910px - 5vw);
width: 100%;
padding: 0 auto;
margin-bottom: 5vh;
display: block;
}
.top-content-wrap {
margin: 0 auto;
position: relative;
}
.item-list-item {
width: calc(100% / 4 - 15px);
height: auto;
padding-bottom: 5vh;
margin-right: 15px;
display: inline-block;
vertical-align: top;
text-align: left;
position: relative;
}
.item-list-item img {
width: 170px;
height: 170px;
object-fit: scale-down;
}
.item-list-item:nth-child(4n) {
margin-right: 0;
}
.item-list-item span {
display: inline-block;
width: 100%;
}
.btn-area {
text-align: center;
}
.btn {
width: 100%;
max-width: 460px;
height: 50px;
line-height: 50px;
background-color: #ffffff;
border: solid 1px #adaaaa;
display: inline-block;
text-align: center;
}
.menubtn{
width: 100%;
max-width: 460px;
height: 50px;
line-height: 50px;
background-color: #adaaaa;
border: solid 1px #adaaaa;
display: inline-block;
text-align: center;
}
/*商品一覧 カテゴリーリスト*/
.category-list-wrap {
width: 100%;
padding-bottom: 5vh;
margin: 0 auto;
}
.category-list {
width: auto;
text-align: center;
display: flex;
flex-wrap: wrap;
margin: 5vh 0;
}
.category-list li, .category-list img {
width: 25%;
display: inline-block;
}
.category-list a {
width: 100%;
padding: 0.5rem 1rem;
display: inline-block;
}
.item-none-text {
text-align: center;
padding: 5vh 0 7.5vh;
}
.pager-wrap {
width: 100%;
max-width: 910px;
letter-spacing: 0.5rem;
margin: 0 auto;
display: flex;
text-align: center;
}
.pager-inner {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pager-inner li {
padding: 1rem;
}
.pager-inner li.active {
font-weight: bold;
font-size: 1.6rem;
}
.item-name {
font-size: 1.8rem;
text-align: center;
margin: 5vh 0 2.5vh;
}
.item-price {
font-size: 1.6rem;
text-align: center;
opacity: 0.75;
}
.item-wrap {
width: 100%;
margin-top: 7.5vh;
display: flex;
justify-content: space-between;
}
.item-image-wrap {
width: calc(100% - 2.5vw);
max-width: 400px;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.item-image-list, .item-image-wrap li {
width: 100%;
}
.item-image-main {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 2.5vh;
}
.item-details-wrap {
max-width: calc(100% / 2 - 2.5vw);
width: 100%;
}
.details-text-area {
margin-bottom: 2.5vh;
}
.makeshop-option-wrap, .details-option-item {
width: 100%;
margin-bottom: 2.5vh;
}
.makeshop-option-label, .details-option-name {
width: 100%;
margin-bottom: 1rem;
}
.makeshop-option-wrap select, .makeshop-option-input {
width: 100%;
}
.makeshop-option-select-item {
font-weight: normal;
}
.btn-cart {
margin: 5vh 0;
background-color: #adaaaa;
color: #fff;
}
.item-detail-soldout {
opacity: 0.5;
}
/*ヘッダー*/
.header {
width: 100%;
height: 60px;
padding: 0 1rem;
line-height: 60px;
background-color: #fff;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
z-index: 20;
margin-top: 60px;
}
.header .header-logo-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.header .header-logo-wrap a {
height: 60px;
line-height: 60px;
}
.header .header-logo-wrap img {
max-height: 40px;
max-width: 70vw;
vertical-align: middle;
display: inline-block;
}
/*左ナビ*/
.cp_cont_leftnav {
height: 60px;
}
.cp_offcm04 {
display: inline-block;
}
.cp_offcm04 i {
font-size: 1.8rem;
margin-right: 0.5rem;
vertical-align: text-bottom;
}
.cp_offcm04 .cp_menu_leftnav {
position: fixed;
top: 0;
left: -100vw;
width: 30vw;
height: 100%;
padding: 5vh 0;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
background-color: rgb(56, 55, 55);
opacity: 0.95;
overflow-y: auto;
z-index: 25;
}
.cp_offcm04 #cp_toggle04 {
position: absolute;
display: none;
opacity: 0;
}
.cp_offcm04 #cp_toggle04:checked ~ .cp_menu_leftnav {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
.cp_offcm04 #cp_toggle04 ~ label {
display: block;
padding: 0 1rem;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
text-align: center;
z-index: 10;
}
.cp_offcm04 #cp_toggle04 ~ label:hover, .cp_offcm04 #cp_toggle04 ~ label:active {
opacity: 0.5;
}
.cp_offcm04 #cp_toggle04:checked ~ label {
-webkit-transform: translateX(250px);
transform: translateX(30vw);
}
.cp_offcm04 a{
color: #fff;
}
.cp_offcm04mini a{
color: #858383;
}
.drawer-menu-top {
padding: 0 2.5vw 2.5vh;
}
.menu-search-wrap {
height: 4rem;
line-height: 4rem;
display: flex;
justify-content: space-between;
border-bottom: solid 1px #5d737e;
margin-bottom: 5vh;
position: relative;
}
.menu-search-wrap input {
width: 100%;
height: 4rem;
background: none;
position: absolute;
z-index: 5;
}
.menu-search-btn {
font-weight: 2rem;
z-index: 10;
}
.menu-inner .menu-list-wrap li a {
display: block;
line-height: 60px;
text-decoration: none;
color: #5d737e;
}
.menu-category-wrap {
margin-bottom: 2.5vh;
}
.menu-category-wrap a {
width: 100%;
padding: 0 2.5vw;
display: inline-block;
}
.menu-category-wrap a:hover, .menu-category-wrap a:active {
background-color: #e7eaec;
}
.menu-sub-wrap {
display: flex;
flex-direction: column;
}
.menu-sub-wrap li {
height: 4rem;
line-height: 4rem;
padding: 0 2.5vw;
opacity: 0.75;
}
.account-sp {
display: none;
}
/* アコーディオン */
body .wrapper {
width: 100%;
margin: 0 auto;
background: #383737;
border-radius: 4px;
position: relative;
box-shadow: 0px 2px rgba(0, 0, 0, 0.12);
}
body .wrapper label {
display: block;
position: relative;
color: #adadad;
overflow: hidden;
cursor: pointer;
height: 56px;
-webkit-transition: text-indent 0.2s;
text-indent: 20px;
padding-top: 1px;
}
body .wrapper ul {
margin: 0;
padding: 0;
}
body .wrapper li {
color: white;
list-style-type: none;
}
body .wrapper li a {
display: block;
width: 100%;
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(234, 233, 233, 0.55);
}
body .wrapper li a:hover {
background-color: rgba(0, 0, 0, 0.06);
}
body .wrapper label:hover {
background: rgba(219, 222, 219, 0.6) !important;
color: #646765;
text-indent: 30px;
-webkit-transition: text-indent 0.2s;
transition: text-indent 0.2s;
}
body .wrapper input[type="checkbox"] {
display: none;
}
body .wrapper span {
height: 3px;
position: absolute;
width: 0px;
display: block;
top: 58px;
background: #585a5a;
}
body .wrapper .content {
height: 0;
background: rgba(153, 158, 153, 0.72);
height: auto;
position: relative;
border-top: 2px solid rgba(0, 0, 0, 0.12);
top: 4px;
}
body .minicontent{
height: 0;
background: rgba(153, 158, 153, 0.72);
height: auto;
position: relative;
border-top: 2px solid rgba(0, 0, 0, 0.12);
top: 4px;
}
body .wrapper .lil_arrow {
width: 5px;
height: 5px;
-webkit-transition: transform 0.8s;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid rgba(245, 241, 241, 0.66);
border-right: 2px solid rgba(245, 241, 241, 0.66);
float: right;
position: relative;
top: -30px;
right: 27px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
body .wrapper input[type="checkbox"]:checked + label > .content {
display: block;
}
body .wrapper input[type="checkbox"]:checked + label > .minicontent {
display: block;
}
body .wrapper input[type="checkbox"]:checked + label > span {
display: none;
}
body .wrapper input[type="checkbox"]:checked + label > .lil_arrow {
-webkit-transition: transform 0.8s;
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
body .wrapper input[type="checkbox"]:checked + label {
display: block;
background: #383737 !important;
color: #ffffff;
text-indent: 30px;
height: auto;
-webkit-transition: height 0.8s;
transition: height 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body .wrapper label:hover > span {
width: 100%;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: width 0.4s;
transition: width 0.4s;
}
body .wrapper input[type='checkbox']:not(:checked) + label {
display: block;
-webkit-transition: height 0.8s;
transition: height 0.8s;
height: 60px;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
::-webkit-scrollbar {
display: none;
}
/* アコーディオン 終了*/
.header2{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
z-index: 20;
}
.header2__inner{
max-width: 1552px;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header2__logo{
flex: none;
width: auto;
height: 50px;
margin-left: 20px;
}
.header2__navgroup{
margin-left: auto;
margin-right: 2px;
display: flex;
flex: none;
}
.header2__navgroup > * + *{
margin-left: 6px;
margin-right: 6px;
}
.header2__navitem{
font-size: 14px;
color: #000;
margin-top: 17px;
}
.header2__icon{
margin-top: 35px;
flex: none;
width: auto;
height: 15px;
}
.header2__inner2{
max-width: 1552px;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header2__navgroup2{
margin-left: 30px;
margin-right: auto;
display: flex;
flex: none;
}
.header2__navgroup2 > * + *{
margin-left: 6px;
margin-right: 6px;
}
.header2__navitem2{
font-size: 14px;
color: #000;
margin-top: 26px;
margin-left: 15px;
}
.cp_offcm01sp #cp_toggle01 ~ label {
display: block;
padding: 0 1rem;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
}
.cp_offcm04sp #cp_toggle04 ~ label {
display: block;
padding: 0 1rem;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
text-align: center;
z-index: 10;
margin-top: 10px;
}
.headersp {
width: 100%;
height: 50px;
/* padding: 0 1rem; */
line-height: 60px;
background-color: #fff;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
z-index: 20;
}
.header_sp{
margin-top: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.header__inner_sp{
max-width: 1552px;
width: 95%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header__logo_inner_sp{
max-width: 1552px;
width: 95%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.header__logo_sp{
flex: none;
width: auto;
height: 50px;
margin : 0 auto;
}
.header__navgroup_sp{
display: flex;
flex: none;
margin-left: 20%;
}
.header__navgroup_sp > * + *{
margin-left: 6px;
margin-right: 6px;
}
.header__navitem_sp{
font-size: 16px;
color: #000;
}
.header__icon_sp{
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
flex: none;
width: auto;
height: 22px;
}
/*----- メニュー(左ナビ)-----*/
.cp_cont_leftnav {
height: 60px;
}
.cp_offcm04sp {
display: inline-block;
}
.cp_offcm04sp i {
font-size: 3.8rem;
margin-right: 0.5rem;
vertical-align: text-bottom;
}
.cp_offcm04sp .cp_menu_leftnavsp {
position: fixed;
top: 0;
left: -100vw;
height: 100%;
padding: 5vh 0;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
background-color: rgb(56, 55, 55);
opacity: 0.95;
overflow-y: auto;
z-index: 25;
}
.cp_offcm04sp #cp_toggle04sp {
position: absolute;
display: none;
opacity: 0;
}
.cp_offcm04sp #cp_toggle04sp:checked ~ .cp_menu_leftnavsp {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
.cp_offcm04sp #cp_toggle04sp ~ label {
display: block;
/* padding: 0 1rem; */
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
text-align: center;
z-index: 10;
margin-top: 10px;
}
.cp_offcm04sp #cp_toggle04sp ~ label:hover, .cp_offcm04 #cp_toggle04sp ~ label:active {
opacity: 0.5;
}
.cp_offcm04sp #cp_toggle04sp:checked ~ label {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.cp_offcm04sp a{
color: #fff;
}
.cp_offcm04minisp a{
color: #858383;
}
.headersp .header-logo-wrapsp {
position: absolute;
top: 40%;
left: 27%;
transform: translate(-50%,-50%);
}
.headersp .header-logo-wrapsp a {
height: 60px;
line-height: 60px;
}
.headersp .header-logo-wrapsp img {
max-height: 40px;
max-width: 30vw;
vertical-align: middle;
display: inline-block;
}
.hidden_box {}
.hidden_box label {}
/*チェックは見えなくする*/
.hidden_box input[type=checkbox] {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
.search_container{
box-sizing: border-box;
position: relative;
border: 1px solid #999;
padding: 3px 10px;
border-radius: 20px;
height: 1.3em;
width: 160px;
overflow: hidden;
margin-top: 33px;
}
.search_container input[type="text"]{
display: block;
border: none;
padding: 0;
width: 80%;
padding: 2%;
height: 18px;
line-height: 18px;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="image" i]{
width: 17px;
height: 17px;
margin-top: 5px;
}
.menu_icon {
flex: none;
width: auto;
height: 15px;
margin-right: 8px;
}
@media screen and ( min-width: 641px ) {
.sp_part {
display : none;
}
}
@media screen and ( min-width: 0px ) and (max-width: 640px){
.pc_part {
display : none;
}
.cp_offcm04sp #cp_toggle04sp ~ label {
display: block;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
text-align: center;
z-index: 10;
}
.headersp .header-logo-wrapsp {
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%,-50%);
}
.header__navgroup_sp{
display: flex;
flex: none;
margin-left: 39%;
}
.header__icon_sp{
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
flex: none;
width: auto;
height: 22px;
}
.cp_offcm01sp #cp_toggle01sp ~ label {
display: block;
cursor: pointer;
-webkit-transition: 0.5s transform;
transition: 0.5s transform;
margin-top: 8px;
}
.menu_icon {
flex: none;
width: auto;
height: 20px;
margin-left: 8px;
}
}
.menu-search-wrap-hd {
height: 20px;
display: flex;
justify-content: space-between;
border-bottom: solid 1px #5d737e;
width: 150px;
border: 1px solid #666;
border-radius: 6px;
margin-top: 19px;
margin-right: 15px;
}
.menu-search-wrap-hd input {
width: 100%;
height: 10px;
background: none;
position: absolute;
z-index: 5;
}
.menu-search-btn-hd {
font-weight: 2rem;
z-index: 10;
}
.menu-search-btn-hd a {
text-decoration: none;
color: #5d737e;
transition: .3s ease-in-out;
}
.sample3Img {
height: 16px;
padding-right: 5px;
padding-bottom: 3px;
}
input[type="text"]:focus {
outline: 0;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
</head>
<body>
<div class="pc_part">
<div class="header2">
<div class="header2__inner">
<img class="header2__logo" src="">
<div class="header2__navgroup2">
<div class="header2__navitem2">News</div>
</div>
<div class="header2__navgroup">
<div class="menu-search-wrap-hd">
</div>
<div class="header2__navitem">
</div>
</div>
</div>
</div>
<header class="header">
<div class="cp_cont_leftnav">
<div class="cp_offcm04">
<input type="checkbox" id="cp_toggle04">
<label for="cp_toggle04" class="cp_toggle04"><img class="menu_icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/menubar.jpg"><span>menu</span></label>
<div class="cp_menu_leftnav">
<div class="drawer-menu-top">
<div class="menu-search-wrap">
<label>
<input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="Search" class="search-keyword">
</label>
<a href="<{$search_form.search_url}>" class="menu-search-btn search-url"><i class="material-icons">search</i></a>
</div>
<div class="menu-login">
<a href="" class="menubtn">Account</a>
</div>
</div>
<ul class="menu-category-wrap">
<li class="menu-category-item"> <a href=""></a> </li>
</ul>
<div class='wrapper'>
<div class='cp_offcm04mini'>
<input id='pictures' type='checkbox'>
<label for='pictures'>
<p>果物</p>
<div class='lil_arrow'></div>
<div class='content'>
<li>
<a href=''>オレンジ</a>
</li>
</div>
<span></span>
</label>
</div>
</div>
<ul class="menu-sub-wrap">
</ul>
<ul class="menu-sns">
</ul>
</div> <!-- end of cp_menu_leftnav -->
</div> <!-- end of cp_offcm04 -->
</div> <!-- end of cp_cont_leftnav -->
<a href="" id="checkout-url" style="display:none;"></a>
</header>
</div> <!--end of pc_part -->
<!-- for smart phone -->
<div class="sp_part">
<header class="headersp">
<div class="cp_cont_leftnavsp">
<div class="cp_offcm04sp">
<input type="checkbox" id="cp_toggle04sp">
<label for="cp_toggle04sp" class="cp_toggle04sp"><img class="menu_icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/menubar.jpg"><span>menu</span></label>
<div class="cp_menu_leftnavsp">
<div class="drawer-menu-top">
<div class="menu-search-wrap">
</div>
<div class="menu-login">
</div>
</div>
<ul class="menu-category-wrap">
<li class="menu-category-item"> <a href=""></a> </li>
</ul>
<div class='wrapper'>
<div class='cp_offcm04minisp'>
<input id='pictures' type='checkbox'>
<label for='pictures'>
<p>果物</p>
<div class='lil_arrow'></div>
<div class='content'>
<li>
<a href=''>オレンジ</a>
</li>
</div>
<span></span>
</label>
</div>
</div>
<ul class="menu-sub-wrap">
</ul>
<ul class="menu-sns">
</ul>
</div>
</div>
</div>
<div class="header-logo">
</div>
<div class="header__navgroup_sp">
<div class="hidden_box">
<label for="label1"> <img class="header__icon_sp" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg"></label>
<input type="checkbox" id="label1"/>
<img class="header__icon_sp" src="https://gigaplus.makeshop.jp/kukunochi/img/header/para.jpg">
<img class="header__icon_sp" src="https://gigaplus.makeshop.jp/kukunochi/img/header/mymenu.jpg">
<div class="hidden_show">
<form method="get" action="#" class="search_container">
<input type="text" data-id="makeshop-search-keyword" value="" placeholder="アイテムを検索" class="search-keyword">
<input type="image" alt="検索" src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg">
</form>
</div>
</div>
</div>
<a href="" id="checkout-url" style="display:none;"></a>
</header>
</div>
</body>
</html>