@media screen and (min-width: 769px){
.sp-hamburger-navi { display:none; }
}


@media screen and (max-width:768px){
.sp-hamburger-navi { display: flex; justify-content: center; align-items: center; padding: 5px 20px; background: #fff; position: relative; }
.sp-logo img { width:100%; height:auto; }
/* ここから下がハンバーガーメニューに関するCSS */ 
/* チェックボックスを非表示にする */
.drawer_hidden { display: none; }

/* ハンバーガーアイコンの設置スペース */
.drawer_open { display: flex; justify-content: center; align-items: center; position: absolute; right: 20px; z-index: 100;/* 重なり順を一番上にする */ cursor: pointer; }

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background: #ffc000; transition: 0.5s; position: absolute; }

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before { bottom: 8px; }

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after { top: 8px; }

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span { background: rgba(255, 255, 255, 0); }

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before { bottom: 0; transform: rotate(45deg); }

#drawer_input:checked ~ .drawer_open span::after { top: 0; transform: rotate(-45deg); }
  
/* メニューのデザイン*/
.nav_content { width: 100%; height: 100%; position: fixed; top: 0%; left: 100%; /* メニューを画面の外に飛ばす */ z-index: 99; /*background: rgb(110, 110, 110);*/ background-color:#f7f7f7; transition: .5s; text-align: center; padding-top: 20px; }

/* メニュー黒ポチを消す */
.nav_list { list-style: none; }

.nav_item { width:100%; text-align:left; }
.nav_item a { color: #fff; text-decoration: none; }

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content { left: 0;/* メニューを画面に入れる */ }

/* カテゴリ */
.nav_category-container { width:95%; margin:0px auto; margin-bottom:10px; padding:10px 0px; background:#fff; border-radius:15px; }
.nav_category-container img { width:100%; height:auto; }
.nav_category { width:90%; margin:10px auto; padding:0px; background:#fff; color:#ffc000; text-align:center; display:block; line-height:2.3em; border-radius:10px; border:1px #ffc000 solid; }
.nav_category a, .nav_category a:hover { color:#ffc000; text-decoration:none; font-weight:bold; }

}