.header {
   display: flex !important;
   border-bottom: solid 1px #B7B7B7;

}

.header_container {
   display: grid;
   grid-template-areas:
      "header_rogo auto header_button_cart header_button_menu"
   ;
   grid-template-columns: 2fr 8fr 1fr 1fr;
   align-items: center;
   width: 100%;
   max-width: var(--container-width);
   height: 64px;
   margin: 0 auto;
   padding: 0 var(--container-pad);
   z-index: 99;
   background: #fff;

}

.header_rogo {
   grid-area: header_rogo;

   display: flex;
   align-items: center;
   width: 150px;
   font-size: 0;
}

.header_button_cart {
   position: relative;
   grid-area: header_button_cart;
   justify-self: end;
   height: 28px;

      & a{
         display: inline-flex;
         height: 28px;
      & img {
         vertical-align: bottom;
      }
   }
}

.cart_quantity {
   display: inline-flex;
   position: absolute;
   top: -5px;
   left: auto;
   right: -6px;
   min-width: 18px;
   height: 18px;
   padding: 1px 2px;
   background: var(--main-color-aaa);
   border-radius: 8px;
   margin: 0 auto;
   outline: solid 1px #FFF;
   & span {
      display: inline-block;
      text-align: center;
      color: #fff;
      font-size: 14px;
      line-height: 1;
      margin: 0 auto;
      height: 16px;
   }
}

.header_button_menu {
   grid-area: header_button_menu;
   justify-self: end;
   height: 28px;
   & img {
      vertical-align: middle;
   }
}

.drawer-hidden {
   display: none;
 }

 /* ハンバーガーアイコンの設置スペース */
 .drawer-open {
   display: flex;
   flex-flow: column;
   height: 26px;
   width: 26px;
   /*padding-left: 8px;*/
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 98;/* 重なり順を一番下に */
   cursor: pointer;
 }

 /* ハンバーガーメニューのアイコン */

 .drawer-open button {
   display: inline-block;
   z-index: 99;
   position: fixed;
 }

 .drawer-open span {
   position: relative;
   display: block;
   background-color: #111;
   width: 26px;
   height: 3px;


   transition: ease .3s;
 }


 /* 三本線のうち一番上の棒の位置調整 */
 .drawer-open span:nth-of-type(1){
   top: 0;
 }
 .drawer-open span:nth-of-type(2){
   margin: 6px 0;
 }

 /* 三本線のうち一番下の棒の位置調整 */
 .drawer-open span:nth-of-type(3){
   top: 0;
 }

 .drawer-open.is-active span:nth-of-type(1) {


   transform-origin:left top;
   transform: translateX(1.5%) translateY(50%) rotateZ(45deg);
 }
 .drawer-open.is-active span:nth-of-type(2) {
   margin: 7px 0;
   opacity: 0;
 }
 .drawer-open.is-active span:nth-of-type(3) {


   transform-origin:left bottom;
   transform: translateX(1.5%) translateY(-50%) rotate(-45deg);
 }

 .drawer-close{
   display: none;

   width: 100%;
   height: 100%;
   position: fixed;
   background: rgba(94, 94, 94, 0);

  z-index: 3;

 }

footer {}

.footer {
   background: #F7F7F7;
   display: flex;
   flex-flow: column;
   justify-content: center;
}

.footer_container {
   display: grid;
   grid-template-areas:
      "footer_rogo footer_list_sns"
      "footer_list_other footer_list_other"
      "footer_copywrite footer_copywrite"
   ;
   grid-template-columns: 20% 75%;
   justify-content: center;
   width: 100%;
   max-width: var(--container-width);
   margin: 0 auto;
   padding: 0 var(--container-pad);
}

.footer_rogo {
   grid-area: footer_rogo;
   width: 190px;
   padding: 3.8rem 0;
}

.footer_list_sns {
   grid-area: footer_list_sns;
   padding: 3.8rem 0;

}

.footer_list_sns>ul {
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-end;
   gap: 1rem;

   & li {
      width: 28px;
      height: 100%;

   }

}

.footer_list_other {
   grid-area: footer_list_other;
}

.footer_list_other>ul {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-end;
   padding: 2.4rem 0;

}

.footer_list_other>ul>li {
   padding: 0 1% 0 1%;

}

.footer_list_other li+li {
   border-left: 1px solid #ccc;
}

.footer_copywrite {
   grid-area: footer_copywrite;

   display: flex;
   flex-flow: row wrap;
   justify-content: flex-end;
   font-size: var(--font-size-SM);
   padding: 1.4rem 0 3.6rem 0;
   border-top: solid 1px #fff;

}

#breadcrumbs {
   max-width: var(--container-width);
   margin: 0 auto;

}

#breadcrumbs ul {
   display: flex;
   flex-flow: row wrap;
   gap: 0 0.5em;
   margin: 0 var(--container-pad);

   & li {
      & a {
         color: var(--main-color-aaa);
         text-decoration: underline;
      }
   }

   & li+li::before {
      content: "/";
      padding-right: 0.5em;
   }

}