@media (min-width:768px) {
 /* .pcOnly {
    display: block;
  }*/
  .l-nav, .l-nav-drawer, .l-nav-drawer-mask {
    display: none;
  }
}

@media (max-width:767px) {

  .l-nav {
    background: #000010;
    bottom: 0;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    position: -webkit-sticky;
    position: sticky;
    width: 100vw;
    z-index: 1000000;
  }
  .l-nav[data-drawer=menu] .l-nav__item[data-drawer-id=menu] {
    background: #eee;
  }
  .l-nav[data-drawer=menu] .l-nav__item[data-drawer-id=menu] .l-nav__hdg {
    color: #000010;
  }
  .l-nav[data-drawer=menu] .l-nav__item[data-drawer-id=menu] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_7%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%207%22%20transform%3D%22translate(-28.868%20-754.368)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029%22%20width%3D%2227.054%22%20height%3D%221.23%22%20transform%3D%22translate(29.738%20754.368)%20rotate(45)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_30%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2030%22%20width%3D%2227.055%22%20height%3D%221.23%22%20transform%3D%22translate(48.868%20755.238)%20rotate(135)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 18px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer-mask {
    background: rgba(0, 0, 0, .251);
    pointer-events: auto;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=menu] {
    bottom: calc(env(safe-area-inset-bottom) + 60px);
  }
  .l-nav[data-drawer=product] .l-nav__item[data-drawer-id=product] {
    background: #eee;
  }
  .l-nav[data-drawer=product] .l-nav__item[data-drawer-id=product] .l-nav__hdg {
    color: #000010;
  }
  .l-nav[data-drawer=product] .l-nav__item[data-drawer-id=product] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_7%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%207%22%20transform%3D%22translate(-28.868%20-754.368)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029%22%20width%3D%2227.054%22%20height%3D%221.23%22%20transform%3D%22translate(29.738%20754.368)%20rotate(45)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_30%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2030%22%20width%3D%2227.055%22%20height%3D%221.23%22%20transform%3D%22translate(48.868%20755.238)%20rotate(135)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 18px;
  }
  .l-nav[data-drawer=product]~.l-nav-drawer-mask {
    background: rgba(0, 0, 0, .251);
    pointer-events: auto;
  }
  .l-nav[data-drawer=product]~.l-nav-drawer[data-drawer=product] {
    bottom: calc(env(safe-area-inset-bottom) + 60px);
    transform: translateY(0);
  }
  .l-nav[data-drawer=mypage] .l-nav__item[data-drawer-id=mypage] {
    background: #eee;
  }
  .l-nav[data-drawer=mypage] .l-nav__item[data-drawer-id=mypage] .l-nav__hdg {
    color: #000010;
  }
  .l-nav[data-drawer=mypage] .l-nav__item[data-drawer-id=mypage] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_7%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%207%22%20transform%3D%22translate(-28.868%20-754.368)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029%22%20width%3D%2227.054%22%20height%3D%221.23%22%20transform%3D%22translate(29.738%20754.368)%20rotate(45)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_30%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2030%22%20width%3D%2227.055%22%20height%3D%221.23%22%20transform%3D%22translate(48.868%20755.238)%20rotate(135)%22%20fill%3D%22%23000010%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 18px;
  }
  .l-nav[data-drawer=mypage]~.l-nav-drawer-mask {
    background: rgba(0, 0, 0, .251);
    pointer-events: auto;
  }
  .l-nav[data-drawer=mypage]~.l-nav-drawer[data-drawer=mypage] {
    bottom: calc(env(safe-area-inset-bottom) + 60px);
    transform: translateY(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=menu][data-drawer-active=""] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=menu][data-drawer-active=false] {
    transform: translate(-100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=fragrance] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=fragrance][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=fragrance][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=skincare] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=skincare][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=skincare][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=makeup] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=makeup][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=makeup][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=homegoods] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=homegoods][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=homegoods][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=food] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=food][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=food][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=gift],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=factory],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=shop] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=gift][data-drawer-active=""],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=factory][data-drawer-active=""],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=shop][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=gift][data-drawer-active=true],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=factory][data-drawer-active=true],
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=shop][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=about] {
    bottom: 60px;
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=about][data-drawer-active=""] {
    transform: translate(100%);
  }
  .l-nav[data-drawer=menu]~.l-nav-drawer[data-drawer=about][data-drawer-active=true] {
    transform: translate(0);
  }
  .l-nav__list {
    background: #000010;
    display: flex;
  }
  .l-nav__item {
    position: relative;
    transition: background-color .3s;
    width: 20%;
  }
  .l-nav__item>a {
    display: block;
    font-size: 8px;
    line-height: 1;
    padding: 40px 12px 12px;
    text-align: center;
  }
  .l-nav__item[data-drawer-id=menu] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%3E%0A%20%20%3Cpath%20id%3D%22icon%22%20d%3D%22M1269%2C1V0h18V1Zm0-9V-9h18v1Zm0-9v-1h18v1Z%22%20transform%3D%22translate(-1269%2018)%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 16px;
  }
  .l-nav__item[data-drawer-id=product] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221.207%22%20height%3D%2221.207%22%20viewBox%3D%220%200%2021.207%2021.207%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-search%22%20data-name%3D%22Icon%20feather-search%22%20transform%3D%22translate(-4%20-4)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_20%22%20data-name%3D%22%E3%83%91%E3%82%B9%2020%22%20d%3D%22M22.275%2C13.388A8.888%2C8.888%2C0%2C1%2C1%2C13.388%2C4.5a8.888%2C8.888%2C0%2C0%2C1%2C8.888%2C8.888Z%22%20transform%3D%22translate(0%200)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_21%22%20data-name%3D%22%E3%83%91%E3%82%B9%2021%22%20d%3D%22M29.814%2C29.814l-4.839-4.839%22%20transform%3D%22translate(-5.314%20-5.314)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 18px;
  }
  .l-nav__item[data-drawer-id=nav-gift] .l-nav__hdg:before {
    background-image: url(/client_info/SHIRO/view/userweb/images/icon/icon_gift.svg);
    height: 18px;
    width: 18px;
  }
  .l-nav__item[data-drawer-id=mypage] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-user%22%20data-name%3D%22Icon%20feather-user%22%20transform%3D%22translate(0.5%200.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_4%22%20data-name%3D%22%E3%83%91%E3%82%B9%204%22%20d%3D%22M26%2C30.353V27.735A5.122%2C5.122%2C0%2C0%2C0%2C21%2C22.5H11a5.122%2C5.122%2C0%2C0%2C0-5%2C5.235v2.618Z%22%20transform%3D%22translate(-6%20-10.353)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_5%22%20data-name%3D%22%E3%83%91%E3%82%B9%205%22%20d%3D%22M22%2C9.5a5%2C5%2C0%2C1%2C1-5-5%2C5%2C5%2C0%2C0%2C1%2C5%2C5Z%22%20transform%3D%22translate(-7%20-4.5)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 18px;
    width: 18px;
  }
  .l-nav__item[data-drawer-id=cart] .l-nav__hdg:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%3E%0A%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_98%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2098%22%20transform%3D%22translate(-2238%20-863.67)%22%3E%0A%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_94%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2094%22%20width%3D%2220%22%20height%3D%2220%22%20transform%3D%22translate(2238%20864)%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_97%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2097%22%3E%0A%20%20%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_6%22%20data-name%3D%22%E3%83%91%E3%82%B9%206%22%20d%3D%22M4.5%2C6.6V18.616a1.748%2C1.748%2C0%2C0%2C0%2C1.778%2C1.717H18.722A1.748%2C1.748%2C0%2C0%2C0%2C20.5%2C18.616V6.6Z%22%20transform%3D%22translate(2235.5%20863.837)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_8%22%20data-name%3D%22%E3%83%91%E3%82%B9%208%22%20d%3D%22M12%2C23.585V19.029a4.029%2C4.029%2C0%2C1%2C1%2C8.058%2C0v4.556%22%20transform%3D%22translate(2231.971%20849.17)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    height: 19px;
    width: 18px;
  }
  .l-nav__hdg {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    transition: color .3s;
    white-space: nowrap;
  }
  .l-nav__hdg:before {
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    left: 50%;
    transform: translateX(-55%);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 15px;
  }
  .l-nav__badge {
    align-items: center;
    background: #fff;
    border: 1px solid #000010;
    border-radius: 50%;
    display: flex;
    font-size: 10px;
    height: 18px;
    width: 18px;
    justify-content: center;
    letter-spacing: .5px;
    position: absolute;
    right: 15px;
    top: 14px;
  }
  .l-nav-drawer-mask {
    height: 100vh;
    pointer-events: none;
    top: 0;
    transition: background-color .3s;
  }
  .l-nav-drawer, .l-nav-drawer-mask {
    position: fixed;
    width: 100%;
    z-index: 999999;
  }
  .l-nav-drawer {
    background: #eee;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    transition: transform .3s;
  }
  .l-nav-drawer__container {
    height: 100%;
    overflow-y: auto;
  }
  .l-nav-drawer__inner {
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0) + 40px);
  }
  .l-nav-drawer__wrapper {
    height: calc(100% - 20px);
    overflow-y: auto;
    padding-bottom: 40px;
  }
  .l-nav-drawer__hdg {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 1.5em;
  }
  .l-nav-drawer__back {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.073%22%20height%3D%2215.73%22%20viewBox%3D%220%200%209.073%2015.73%22%3E%0A%20%20%3Cpath%20id%3D%22_%22%20data-name%3D%22%26lt%3B%22%20d%3D%22M2170.008%2C393.635l8%2C7.5-8%2C7.5%22%20transform%3D%22translate(2178.739%20409)%20rotate(180)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 9px 16px;
    display: inline-block;
    height: 40px;
    left: -13px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
  }
  .l-nav-drawer__list {
    display: flex;
    flex-direction: column;
  }
  .l-nav-drawer__item {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
  }
  .l-nav-drawer__separate {
    border-top: 1px solid #c1c8d3;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .l-nav-drawer[data-drawer=menu], .l-nav-drawer[data-drawer=product] {
    height: calc(var(--vh, 1vh)*100 - 155px);
  }
  .l-nav-drawer[data-drawer=mypage] .l-nav-drawer__item:not(:first-of-type), .l-nav-drawer[data-drawer=shop] .l-nav-drawer__item:not(:first-of-type) {
    margin-top: 30px;
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item {
    border-bottom: 1px solid #c1c8d3;
    position: relative;
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item>a, .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item>button {
    color: #393c41;
    display: block;
    font-weight: 400;
    padding: 16px 8px;
    font-size: 1.4rem;
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item.--blank>a::after {
    background-image:  url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%3E%0A%20%20%3Cpath%20id%3D%22download%22%20d%3D%22M5%2C0H9V4H8V1.707L4.353%2C5.353l-.707-.706L7.292%2C1H5ZM0%2C0H3V1H1V8H8V6H9V9H0Z%22%20fill%3D%22%23393c41%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A);
    background-repeat: no-repeat;
    background-size: 10px 10px;
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
/*  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item[data-drawer-id=about]>button {
    padding-left: 45px;
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item[data-drawer-id=about]:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2224%22%20viewBox%3D%220%200%2026%2024%22%3E%0A%20%20%3Cg%20id%3D%22Icon_feather-book-open%22%20data-name%3D%22Icon%20feather-book-open%22%20transform%3D%22translate(-2%20-3.5)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_28%22%20data-name%3D%22%E3%83%91%E3%82%B9%2028%22%20d%3D%22M3%2C4.5h7.173a4.836%2C4.836%2C0%2C0%2C1%2C4.782%2C4.889V26.5a3.627%2C3.627%2C0%2C0%2C0-3.587-3.667H3Z%22%20transform%3D%22translate(0%200)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029%22%20d%3D%22M29.955%2C4.5H22.782A4.836%2C4.836%2C0%2C0%2C0%2C18%2C9.389V26.5a3.627%2C3.627%2C0%2C0%2C1%2C3.587-3.667h8.369Z%22%20transform%3D%22translate(-2.955%200)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 24px;
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
  }*/
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item[data-drawer-id]:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item[data-drawer-id][data-drawer-id=homegoods] {
    border-bottom: none;
    font-size: 14px;
/*    margin-top: 20px;*/
  }
  .l-nav-drawer__item > a:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-nav-drawer__item > a:hover {
      opacity: 0.4;
    } 
  }
  .l-nav-drawer[data-drawer=fragrance] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=fragrance] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=fragrance] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=fragrance] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=skincare] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=skincare] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=skincare] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=skincare] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=makeup] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=makeup] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=makeup] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=makeup] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=homegoods] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=homegoods] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=homegoods] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=homegoods] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=food] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=food] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=food] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=food] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=gift],
  .l-nav-drawer[data-drawer=factory],
  .l-nav-drawer[data-drawer=shop] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=gift] .l-nav-drawer__container,
  .l-nav-drawer[data-drawer=factory] .l-nav-drawer__container,
  .l-nav-drawer[data-drawer=shop] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=gift] .l-nav-drawer__inner,
  .l-nav-drawer[data-drawer=factory] .l-nav-drawer__inner,
  .l-nav-drawer[data-drawer=shop] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=gift] .l-nav-drawer__hdg,
  .l-nav-drawer[data-drawer=factory] .l-nav-drawer__hdg,
  .l-nav-drawer[data-drawer=shop] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-nav-drawer[data-drawer=about] {
    height: calc(var(--vh, 1vh)*100 - 155px);
    transform: translate(100%, 100%);
  }
  .l-nav-drawer[data-drawer=about] .l-nav-drawer__container {
    overflow-y: visible;
  }
  .l-nav-drawer[data-drawer=about] .l-nav-drawer__inner {
    height: 100%;
  }
  .l-nav-drawer[data-drawer=about] .l-nav-drawer__hdg {
    position: relative;
    text-align: center;
  }
  .l-section__hdg {
    border-bottom: 1px solid #c1c8d3;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 10px;
    text-align: left;
  }
  .l-section__category, .l-section__segment {
    padding-left: 20px;
  }
  .l-section__segment > li {
    border-bottom: 1px solid #c1c8d3;
  }
  .l-section__item:not(:first-of-type) {
    margin-top: 30px;
  }
  .l-segment__hdg {
    font-size: 14px;
    font-weight: 400;
    padding: 14px 20px 14px 0;
    position: relative;
    text-align: left;
    width: 100%;
  }
  .l-segment__category {
    /* border-bottom: 1px solid #c1c8d3; */
    padding-left: 10px;
  }
  .l-segment__category__wrapper {
    padding-bottom: 20px;
    margin-left: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dadada;
  }
  .l-segment__category--2 {
    padding-top: 2rem;
    padding-left: 14px;
  }
  .l-segment__category--2 .l-category__item + .l-category__item {
    margin-top: 16px;
  }
  /* ZERO COLLECTION用 */
  .l-segment__category__wrapper--zero {
    border-bottom: none;
    border-top: 1px solid #dadada;
    margin: 20px 0 0;
  }
  .l-segment__category__wrapper--zero .l-segment__category__title {
    font-weight: 400;
  }
  .l-segment__category__title {
    font-size: 14px;
    font-weight: 700;
    padding: 14px 20px 20px 0;
    position: relative;
    text-align: left;
    width: 100%;
    color: #393c41;
  }
  .l-segment__category__wrapper .l-segment__category {
    border-bottom: 0;
    padding-left: 0;
  }
  .l-category__item {
    font-size: 14px;
  }
  .l-category__item:not(:first-of-type), .l-pickup {
    margin-top: 20px;
  }
  .l-category__item > a:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-category__item > a:hover {
      opacity: 0.4;
    }
  }
  .l-pickup {
    background: #fff;
    padding: 20px;
  }
  .l-pickup a:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-pickup a:hover {
      opacity: 0.4;
    }
  }
  .l-pickup__hdg {
    display: none;
  }
  .l-pickup__hdg.l-pickup__hdg--link-ttl {
    display: inline-flex;
    margin-bottom: 18px;
  }
  .l-pickup__hdg.l-pickup__hdg--link-ttl.l-nav-link-blank {
    background-size: 11px 11px;
  }
  .l-pickup__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
  }
  .l-pickup__list:not(:first-of-type) {
    border-top: 1px solid #c1c8d3;
    margin-top: 20px;
    padding-top: 20px;
  }
  .l-pickup__list>li {
    font-size: 14px;
    width: calc(50% - 7px);
  }
  .l-pickup__list>li:nth-of-type(n+3) {
    margin-top: 20px;
  }
  @media (max-width: 767px) {
    .l-pickup p.ttl-pickup {
      margin: 0 0 16px;
      font-weight: 600;
    }
    .l-pickup.corp{
        background: unset;
        padding: 8px;
    }
    .l-pickup.corp .l-category__item:not(:first-of-type), .l-pickup {
      margin-top: 8px;
    }
    .l-pickup.corp .l-pickup__list>li {
      font-size: 12px;
    }
    .l-pickup.corp .l-pickup__list>li:nth-of-type(n+3) {
      margin-top: 8px;
    }
    .l-pickup.corp a {
      text-decoration: underline;
    }
  }

  .l-search {
    position: relative;
    margin-bottom: 20px;
  }
  .l-search__input[type=text] {
    background: #fff;
    border-radius: 4px;
    font-size: 16px;
    padding: 10px 50px 10px 14px;
    width: 100%;
  }
  .l-search__submit {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%26%23x30EC%3B%26%23x30A4%3B%26%23x30E4%3B%26%23x30FC%3B_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewbox%3D%220%200%2033%2033%22%20width%3D%2233px%22%20height%3D%2233px%22%3E%3Cstyle%3E.st0%2C.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%232f2f2f%7D.st1%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3Ccircle%20class%3D%22st0%22%20cx%3D%2216.5%22%20cy%3D%2216.5%22%20r%3D%2216.5%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M18.2%2018.2c1.7-1.7%201.7-4.4%200-6.1-1.7-1.7-4.4-1.7-6.1%200-1.7%201.7-1.7%204.4%200%206.1%201.8%201.7%204.5%201.7%206.1%200zm1.5.5l3.6%203.6c.3.3.3.7%200%201-.3.3-.7.3-1%200l-3.6-3.6c-2.2%201.7-5.5%201.6-7.5-.5-2.2-2.2-2.2-5.8%200-8.1%202.2-2.2%205.8-2.2%208.1%200%202%202.1%202.2%205.4.4%207.6z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 25px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
  }
  .c-accordion[data-drawer-active=true] .c-accordion__trigger:after {
    transform: translateY(-50%) rotateX(180deg);
  }
  .c-accordion[data-drawer-active=true] .c-accordion__detail {
    margin-top: 10px;
    padding-bottom: 20px;
  }
  .c-accordion__trigger {
    color: #393c41;
    display: block;
    position: relative;
    width: 100%;
  }
  .c-accordion__trigger:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.707%22%20height%3D%227.061%22%20viewBox%3D%220%200%2012.707%207.061%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_24%22%20data-name%3D%22%E3%83%91%E3%82%B9%2024%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(405.988%20-2169.654)%20rotate(90)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 7px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s;
    width: 13px;
  }
  .c-accordion__trigger:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .c-accordion__trigger:hover {
      opacity: 0.4;
    } 
  }
  .c-accordion__detail {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, margin .3s;
  }
  .c-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
  }
  .c-label {
    background: #79888b;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    padding: 5px 8px;
  }
  .l-nav-drawer__item__sunagawa-factory {
    position: relative;
  }

  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item.l-nav-drawer__item__sunagawa-factory>button {
    padding: 17px 10px;
  }

  .l-nav-drawer__item__sunagawa-factory::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  }
  .l-nav-drawer[data-drawer=factory] .l-section__hdg,
  .l-nav-drawer[data-drawer=shop] .l-section__hdg {
    position: relative;
    padding: 0;
    border-bottom: 0;
  }
  /* .l-nav-drawer[data-drawer=factory] .l-section__hdg::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  } */
  .l-category__item--sub {
    font-size: 10px;
  }
  .l-category__item > a.limited::after {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #7e8c91;
    color: #ffffff;
    content: "限定";
    text-align: center;
    letter-spacing: 0px;
    font-size: 10px;
    line-height: 1;
  }
  .l-nav-link-blank {
    padding-right: 18px;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: calc(100% - 2px);
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%3E%0A%20%20%3Cpath%20id%3D%22download%22%20d%3D%22M5%2C0H9V4H8V1.707L4.353%2C5.353l-.707-.706L7.292%2C1H5ZM0%2C0H3V1H1V8H8V6H9V9H0Z%22%20fill%3D%22%23393c41%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E%0A);
  }
  .l-category__item > a.limited.limited__sunagawa::after {
    margin-left: 0;
    content: "砂川本店限定";
  }
  .l-category__item > a.limited.limited__sunagawa span {
    margin-right: 8px;
  }
  /* ZERO COLLECTION用 */
  .limited--zero {
    display: inline-block;
    margin-left: 8px;
    color: rgb(255, 255, 255);
    text-align: center;
    letter-spacing: 0px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgb(126, 140, 145);
  }
  .l-category__item.separator-line {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dadada;
  }
  .l-section__item__link {
    position: relative;
    padding: 12px 10px 12px;
    border-bottom: 1px solid #c1c8d3;
    display: block;
  }
  .l-section__item__link::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  }
  .l-section__item__link:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-section__item__link:hover {
      opacity: 0.4;
    }
  }
  .l-nav-drawer.l-nav-drawer--multilayer .l-nav-drawer__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .l-nav-drawer.l-nav-drawer--multilayer .l-nav-drawer__hdg {
    margin: 0 auto 15px;
    width: 100%;
    max-width: calc(100% - (20px * 2));
   }
  .l-nav-drawer.l-nav-drawer--multilayer .l-nav-drawer__wrapper {
    padding-left: 20px;
    padding-right: 20px;
    height: calc(100% - 5px);
  }
  .l-nav-drawer__back:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-nav-drawer__back:hover {
      opacity: 0.4;
    }  
  }
  .l-nav-drawer__item > button {
    width: 100%;
    text-align: left;
    position: relative;
  }
  .l-nav-drawer__item > button:active {
    opacity: 0.4;
  }
  @media (pointer: fine) {
    .l-nav-drawer__item > button:hover {
      opacity: 0.4;
    }
  }
  .l-nav-drawer[data-drawer=menu] .l-nav-drawer__item[data-drawer-id]:after {
    content: none;
  }
  .l-nav-drawer__item > button::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  }
  .l-nav-drawer__item > button:active:before {
    opacity: 0.4;
  }
}
@media (max-width:767px) {
  /* .headText {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
  } */
}

/* 限定テーマ色 アイスミント2023 */
@media (max-width:767px) {
  .l-nav.theme-icemint {
    background: #1e4e6e;
  }
  .l-nav.theme-icemint .l-nav__list {
    background: #1e4e6e;
  }
  .l-nav.theme-icemint .l-nav__badge {
    border: 1px solid #173a51;
  }
}

/* 2024/07/04 カテゴリから探す追加 */

@media (max-width:767px) {
  .search__title {
    font-size: 1.4rem;
    /* font-weight: 500; */
  }
  .search__category {
    margin-top: 24px;
    width: 100%;
  }
  .search__category .search__title {
    margin-bottom: 15px;
  }
  /* .search__category .item-holder {
    margin-top: 30px;
  } */
  .search__category .item-holder .item-holder-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 0px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .search__category .item-holder .item {
    width: calc((100% - 12px) / 3);
    padding: 0px; 
  }

  .search__category .item-holder .link {
    border-radius: 3px;
  }

  .search__category .item-holder .item .text-area .name {
    text-align: center;
    font-size: 1.0rem;
  }

  .search__category .item-holder .item a {
    font-size: 1.2rem;
    background: none;
  }
  .search__category .item-holder .item a  .text-area{
    padding: 4px 10px 8px;
  }


  /* .search__category .item-holder .tab-inner .item {
    width: calc((100% - 20px) / 3);
    padding: 0px; 
  } */
}


/* 2024/07/02 search欄アコーディオン追加 */
@media (max-width:767px) {
  .product__search {
    margin-top: 50px;
    width: 100%;
  }
  .product__search__list {
    display: flex;
    flex-direction: column;
  }
  .product__search__item {
    border-bottom: 1px solid #c1c8d3;
    position: relative;
  }
  .product__search__item:last-of-type {
    border-bottom: 0px solid #c1c8d3;
  }
  .product__search__item .acordion__btn {
    cursor: pointer;
    color: #393c41;
    display: block;
    font-weight: 400;
    padding: 17px 10px;
    font-size: 1.5rem;
    width: 100%;
    text-align: left;
    position: relative;
  }
  .product__search__item .acordion__btn::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.061%22%20height%3D%2212.707%22%20viewBox%3D%220%200%207.061%2012.707%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_23%22%20data-name%3D%22%E3%83%91%E3%82%B9%2023%22%20d%3D%22M2170.008%2C393.635l6%2C6-6%2C6%22%20transform%3D%22translate(-2169.654%20-393.281)%22%20fill%3D%22none%22%20stroke%3D%22%23393c41%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    height: 13px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
  }
  .product__search__item .acordion__btn.is-open::before {
    transform: translateY(-50%) rotate(90deg);
  }
  .acordion {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    border-top: 1px solid rgb(193, 200, 211);
    padding: 20px 0 20px 1.5em;
  }
  .acordion.is-open {
    display: block;
    max-height: 1000px;
  }
  .acordion > * {
    transition: opacity 0.3s ease-out;
    opacity: 0;
  }
  
  .acordion.is-open > * {
    opacity: 1;
  }
  .acordion .acordion__item {
    margin-bottom: 15px;
  }
  .acordion .acordion__item:last-of-type {
    margin-bottom: 0px;
  }
}


/* ------------------- */
/* スクロール時navi表示非表示切替 */
/* ------------------- */
@media (max-width:767px) {
  nav.l-nav {
    will-change: transform;
    transition: transform 0.3s ease-in-out;
  }
}


/**/
a.btn.btn-secondary.ga-product-type,
a.btn.btn-secondary.ga-product-purpose {
  color: #393c41;
  text-decoration: underline;
}